#CED1D4 - #687BA0 | 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 #CED1D4 to #687BA0

#CED1D4 #687BA0

Calculate the color between two colors, #CED1D4 and #687BA0. 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)

#CED1D4 - #687BA0 | 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 #CED1D4 as 0% and #687BA0 as 100%.

0.0%	0.0% #CED1D4	RGB 206 209 212	#CED1D4
16.7%	16.7% #BDC2CB	RGB 189 194 203	#BDC2CB
33.3%	33.3% #ACB4C2	RGB 172 180 194	#ACB4C2
50.0%	50.0% #9BA6BA	RGB 155 166 186	#9BA6BA
66.7%	66.7% #8A97B1	RGB 138 151 177	#8A97B1
83.3%	83.3% #7989A8	RGB 121 137 168	#7989A8
100.0%	100.0% #687BA0	RGB 104 123 160	#687BA0

#CED1D4 #BDC2CB #ACB4C2 #9BA6BA #8A97B1 #7989A8 #687BA0

#CED1D4 - #687BA0

HSV Blend

#CED1D4 - #687BA0 | 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 #CED1D4 as 0% and #687BA0 as 100%.

0.0%	0.0% #CED1D4	RGB 206 209 212	#CED1D4
16.7%	16.7% #BAC2CB	RGB 186 194 203	#BAC2CB
33.3%	33.3% #A8B4C2	RGB 168 180 194	#A8B4C2
50.0%	50.0% #96A5BA	RGB 150 165 186	#96A5BA
66.7%	66.7% #8697B1	RGB 134 151 177	#8697B1
83.3%	83.3% #7688A8	RGB 118 136 168	#7688A8
100.0%	100.0% #687BA0	RGB 104 123 160	#687BA0

#CED1D4 #BAC2CB #A8B4C2 #96A5BA #8697B1 #7688A8 #687BA0

#CED1D4 - #96A5BA - #687BA0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CED1D4 0%, #96A5BA 50%, #687BA0 100%);
    background: -webkit-linear-gradient(top, #CED1D4 0%, #96A5BA 50%, #687BA0 100%);
    background: linear-gradient(to bottom, #CED1D4 0%, #96A5BA 50%, #687BA0 100%);
}
</style>