#CCD4DD - #7689A2 | 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 #CCD4DD to #7689A2

#CCD4DD #7689A2

Calculate the color between two colors, #CCD4DD and #7689A2. 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)

#CCD4DD - #7689A2 | 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 #CCD4DD as 0% and #7689A2 as 100%.

0.0%	0.0% #CCD4DD	RGB 204 212 221	#CCD4DD
16.7%	16.7% #BDC7D3	RGB 189 199 211	#BDC7D3
33.3%	33.3% #AFBBC9	RGB 175 187 201	#AFBBC9
50.0%	50.0% #A1AEBF	RGB 161 174 191	#A1AEBF
66.7%	66.7% #92A2B5	RGB 146 162 181	#92A2B5
83.3%	83.3% #8495AB	RGB 132 149 171	#8495AB
100.0%	100.0% #7689A2	RGB 118 137 162	#7689A2

#CCD4DD #BDC7D3 #AFBBC9 #A1AEBF #92A2B5 #8495AB #7689A2

#CCD4DD - #7689A2

HSV Blend

#CCD4DD - #7689A2 | 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 #CCD4DD as 0% and #7689A2 as 100%.

0.0%	0.0% #CCD4DD	RGB 204 212 221	#CCD4DD
16.7%	16.7% #BCC6D3	RGB 188 198 211	#BCC6D3
33.3%	33.3% #ACB9C9	RGB 172 185 201	#ACB9C9
50.0%	50.0% #9EADBF	RGB 158 173 191	#9EADBF
66.7%	66.7% #90A0B5	RGB 144 160 181	#90A0B5
83.3%	83.3% #8294AB	RGB 130 148 171	#8294AB
100.0%	100.0% #7689A2	RGB 118 137 162	#7689A2

#CCD4DD #BCC6D3 #ACB9C9 #9EADBF #90A0B5 #8294AB #7689A2

#CCD4DD - #9EADBF - #7689A2

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CCD4DD 0%, #9EADBF 50%, #7689A2 100%);
    background: -webkit-linear-gradient(top, #CCD4DD 0%, #9EADBF 50%, #7689A2 100%);
    background: linear-gradient(to bottom, #CCD4DD 0%, #9EADBF 50%, #7689A2 100%);
}
</style>