#4D7CCC - #CCD9F0 | 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 #4D7CCC to #CCD9F0

#4D7CCC #CCD9F0

Calculate the color between two colors, #4D7CCC and #CCD9F0. 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)

#4D7CCC - #CCD9F0 | 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 #4D7CCC as 0% and #CCD9F0 as 100%.

0.0%	0.0% #4D7CCC	RGB 77 124 204	#4D7CCC
16.7%	16.7% #628BD2	RGB 98 139 210	#628BD2
33.3%	33.3% #779BD8	RGB 119 155 216	#779BD8
50.0%	50.0% #8CAADE	RGB 140 170 222	#8CAADE
66.7%	66.7% #A1BAE4	RGB 161 186 228	#A1BAE4
83.3%	83.3% #B6C9EA	RGB 182 201 234	#B6C9EA
100.0%	100.0% #CCD9F0	RGB 204 217 240	#CCD9F0

#4D7CCC #628BD2 #779BD8 #8CAADE #A1BAE4 #B6C9EA #CCD9F0

#4D7CCC - #CCD9F0

HSV Blend

#4D7CCC - #CCD9F0 | 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 #4D7CCC as 0% and #CCD9F0 as 100%.

0.0%	0.0% #4D7BCC	RGB 77 123 204	#4D7BCC
16.7%	16.7% #5F89D2	RGB 95 137 210	#5F89D2
33.3%	33.3% #7398D8	RGB 115 152 216	#7398D8
50.0%	50.0% #88A7DE	RGB 136 167 222	#88A7DE
66.7%	66.7% #9DB7E4	RGB 157 183 228	#9DB7E4
83.3%	83.3% #B4C7EA	RGB 180 199 234	#B4C7EA
100.0%	100.0% #CCD9F0	RGB 204 217 240	#CCD9F0

#4D7BCC #5F89D2 #7398D8 #88A7DE #9DB7E4 #B4C7EA #CCD9F0

#4D7CCC - #88A7DE - #CCD9F0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4D7BCC 0%, #88A7DE 50%, #CCD9F0 100%);
    background: -webkit-linear-gradient(top, #4D7BCC 0%, #88A7DE 50%, #CCD9F0 100%);
    background: linear-gradient(to bottom, #4D7BCC 0%, #88A7DE 50%, #CCD9F0 100%);
}
</style>