#5E8CC4 - #BAC9D3 | 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 #5E8CC4 to #BAC9D3

#5E8CC4 #BAC9D3

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

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

0.0%	0.0% #5E8CC4	RGB 94 140 196	#5E8CC4
16.7%	16.7% #6D96C6	RGB 109 150 198	#6D96C6
33.3%	33.3% #7CA0C9	RGB 124 160 201	#7CA0C9
50.0%	50.0% #8CAACB	RGB 140 170 203	#8CAACB
66.7%	66.7% #9BB4CE	RGB 155 180 206	#9BB4CE
83.3%	83.3% #AABED0	RGB 170 190 208	#AABED0
100.0%	100.0% #BAC9D3	RGB 186 201 211	#BAC9D3

#5E8CC4 #6D96C6 #7CA0C9 #8CAACB #9BB4CE #AABED0 #BAC9D3

#5E8CC4 - #BAC9D3

HSV Blend

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

0.0%	0.0% #5E8CC4	RGB 94 140 196	#5E8CC4
16.7%	16.7% #6C97C6	RGB 108 151 198	#6C97C6
33.3%	33.3% #7BA2C9	RGB 123 162 201	#7BA2C9
50.0%	50.0% #8AACCB	RGB 138 172 203	#8AACCB
66.7%	66.7% #99B6CE	RGB 153 182 206	#99B6CE
83.3%	83.3% #A9C0D0	RGB 169 192 208	#A9C0D0
100.0%	100.0% #BAC9D3	RGB 186 201 211	#BAC9D3

#5E8CC4 #6C97C6 #7BA2C9 #8AACCB #99B6CE #A9C0D0 #BAC9D3

#5E8CC4 - #8AACCB - #BAC9D3

CSS codes

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

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