#5E8CD6 - #AFCAE0 | 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 #5E8CD6 to #AFCAE0

#5E8CD6 #AFCAE0

Calculate the color between two colors, #5E8CD6 and #AFCAE0. 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)

#5E8CD6 - #AFCAE0 | 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 #5E8CD6 as 0% and #AFCAE0 as 100%.

0.0%	0.0% #5E8CD6	RGB 94 140 214	#5E8CD6
16.7%	16.7% #6B96D7	RGB 107 150 215	#6B96D7
33.3%	33.3% #79A0D9	RGB 121 160 217	#79A0D9
50.0%	50.0% #86ABDB	RGB 134 171 219	#86ABDB
66.7%	66.7% #94B5DC	RGB 148 181 220	#94B5DC
83.3%	83.3% #A1BFDE	RGB 161 191 222	#A1BFDE
100.0%	100.0% #AFCAE0	RGB 175 202 224	#AFCAE0

#5E8CD6 #6B96D7 #79A0D9 #86ABDB #94B5DC #A1BFDE #AFCAE0

#5E8CD6 - #AFCAE0

HSV Blend

#5E8CD6 - #AFCAE0 | 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 #5E8CD6 as 0% and #AFCAE0 as 100%.

0.0%	0.0% #5E8CD6	RGB 94 140 214	#5E8CD6
16.7%	16.7% #6B97D7	RGB 107 151 215	#6B97D7
33.3%	33.3% #78A2D9	RGB 120 162 217	#78A2D9
50.0%	50.0% #85ADDB	RGB 133 173 219	#85ADDB
66.7%	66.7% #93B7DC	RGB 147 183 220	#93B7DC
83.3%	83.3% #A1C1DE	RGB 161 193 222	#A1C1DE
100.0%	100.0% #AFCAE0	RGB 175 202 224	#AFCAE0

#5E8CD6 #6B97D7 #78A2D9 #85ADDB #93B7DC #A1C1DE #AFCAE0

#5E8CD6 - #85ADDB - #AFCAE0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5E8CD6 0%, #85ADDB 50%, #AFCAE0 100%);
    background: -webkit-linear-gradient(top, #5E8CD6 0%, #85ADDB 50%, #AFCAE0 100%);
    background: linear-gradient(to bottom, #5E8CD6 0%, #85ADDB 50%, #AFCAE0 100%);
}
</style>