#6FBDF3 - #CCDEE4 | 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 #6FBDF3 to #CCDEE4

#6FBDF3 #CCDEE4

Calculate the color between two colors, #6FBDF3 and #CCDEE4. 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)

#6FBDF3 - #CCDEE4 | 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 #6FBDF3 as 0% and #CCDEE4 as 100%.

0.0%	0.0% #6FBDF3	RGB 111 189 243	#6FBDF3
16.7%	16.7% #7EC2F0	RGB 126 194 240	#7EC2F0
33.3%	33.3% #8EC8EE	RGB 142 200 238	#8EC8EE
50.0%	50.0% #9DCDEB	RGB 157 205 235	#9DCDEB
66.7%	66.7% #ADD3E9	RGB 173 211 233	#ADD3E9
83.3%	83.3% #BCD8E6	RGB 188 216 230	#BCD8E6
100.0%	100.0% #CCDEE4	RGB 204 222 228	#CCDEE4

#6FBDF3 #7EC2F0 #8EC8EE #9DCDEB #ADD3E9 #BCD8E6 #CCDEE4

#6FBDF3 - #CCDEE4

HSV Blend

#6FBDF3 - #CCDEE4 | 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 #6FBDF3 as 0% and #CCDEE4 as 100%.

0.0%	0.0% #6FBDF3	RGB 111 189 243	#6FBDF3
16.7%	16.7% #7FC5F0	RGB 127 197 240	#7FC5F0
33.3%	33.3% #8FCCEE	RGB 143 204 238	#8FCCEE
50.0%	50.0% #9FD2EB	RGB 159 210 235	#9FD2EB
66.7%	66.7% #AED7E9	RGB 174 215 233	#AED7E9
83.3%	83.3% #BDDBE6	RGB 189 219 230	#BDDBE6
100.0%	100.0% #CCDEE4	RGB 204 222 228	#CCDEE4

#6FBDF3 #7FC5F0 #8FCCEE #9FD2EB #AED7E9 #BDDBE6 #CCDEE4

#6FBDF3 - #9FD2EB - #CCDEE4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #6FBDF3 0%, #9FD2EB 50%, #CCDEE4 100%);
    background: -webkit-linear-gradient(top, #6FBDF3 0%, #9FD2EB 50%, #CCDEE4 100%);
    background: linear-gradient(to bottom, #6FBDF3 0%, #9FD2EB 50%, #CCDEE4 100%);
}
</style>