#CCD4DC - #7689A1 | 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 #CCD4DC to #7689A1

#CCD4DC #7689A1

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

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

0.0%	0.0% #CCD4DC	RGB 204 212 220	#CCD4DC
16.7%	16.7% #BDC7D2	RGB 189 199 210	#BDC7D2
33.3%	33.3% #AFBBC8	RGB 175 187 200	#AFBBC8
50.0%	50.0% #A1AEBE	RGB 161 174 190	#A1AEBE
66.7%	66.7% #92A2B4	RGB 146 162 180	#92A2B4
83.3%	83.3% #8495AA	RGB 132 149 170	#8495AA
100.0%	100.0% #7689A1	RGB 118 137 161	#7689A1

#CCD4DC #BDC7D2 #AFBBC8 #A1AEBE #92A2B4 #8495AA #7689A1

#CCD4DC - #7689A1

HSV Blend

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

0.0%	0.0% #CCD4DC	RGB 204 212 220	#CCD4DC
16.7%	16.7% #BCC6D2	RGB 188 198 210	#BCC6D2
33.3%	33.3% #ACBAC8	RGB 172 186 200	#ACBAC8
50.0%	50.0% #9EADBE	RGB 158 173 190	#9EADBE
66.7%	66.7% #90A0B4	RGB 144 160 180	#90A0B4
83.3%	83.3% #8294AA	RGB 130 148 170	#8294AA
100.0%	100.0% #7689A1	RGB 118 137 161	#7689A1

#CCD4DC #BCC6D2 #ACBAC8 #9EADBE #90A0B4 #8294AA #7689A1

#CCD4DC - #9EADBE - #7689A1

CSS codes

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

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