#CACCF3 - #667EC2 | 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 #CACCF3 to #667EC2

#CACCF3 #667EC2

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

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

0.0%	0.0% #CACCF3	RGB 202 204 243	#CACCF3
16.7%	16.7% #B9BFEA	RGB 185 191 234	#B9BFEA
33.3%	33.3% #A8B2E2	RGB 168 178 226	#A8B2E2
50.0%	50.0% #98A5DA	RGB 152 165 218	#98A5DA
66.7%	66.7% #8798D2	RGB 135 152 210	#8798D2
83.3%	83.3% #768BCA	RGB 118 139 202	#768BCA
100.0%	100.0% #667EC2	RGB 102 126 194	#667EC2

#CACCF3 #B9BFEA #A8B2E2 #98A5DA #8798D2 #768BCA #667EC2

#CACCF3 - #667EC2

HSV Blend

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

0.0%	0.0% #CACCF3	RGB 202 204 243	#CACCF3
16.7%	16.7% #B7BBEA	RGB 183 187 234	#B7BBEA
33.3%	33.3% #A5ACE2	RGB 165 172 226	#A5ACE2
50.0%	50.0% #949FDA	RGB 148 159 218	#949FDA
66.7%	66.7% #8492D2	RGB 132 146 210	#8492D2
83.3%	83.3% #7487CA	RGB 116 135 202	#7487CA
100.0%	100.0% #667EC2	RGB 102 126 194	#667EC2

#CACCF3 #B7BBEA #A5ACE2 #949FDA #8492D2 #7487CA #667EC2

#CACCF3 - #949FDA - #667EC2

CSS codes

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

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