#4D6EC2 - #9AB6DB | 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 #4D6EC2 to #9AB6DB

#4D6EC2 #9AB6DB

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

#4D6EC2 - #9AB6DB | 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 #4D6EC2 as 0% and #9AB6DB as 100%.

0.0%	0.0% #4D6EC2	RGB 77 110 194	#4D6EC2
16.7%	16.7% #597AC6	RGB 89 122 198	#597AC6
33.3%	33.3% #6686CA	RGB 102 134 202	#6686CA
50.0%	50.0% #7392CE	RGB 115 146 206	#7392CE
66.7%	66.7% #809ED2	RGB 128 158 210	#809ED2
83.3%	83.3% #8DAAD6	RGB 141 170 214	#8DAAD6
100.0%	100.0% #9AB6DB	RGB 154 182 219	#9AB6DB

#4D6EC2 #597AC6 #6686CA #7392CE #809ED2 #8DAAD6 #9AB6DB

#4D6EC2 - #9AB6DB

HSV Blend

#4D6EC2 - #9AB6DB | 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 #4D6EC2 as 0% and #9AB6DB as 100%.

0.0%	0.0% #4D6EC2	RGB 77 110 194	#4D6EC2
16.7%	16.7% #587AC6	RGB 88 122 198	#587AC6
33.3%	33.3% #6486CA	RGB 100 134 202	#6486CA
50.0%	50.0% #7192CE	RGB 113 146 206	#7192CE
66.7%	66.7% #7E9ED2	RGB 126 158 210	#7E9ED2
83.3%	83.3% #8CAAD6	RGB 140 170 214	#8CAAD6
100.0%	100.0% #9AB6DB	RGB 154 182 219	#9AB6DB

#4D6EC2 #587AC6 #6486CA #7192CE #7E9ED2 #8CAAD6 #9AB6DB

#4D6EC2 - #7192CE - #9AB6DB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4D6EC2 0%, #7192CE 50%, #9AB6DB 100%);
    background: -webkit-linear-gradient(top, #4D6EC2 0%, #7192CE 50%, #9AB6DB 100%);
    background: linear-gradient(to bottom, #4D6EC2 0%, #7192CE 50%, #9AB6DB 100%);
}
</style>