#CACAF6 - #657BC6 | 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 #CACAF6 to #657BC6

#CACAF6 #657BC6

Calculate the color between two colors, #CACAF6 and #657BC6. 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)

#CACAF6 - #657BC6 | 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 #CACAF6 as 0% and #657BC6 as 100%.

0.0%	0.0% #CACAF6	RGB 202 202 246	#CACAF6
16.7%	16.7% #B9BCEE	RGB 185 188 238	#B9BCEE
33.3%	33.3% #A8AFE6	RGB 168 175 230	#A8AFE6
50.0%	50.0% #97A2DE	RGB 151 162 222	#97A2DE
66.7%	66.7% #8695D6	RGB 134 149 214	#8695D6
83.3%	83.3% #7588CE	RGB 117 136 206	#7588CE
100.0%	100.0% #657BC6	RGB 101 123 198	#657BC6

#CACAF6 #B9BCEE #A8AFE6 #97A2DE #8695D6 #7588CE #657BC6

#CACAF6 - #657BC6

HSV Blend

#CACAF6 - #657BC6 | 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 #CACAF6 as 0% and #657BC6 as 100%.

0.0%	0.0% #CACAF6	RGB 202 202 246	#CACAF6
16.7%	16.7% #B7B9EE	RGB 183 185 238	#B7B9EE
33.3%	33.3% #A5A9E6	RGB 165 169 230	#A5A9E6
50.0%	50.0% #939CDE	RGB 147 156 222	#939CDE
66.7%	66.7% #838FD6	RGB 131 143 214	#838FD6
83.3%	83.3% #7384CE	RGB 115 132 206	#7384CE
100.0%	100.0% #657BC6	RGB 101 123 198	#657BC6

#CACAF6 #B7B9EE #A5A9E6 #939CDE #838FD6 #7384CE #657BC6

#CACAF6 - #939CDE - #657BC6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CACAF6 0%, #939CDE 50%, #657BC6 100%);
    background: -webkit-linear-gradient(top, #CACAF6 0%, #939CDE 50%, #657BC6 100%);
    background: linear-gradient(to bottom, #CACAF6 0%, #939CDE 50%, #657BC6 100%);
}
</style>