#A8CCE2 - #507EAB | 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 #A8CCE2 to #507EAB

#A8CCE2 #507EAB

Calculate the color between two colors, #A8CCE2 and #507EAB. 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)

#A8CCE2 - #507EAB | 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 #A8CCE2 as 0% and #507EAB as 100%.

0.0%	0.0% #A8CCE2	RGB 168 204 226	#A8CCE2
16.7%	16.7% #99BFD8	RGB 153 191 216	#99BFD8
33.3%	33.3% #8AB2CF	RGB 138 178 207	#8AB2CF
50.0%	50.0% #7CA5C6	RGB 124 165 198	#7CA5C6
66.7%	66.7% #6D98BD	RGB 109 152 189	#6D98BD
83.3%	83.3% #5E8BB4	RGB 94 139 180	#5E8BB4
100.0%	100.0% #507EAB	RGB 80 126 171	#507EAB

#A8CCE2 #99BFD8 #8AB2CF #7CA5C6 #6D98BD #5E8BB4 #507EAB

#A8CCE2 - #507EAB

HSV Blend

#A8CCE2 - #507EAB | 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 #A8CCE2 as 0% and #507EAB as 100%.

0.0%	0.0% #A8CCE2	RGB 168 204 226	#A8CCE2
16.7%	16.7% #97BED8	RGB 151 190 216	#97BED8
33.3%	33.3% #87B1CF	RGB 135 177 207	#87B1CF
50.0%	50.0% #78A4C6	RGB 120 164 198	#78A4C6
66.7%	66.7% #6997BD	RGB 105 151 189	#6997BD
83.3%	83.3% #5C8AB4	RGB 92 138 180	#5C8AB4
100.0%	100.0% #507EAB	RGB 80 126 171	#507EAB

#A8CCE2 #97BED8 #87B1CF #78A4C6 #6997BD #5C8AB4 #507EAB

#A8CCE2 - #78A4C6 - #507EAB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #A8CCE2 0%, #78A4C6 50%, #507EAB 100%);
    background: -webkit-linear-gradient(top, #A8CCE2 0%, #78A4C6 50%, #507EAB 100%);
    background: linear-gradient(to bottom, #A8CCE2 0%, #78A4C6 50%, #507EAB 100%);
}
</style>