#CFD3E5 - #686AB6 | 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 #CFD3E5 to #686AB6

#CFD3E5 #686AB6

Calculate the color between two colors, #CFD3E5 and #686AB6. 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)

#CFD3E5 - #686AB6 | 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 #CFD3E5 as 0% and #686AB6 as 100%.

0.0%	0.0% #CFD3E5	RGB 207 211 229	#CFD3E5
16.7%	16.7% #BDC1DD	RGB 189 193 221	#BDC1DD
33.3%	33.3% #ACB0D5	RGB 172 176 213	#ACB0D5
50.0%	50.0% #9B9ECD	RGB 155 158 205	#9B9ECD
66.7%	66.7% #8A8DC5	RGB 138 141 197	#8A8DC5
83.3%	83.3% #797BBD	RGB 121 123 189	#797BBD
100.0%	100.0% #686AB6	RGB 104 106 182	#686AB6

#CFD3E5 #BDC1DD #ACB0D5 #9B9ECD #8A8DC5 #797BBD #686AB6

#CFD3E5 - #686AB6

HSV Blend

#CFD3E5 - #686AB6 | 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 #CFD3E5 as 0% and #686AB6 as 100%.

0.0%	0.0% #CFD3E5	RGB 207 211 229	#CFD3E5
16.7%	16.7% #BBC0DD	RGB 187 192 221	#BBC0DD
33.3%	33.3% #A9AED5	RGB 169 174 213	#A9AED5
50.0%	50.0% #979DCD	RGB 151 157 205	#979DCD
66.7%	66.7% #868BC5	RGB 134 139 197	#868BC5
83.3%	83.3% #767ABD	RGB 118 122 189	#767ABD
100.0%	100.0% #686AB6	RGB 104 106 182	#686AB6

#CFD3E5 #BBC0DD #A9AED5 #979DCD #868BC5 #767ABD #686AB6

#CFD3E5 - #979DCD - #686AB6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CFD3E5 0%, #979DCD 50%, #686AB6 100%);
    background: -webkit-linear-gradient(top, #CFD3E5 0%, #979DCD 50%, #686AB6 100%);
    background: linear-gradient(to bottom, #CFD3E5 0%, #979DCD 50%, #686AB6 100%);
}
</style>