#CCD9E3 - #778FAB | 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 #CCD9E3 to #778FAB

#CCD9E3 #778FAB

Calculate the color between two colors, #CCD9E3 and #778FAB. 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)

#CCD9E3 - #778FAB | 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 #CCD9E3 as 0% and #778FAB as 100%.

0.0%	0.0% #CCD9E3	RGB 204 217 227	#CCD9E3
16.7%	16.7% #BDCCD9	RGB 189 204 217	#BDCCD9
33.3%	33.3% #AFC0D0	RGB 175 192 208	#AFC0D0
50.0%	50.0% #A1B4C7	RGB 161 180 199	#A1B4C7
66.7%	66.7% #93A7BD	RGB 147 167 189	#93A7BD
83.3%	83.3% #859BB4	RGB 133 155 180	#859BB4
100.0%	100.0% #778FAB	RGB 119 143 171	#778FAB

#CCD9E3 #BDCCD9 #AFC0D0 #A1B4C7 #93A7BD #859BB4 #778FAB

#CCD9E3 - #778FAB

HSV Blend

#CCD9E3 - #778FAB | 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 #CCD9E3 as 0% and #778FAB as 100%.

0.0%	0.0% #CCD9E3	RGB 204 217 227	#CCD9E3
16.7%	16.7% #BCCCD9	RGB 188 204 217	#BCCCD9
33.3%	33.3% #ADBFD0	RGB 173 191 208	#ADBFD0
50.0%	50.0% #9EB3C7	RGB 158 179 199	#9EB3C7
66.7%	66.7% #90A7BD	RGB 144 167 189	#90A7BD
83.3%	83.3% #839AB4	RGB 131 154 180	#839AB4
100.0%	100.0% #778FAB	RGB 119 143 171	#778FAB

#CCD9E3 #BCCCD9 #ADBFD0 #9EB3C7 #90A7BD #839AB4 #778FAB

#CCD9E3 - #9EB3C7 - #778FAB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CCD9E3 0%, #9EB3C7 50%, #778FAB 100%);
    background: -webkit-linear-gradient(top, #CCD9E3 0%, #9EB3C7 50%, #778FAB 100%);
    background: linear-gradient(to bottom, #CCD9E3 0%, #9EB3C7 50%, #778FAB 100%);
}
</style>