#CCCDFE - #667CD3 | 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 #CCCDFE to #667CD3

#CCCDFE #667CD3

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

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

0.0%	0.0% #CCCDFE	RGB 204 205 254	#CCCDFE
16.7%	16.7% #BBBFF6	RGB 187 191 246	#BBBFF6
33.3%	33.3% #AAB2EF	RGB 170 178 239	#AAB2EF
50.0%	50.0% #99A4E8	RGB 153 164 232	#99A4E8
66.7%	66.7% #8897E1	RGB 136 151 225	#8897E1
83.3%	83.3% #7789DA	RGB 119 137 218	#7789DA
100.0%	100.0% #667CD3	RGB 102 124 211	#667CD3

#CCCDFE #BBBFF6 #AAB2EF #99A4E8 #8897E1 #7789DA #667CD3

#CCCDFE - #667CD3

HSV Blend

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

0.0%	0.0% #CCCDFE	RGB 204 205 254	#CCCDFE
16.7%	16.7% #B9BCF6	RGB 185 188 246	#B9BCF6
33.3%	33.3% #A6ACEF	RGB 166 172 239	#A6ACEF
50.0%	50.0% #959EE8	RGB 149 158 232	#959EE8
66.7%	66.7% #8491E1	RGB 132 145 225	#8491E1
83.3%	83.3% #7586DA	RGB 117 134 218	#7586DA
100.0%	100.0% #667CD3	RGB 102 124 211	#667CD3

#CCCDFE #B9BCF6 #A6ACEF #959EE8 #8491E1 #7586DA #667CD3

#CCCDFE - #959EE8 - #667CD3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CCCDFE 0%, #959EE8 50%, #667CD3 100%);
    background: -webkit-linear-gradient(top, #CCCDFE 0%, #959EE8 50%, #667CD3 100%);
    background: linear-gradient(to bottom, #CCCDFE 0%, #959EE8 50%, #667CD3 100%);
}
</style>