#20BCD3 - #BFEBF2 | colorate

colorate is a color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work. Make this site better

Blend #20BCD3 to #BFEBF2

#20BCD3 #BFEBF2

Calculate the color between two colors, #20BCD3 and #BFEBF2. In calculation of RGB values, saturation between the dissimilar colors is low. In calculating of HSV values, saturation between the dissimilar colors is not low.

RGB Blend(Linear)

#20BCD3 - #BFEBF2 | colorate

Calculation of color between two colors based on RGB value. For colors that are distant from each other, the saturation between the two colors decreases. Expand the color between two colors with #20BCD3 as 0% and #BFEBF2 as 100%.

0.0%	0.0% #20BCD3	RGB 32 188 211	#20BCD3
16.7%	16.7% #3AC3D8	RGB 58 195 216	#3AC3D8
33.3%	33.3% #55CBDD	RGB 85 203 221	#55CBDD
50.0%	50.0% #6FD3E2	RGB 111 211 226	#6FD3E2
66.7%	66.7% #8ADBE7	RGB 138 219 231	#8ADBE7
83.3%	83.3% #A4E3EC	RGB 164 227 236	#A4E3EC
100.0%	100.0% #BFEBF2	RGB 191 235 242	#BFEBF2

#20BCD3 #3AC3D8 #55CBDD #6FD3E2 #8ADBE7 #A4E3EC #BFEBF2

#20BCD3 - #BFEBF2

HSV Blend

#20BCD3 - #BFEBF2 | colorate

Calculation of color between two colors based on HSV value. Even between distinct colors of color, the saturation between the two colors does not decrease. Expand the color between two colors with #20BCD3 as 0% and #BFEBF2 as 100%.

0.0%	0.0% #20BBD3	RGB 32 187 211	#20BBD3
16.7%	16.7% #37C3D8	RGB 55 195 216	#37C3D8
33.3%	33.3% #50CADD	RGB 80 202 221	#50CADD
50.0%	50.0% #6AD2E2	RGB 106 210 226	#6AD2E2
66.7%	66.7% #85DAE7	RGB 133 218 231	#85DAE7
83.3%	83.3% #A1E2EC	RGB 161 226 236	#A1E2EC
100.0%	100.0% #BFEBF2	RGB 191 235 242	#BFEBF2

#20BBD3 #37C3D8 #50CADD #6AD2E2 #85DAE7 #A1E2EC #BFEBF2

#20BCD3 - #6AD2E2 - #BFEBF2

CSS codes

<style type="text/css">
/* RGB Gradient */
div {
    background: -moz-linear-gradient(top, #20BCD3 0%, #BFEBF2 100%);
    background: -webkit-linear-gradient(top, #20BCD3 0%, #BFEBF2 100%);
    background: linear-gradient(to bottom, #20BCD3 0%, #BFEBF2 100%);
}

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #20BBD3 0%, #6AD2E2 50%, #BFEBF2 100%);
    background: -webkit-linear-gradient(top, #20BBD3 0%, #6AD2E2 50%, #BFEBF2 100%);
    background: linear-gradient(to bottom, #20BBD3 0%, #6AD2E2 50%, #BFEBF2 100%);
}
</style>