#BABAF7 - #CCDEEE | 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 #BABAF7 to #CCDEEE

#BABAF7 #CCDEEE

Calculate the color between two colors, #BABAF7 and #CCDEEE. 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)

#BABAF7 - #CCDEEE | 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 #BABAF7 as 0% and #CCDEEE as 100%.

0.0%	0.0% #BABAF7	RGB 186 186 247	#BABAF7
16.7%	16.7% #BDC0F5	RGB 189 192 245	#BDC0F5
33.3%	33.3% #C0C6F4	RGB 192 198 244	#C0C6F4
50.0%	50.0% #C3CCF2	RGB 195 204 242	#C3CCF2
66.7%	66.7% #C6D2F1	RGB 198 210 241	#C6D2F1
83.3%	83.3% #C9D8EF	RGB 201 216 239	#C9D8EF
100.0%	100.0% #CCDEEE	RGB 204 222 238	#CCDEEE

#BABAF7 #BDC0F5 #C0C6F4 #C3CCF2 #C6D2F1 #C9D8EF #CCDEEE

#BABAF7 - #CCDEEE

HSV Blend

#BABAF7 - #CCDEEE | 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 #BABAF7 as 0% and #CCDEEE as 100%.

0.0%	0.0% #BABAF7	RGB 186 186 247	#BABAF7
16.7%	16.7% #BDC2F5	RGB 189 194 245	#BDC2F5
33.3%	33.3% #C0C9F4	RGB 192 201 244	#C0C9F4
50.0%	50.0% #C3CFF2	RGB 195 207 242	#C3CFF2
66.7%	66.7% #C6D5F1	RGB 198 213 241	#C6D5F1
83.3%	83.3% #C9DAEF	RGB 201 218 239	#C9DAEF
100.0%	100.0% #CCDEEE	RGB 204 222 238	#CCDEEE

#BABAF7 #BDC2F5 #C0C9F4 #C3CFF2 #C6D5F1 #C9DAEF #CCDEEE

#BABAF7 - #C3CFF2 - #CCDEEE

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BABAF7 0%, #C3CFF2 50%, #CCDEEE 100%);
    background: -webkit-linear-gradient(top, #BABAF7 0%, #C3CFF2 50%, #CCDEEE 100%);
    background: linear-gradient(to bottom, #BABAF7 0%, #C3CFF2 50%, #CCDEEE 100%);
}
</style>