#CDDEF9 - #5A8DD9 | 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 #CDDEF9 to #5A8DD9

#CDDEF9 #5A8DD9

Calculate the color between two colors, #CDDEF9 and #5A8DD9. 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)

#CDDEF9 - #5A8DD9 | 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 #CDDEF9 as 0% and #5A8DD9 as 100%.

0.0%	0.0% #CDDEF9	RGB 205 222 249	#CDDEF9
16.7%	16.7% #B9D0F3	RGB 185 208 243	#B9D0F3
33.3%	33.3% #A6C3EE	RGB 166 195 238	#A6C3EE
50.0%	50.0% #93B5E9	RGB 147 181 233	#93B5E9
66.7%	66.7% #80A8E3	RGB 128 168 227	#80A8E3
83.3%	83.3% #6D9ADE	RGB 109 154 222	#6D9ADE
100.0%	100.0% #5A8DD9	RGB 90 141 217	#5A8DD9

#CDDEF9 #B9D0F3 #A6C3EE #93B5E9 #80A8E3 #6D9ADE #5A8DD9

#CDDEF9 - #5A8DD9

HSV Blend

#CDDEF9 - #5A8DD9 | 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 #CDDEF9 as 0% and #5A8DD9 as 100%.

0.0%	0.0% #CDDEF9	RGB 205 222 249	#CDDEF9
16.7%	16.7% #B8CFF3	RGB 184 207 243	#B8CFF3
33.3%	33.3% #A3C0EE	RGB 163 192 238	#A3C0EE
50.0%	50.0% #90B3E9	RGB 144 179 233	#90B3E9
66.7%	66.7% #7DA5E3	RGB 125 165 227	#7DA5E3
83.3%	83.3% #6B99DE	RGB 107 153 222	#6B99DE
100.0%	100.0% #5A8DD9	RGB 90 141 217	#5A8DD9

#CDDEF9 #B8CFF3 #A3C0EE #90B3E9 #7DA5E3 #6B99DE #5A8DD9

#CDDEF9 - #90B3E9 - #5A8DD9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CDDEF9 0%, #90B3E9 50%, #5A8DD9 100%);
    background: -webkit-linear-gradient(top, #CDDEF9 0%, #90B3E9 50%, #5A8DD9 100%);
    background: linear-gradient(to bottom, #CDDEF9 0%, #90B3E9 50%, #5A8DD9 100%);
}
</style>