#4D6BBE - #CCD4EC | 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 #4D6BBE to #CCD4EC

#4D6BBE #CCD4EC

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

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

0.0%	0.0% #4D6BBE	RGB 77 107 190	#4D6BBE
16.7%	16.7% #627CC5	RGB 98 124 197	#627CC5
33.3%	33.3% #778ECD	RGB 119 142 205	#778ECD
50.0%	50.0% #8C9FD5	RGB 140 159 213	#8C9FD5
66.7%	66.7% #A1B1DC	RGB 161 177 220	#A1B1DC
83.3%	83.3% #B6C2E4	RGB 182 194 228	#B6C2E4
100.0%	100.0% #CCD4EC	RGB 204 212 236	#CCD4EC

#4D6BBE #627CC5 #778ECD #8C9FD5 #A1B1DC #B6C2E4 #CCD4EC

#4D6BBE - #CCD4EC

HSV Blend

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

0.0%	0.0% #4D6BBE	RGB 77 107 190	#4D6BBE
16.7%	16.7% #5F7AC5	RGB 95 122 197	#5F7AC5
33.3%	33.3% #728ACD	RGB 114 138 205	#728ACD
50.0%	50.0% #879BD5	RGB 135 155 213	#879BD5
66.7%	66.7% #9CADDC	RGB 156 173 220	#9CADDC
83.3%	83.3% #B3C0E4	RGB 179 192 228	#B3C0E4
100.0%	100.0% #CCD4EC	RGB 204 212 236	#CCD4EC

#4D6BBE #5F7AC5 #728ACD #879BD5 #9CADDC #B3C0E4 #CCD4EC

#4D6BBE - #879BD5 - #CCD4EC

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4D6BBE 0%, #879BD5 50%, #CCD4EC 100%);
    background: -webkit-linear-gradient(top, #4D6BBE 0%, #879BD5 50%, #CCD4EC 100%);
    background: linear-gradient(to bottom, #4D6BBE 0%, #879BD5 50%, #CCD4EC 100%);
}
</style>