#4D7ECE - #CCDAF1 | 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 #4D7ECE to #CCDAF1

#4D7ECE #CCDAF1

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

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

0.0%	0.0% #4D7ECE	RGB 77 126 206	#4D7ECE
16.7%	16.7% #628DD3	RGB 98 141 211	#628DD3
33.3%	33.3% #779CD9	RGB 119 156 217	#779CD9
50.0%	50.0% #8CACDF	RGB 140 172 223	#8CACDF
66.7%	66.7% #A1BBE5	RGB 161 187 229	#A1BBE5
83.3%	83.3% #B6CAEB	RGB 182 202 235	#B6CAEB
100.0%	100.0% #CCDAF1	RGB 204 218 241	#CCDAF1

#4D7ECE #628DD3 #779CD9 #8CACDF #A1BBE5 #B6CAEB #CCDAF1

#4D7ECE - #CCDAF1

HSV Blend

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

0.0%	0.0% #4D7ECE	RGB 77 126 206	#4D7ECE
16.7%	16.7% #5F8BD3	RGB 95 139 211	#5F8BD3
33.3%	33.3% #739AD9	RGB 115 154 217	#739AD9
50.0%	50.0% #88A9DF	RGB 136 169 223	#88A9DF
66.7%	66.7% #9DB9E5	RGB 157 185 229	#9DB9E5
83.3%	83.3% #B4C9EB	RGB 180 201 235	#B4C9EB
100.0%	100.0% #CCDAF1	RGB 204 218 241	#CCDAF1

#4D7ECE #5F8BD3 #739AD9 #88A9DF #9DB9E5 #B4C9EB #CCDAF1

#4D7ECE - #88A9DF - #CCDAF1

CSS codes

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

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