#CCD4D2 - #689C9F | 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 #CCD4D2 to #689C9F

#CCD4D2 #689C9F

Calculate the color between two colors, #CCD4D2 and #689C9F. 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)

#CCD4D2 - #689C9F | 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 #CCD4D2 as 0% and #689C9F as 100%.

0.0%	0.0% #CCD4D2	RGB 204 212 210	#CCD4D2
16.7%	16.7% #BBCAC9	RGB 187 202 201	#BBCAC9
33.3%	33.3% #AAC1C1	RGB 170 193 193	#AAC1C1
50.0%	50.0% #9AB8B8	RGB 154 184 184	#9AB8B8
66.7%	66.7% #89AEB0	RGB 137 174 176	#89AEB0
83.3%	83.3% #78A5A7	RGB 120 165 167	#78A5A7
100.0%	100.0% #689C9F	RGB 104 156 159	#689C9F

#CCD4D2 #BBCAC9 #AAC1C1 #9AB8B8 #89AEB0 #78A5A7 #689C9F

#CCD4D2 - #689C9F

HSV Blend

#CCD4D2 - #689C9F | 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 #CCD4D2 as 0% and #689C9F as 100%.

0.0%	0.0% #CCD4D2	RGB 204 212 210	#CCD4D2
16.7%	16.7% #B9CBC7	RGB 185 203 199	#B9CBC7
33.3%	33.3% #A7C2BE	RGB 167 194 190	#A7C2BE
50.0%	50.0% #95B9B6	RGB 149 185 182	#95B9B6
66.7%	66.7% #85B0AE	RGB 133 176 174	#85B0AE
83.3%	83.3% #76A7A7	RGB 118 167 167	#76A7A7
100.0%	100.0% #689C9F	RGB 104 156 159	#689C9F

#CCD4D2 #B9CBC7 #A7C2BE #95B9B6 #85B0AE #76A7A7 #689C9F

#CCD4D2 - #95B9B6 - #689C9F

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CCD4D2 0%, #95B9B6 50%, #689C9F 100%);
    background: -webkit-linear-gradient(top, #CCD4D2 0%, #95B9B6 50%, #689C9F 100%);
    background: linear-gradient(to bottom, #CCD4D2 0%, #95B9B6 50%, #689C9F 100%);
}
</style>