#CACAF5 - #657BC5 | 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 #CACAF5 to #657BC5

#CACAF5 #657BC5

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

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

0.0%	0.0% #CACAF5	RGB 202 202 245	#CACAF5
16.7%	16.7% #B9BCED	RGB 185 188 237	#B9BCED
33.3%	33.3% #A8AFE5	RGB 168 175 229	#A8AFE5
50.0%	50.0% #97A2DD	RGB 151 162 221	#97A2DD
66.7%	66.7% #8695D5	RGB 134 149 213	#8695D5
83.3%	83.3% #7588CD	RGB 117 136 205	#7588CD
100.0%	100.0% #657BC5	RGB 101 123 197	#657BC5

#CACAF5 #B9BCED #A8AFE5 #97A2DD #8695D5 #7588CD #657BC5

#CACAF5 - #657BC5

HSV Blend

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

0.0%	0.0% #CACAF5	RGB 202 202 245	#CACAF5
16.7%	16.7% #B7B9ED	RGB 183 185 237	#B7B9ED
33.3%	33.3% #A5A9E5	RGB 165 169 229	#A5A9E5
50.0%	50.0% #939CDD	RGB 147 156 221	#939CDD
66.7%	66.7% #838FD5	RGB 131 143 213	#838FD5
83.3%	83.3% #7384CD	RGB 115 132 205	#7384CD
100.0%	100.0% #657BC5	RGB 101 123 197	#657BC5

#CACAF5 #B7B9ED #A5A9E5 #939CDD #838FD5 #7384CD #657BC5

#CACAF5 - #939CDD - #657BC5

CSS codes

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

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