#CACAF2 - #667CC0 | 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 #CACAF2 to #667CC0

#CACAF2 #667CC0

Calculate the color between two colors, #CACAF2 and #667CC0. 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)

#CACAF2 - #667CC0 | 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 #CACAF2 as 0% and #667CC0 as 100%.

0.0%	0.0% #CACAF2	RGB 202 202 242	#CACAF2
16.7%	16.7% #B9BDE9	RGB 185 189 233	#B9BDE9
33.3%	33.3% #A8B0E1	RGB 168 176 225	#A8B0E1
50.0%	50.0% #98A3D9	RGB 152 163 217	#98A3D9
66.7%	66.7% #8796D0	RGB 135 150 208	#8796D0
83.3%	83.3% #7689C8	RGB 118 137 200	#7689C8
100.0%	100.0% #667CC0	RGB 102 124 192	#667CC0

#CACAF2 #B9BDE9 #A8B0E1 #98A3D9 #8796D0 #7689C8 #667CC0

#CACAF2 - #667CC0

HSV Blend

#CACAF2 - #667CC0 | 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 #CACAF2 as 0% and #667CC0 as 100%.

0.0%	0.0% #CACAF2	RGB 202 202 242	#CACAF2
16.7%	16.7% #B7B9E9	RGB 183 185 233	#B7B9E9
33.3%	33.3% #A5AAE1	RGB 165 170 225	#A5AAE1
50.0%	50.0% #949CD9	RGB 148 156 217	#949CD9
66.7%	66.7% #8390D0	RGB 131 144 208	#8390D0
83.3%	83.3% #7485C8	RGB 116 133 200	#7485C8
100.0%	100.0% #667CC0	RGB 102 124 192	#667CC0

#CACAF2 #B7B9E9 #A5AAE1 #949CD9 #8390D0 #7485C8 #667CC0

#CACAF2 - #949CD9 - #667CC0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CACAF2 0%, #949CD9 50%, #667CC0 100%);
    background: -webkit-linear-gradient(top, #CACAF2 0%, #949CD9 50%, #667CC0 100%);
    background: linear-gradient(to bottom, #CACAF2 0%, #949CD9 50%, #667CC0 100%);
}
</style>