#5E9CD6 - #BDD3DC | 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 #5E9CD6 to #BDD3DC

#5E9CD6 #BDD3DC

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

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

0.0%	0.0% #5E9CD6	RGB 94 156 214	#5E9CD6
16.7%	16.7% #6DA5D7	RGB 109 165 215	#6DA5D7
33.3%	33.3% #7DAED8	RGB 125 174 216	#7DAED8
50.0%	50.0% #8DB7D9	RGB 141 183 217	#8DB7D9
66.7%	66.7% #9DC0DA	RGB 157 192 218	#9DC0DA
83.3%	83.3% #ADC9DB	RGB 173 201 219	#ADC9DB
100.0%	100.0% #BDD3DC	RGB 189 211 220	#BDD3DC

#5E9CD6 #6DA5D7 #7DAED8 #8DB7D9 #9DC0DA #ADC9DB #BDD3DC

#5E9CD6 - #BDD3DC

HSV Blend

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

0.0%	0.0% #5E9CD6	RGB 94 156 214	#5E9CD6
16.7%	16.7% #6DA7D7	RGB 109 167 215	#6DA7D7
33.3%	33.3% #7DB1D8	RGB 125 177 216	#7DB1D8
50.0%	50.0% #8CBBD9	RGB 140 187 217	#8CBBD9
66.7%	66.7% #9CC4DA	RGB 156 196 218	#9CC4DA
83.3%	83.3% #ACCCDB	RGB 172 204 219	#ACCCDB
100.0%	100.0% #BDD3DC	RGB 189 211 220	#BDD3DC

#5E9CD6 #6DA7D7 #7DB1D8 #8CBBD9 #9CC4DA #ACCCDB #BDD3DC

#5E9CD6 - #8CBBD9 - #BDD3DC

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5E9CD6 0%, #8CBBD9 50%, #BDD3DC 100%);
    background: -webkit-linear-gradient(top, #5E9CD6 0%, #8CBBD9 50%, #BDD3DC 100%);
    background: linear-gradient(to bottom, #5E9CD6 0%, #8CBBD9 50%, #BDD3DC 100%);
}
</style>