#CCCCF7 - #677DC8 | 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 #CCCCF7 to #677DC8

#CCCCF7 #677DC8

Calculate the color between two colors, #CCCCF7 and #677DC8. 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)

#CCCCF7 - #677DC8 | 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 #CCCCF7 as 0% and #677DC8 as 100%.

0.0%	0.0% #CCCCF7	RGB 204 204 247	#CCCCF7
16.7%	16.7% #BBBEEF	RGB 187 190 239	#BBBEEF
33.3%	33.3% #AAB1E7	RGB 170 177 231	#AAB1E7
50.0%	50.0% #99A4DF	RGB 153 164 223	#99A4DF
66.7%	66.7% #8897D7	RGB 136 151 215	#8897D7
83.3%	83.3% #778ACF	RGB 119 138 207	#778ACF
100.0%	100.0% #677DC8	RGB 103 125 200	#677DC8

#CCCCF7 #BBBEEF #AAB1E7 #99A4DF #8897D7 #778ACF #677DC8

#CCCCF7 - #677DC8

HSV Blend

#CCCCF7 - #677DC8 | 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 #CCCCF7 as 0% and #677DC8 as 100%.

0.0%	0.0% #CCCCF7	RGB 204 204 247	#CCCCF7
16.7%	16.7% #B9BBEF	RGB 185 187 239	#B9BBEF
33.3%	33.3% #A7ABE7	RGB 167 171 231	#A7ABE7
50.0%	50.0% #959EDF	RGB 149 158 223	#959EDF
66.7%	66.7% #8591D7	RGB 133 145 215	#8591D7
83.3%	83.3% #7586CF	RGB 117 134 207	#7586CF
100.0%	100.0% #677DC8	RGB 103 125 200	#677DC8

#CCCCF7 #B9BBEF #A7ABE7 #959EDF #8591D7 #7586CF #677DC8

#CCCCF7 - #959EDF - #677DC8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CCCCF7 0%, #959EDF 50%, #677DC8 100%);
    background: -webkit-linear-gradient(top, #CCCCF7 0%, #959EDF 50%, #677DC8 100%);
    background: linear-gradient(to bottom, #CCCCF7 0%, #959EDF 50%, #677DC8 100%);
}
</style>