#CCCDF1 - #6980BF | 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 #CCCDF1 to #6980BF

#CCCDF1 #6980BF

Calculate the color between two colors, #CCCDF1 and #6980BF. 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)

#CCCDF1 - #6980BF | 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 #CCCDF1 as 0% and #6980BF as 100%.

0.0%	0.0% #CCCDF1	RGB 204 205 241	#CCCDF1
16.7%	16.7% #BBC0E8	RGB 187 192 232	#BBC0E8
33.3%	33.3% #ABB3E0	RGB 171 179 224	#ABB3E0
50.0%	50.0% #9AA6D8	RGB 154 166 216	#9AA6D8
66.7%	66.7% #8A99CF	RGB 138 153 207	#8A99CF
83.3%	83.3% #798CC7	RGB 121 140 199	#798CC7
100.0%	100.0% #6980BF	RGB 105 128 191	#6980BF

#CCCDF1 #BBC0E8 #ABB3E0 #9AA6D8 #8A99CF #798CC7 #6980BF

#CCCDF1 - #6980BF

HSV Blend

#CCCDF1 - #6980BF | 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 #CCCDF1 as 0% and #6980BF as 100%.

0.0%	0.0% #CCCDF1	RGB 204 205 241	#CCCDF1
16.7%	16.7% #B9BCE8	RGB 185 188 232	#B9BCE8
33.3%	33.3% #A7ADE0	RGB 167 173 224	#A7ADE0
50.0%	50.0% #96A0D8	RGB 150 160 216	#96A0D8
66.7%	66.7% #8694CF	RGB 134 148 207	#8694CF
83.3%	83.3% #7789C7	RGB 119 137 199	#7789C7
100.0%	100.0% #6980BF	RGB 105 128 191	#6980BF

#CCCDF1 #B9BCE8 #A7ADE0 #96A0D8 #8694CF #7789C7 #6980BF

#CCCDF1 - #96A0D8 - #6980BF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CCCDF1 0%, #96A0D8 50%, #6980BF 100%);
    background: -webkit-linear-gradient(top, #CCCDF1 0%, #96A0D8 50%, #6980BF 100%);
    background: linear-gradient(to bottom, #CCCDF1 0%, #96A0D8 50%, #6980BF 100%);
}
</style>