#CAF0FF - #71AFD7 | 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 #CAF0FF to #71AFD7

#CAF0FF #71AFD7

Calculate the color between two colors, #CAF0FF and #71AFD7. 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)

#CAF0FF - #71AFD7 | 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 #CAF0FF as 0% and #71AFD7 as 100%.

0.0%	0.0% #CAF0FF	RGB 202 240 255	#CAF0FF
16.7%	16.7% #BBE5F8	RGB 187 229 248	#BBE5F8
33.3%	33.3% #ACDAF1	RGB 172 218 241	#ACDAF1
50.0%	50.0% #9DCFEB	RGB 157 207 235	#9DCFEB
66.7%	66.7% #8EC4E4	RGB 142 196 228	#8EC4E4
83.3%	83.3% #7FB9DD	RGB 127 185 221	#7FB9DD
100.0%	100.0% #71AFD7	RGB 113 175 215	#71AFD7

#CAF0FF #BBE5F8 #ACDAF1 #9DCFEB #8EC4E4 #7FB9DD #71AFD7

#CAF0FF - #71AFD7

HSV Blend

#CAF0FF - #71AFD7 | 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 #CAF0FF as 0% and #71AFD7 as 100%.

0.0%	0.0% #CAF0FF	RGB 202 240 255	#CAF0FF
16.7%	16.7% #B9E5F8	RGB 185 229 248	#B9E5F8
33.3%	33.3% #A9DAF1	RGB 169 218 241	#A9DAF1
50.0%	50.0% #9ACFEB	RGB 154 207 235	#9ACFEB
66.7%	66.7% #8CC5E4	RGB 140 197 228	#8CC5E4
83.3%	83.3% #7EBADD	RGB 126 186 221	#7EBADD
100.0%	100.0% #71AFD7	RGB 113 175 215	#71AFD7

#CAF0FF #B9E5F8 #A9DAF1 #9ACFEB #8CC5E4 #7EBADD #71AFD7

#CAF0FF - #9ACFEB - #71AFD7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CAF0FF 0%, #9ACFEB 50%, #71AFD7 100%);
    background: -webkit-linear-gradient(top, #CAF0FF 0%, #9ACFEB 50%, #71AFD7 100%);
    background: linear-gradient(to bottom, #CAF0FF 0%, #9ACFEB 50%, #71AFD7 100%);
}
</style>