#A8C7E3 - #396BBB | 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 #A8C7E3 to #396BBB

#A8C7E3 #396BBB

Calculate the color between two colors, #A8C7E3 and #396BBB. 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)

#A8C7E3 - #396BBB | 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 #A8C7E3 as 0% and #396BBB as 100%.

0.0%	0.0% #A8C7E3	RGB 168 199 227	#A8C7E3
16.7%	16.7% #95B7DC	RGB 149 183 220	#95B7DC
33.3%	33.3% #83A8D5	RGB 131 168 213	#83A8D5
50.0%	50.0% #7099CF	RGB 112 153 207	#7099CF
66.7%	66.7% #5E89C8	RGB 94 137 200	#5E89C8
83.3%	83.3% #4B7AC1	RGB 75 122 193	#4B7AC1
100.0%	100.0% #396BBB	RGB 57 107 187	#396BBB

#A8C7E3 #95B7DC #83A8D5 #7099CF #5E89C8 #4B7AC1 #396BBB

#A8C7E3 - #396BBB

HSV Blend

#A8C7E3 - #396BBB | 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 #A8C7E3 as 0% and #396BBB as 100%.

0.0%	0.0% #A8C7E3	RGB 168 199 227	#A8C7E3
16.7%	16.7% #93B7DC	RGB 147 183 220	#93B7DC
33.3%	33.3% #7FA8D5	RGB 127 168 213	#7FA8D5
50.0%	50.0% #6C99CF	RGB 108 153 207	#6C99CF
66.7%	66.7% #5A89C8	RGB 90 137 200	#5A89C8
83.3%	83.3% #497AC1	RGB 73 122 193	#497AC1
100.0%	100.0% #396BBB	RGB 57 107 187	#396BBB

#A8C7E3 #93B7DC #7FA8D5 #6C99CF #5A89C8 #497AC1 #396BBB

#A8C7E3 - #6C99CF - #396BBB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #A8C7E3 0%, #6C99CF 50%, #396BBB 100%);
    background: -webkit-linear-gradient(top, #A8C7E3 0%, #6C99CF 50%, #396BBB 100%);
    background: linear-gradient(to bottom, #A8C7E3 0%, #6C99CF 50%, #396BBB 100%);
}
</style>