#ABC5E1 - #5176A9 | 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 #ABC5E1 to #5176A9

#ABC5E1 #5176A9

Calculate the color between two colors, #ABC5E1 and #5176A9. 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)

#ABC5E1 - #5176A9 | 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 #ABC5E1 as 0% and #5176A9 as 100%.

0.0%	0.0% #ABC5E1	RGB 171 197 225	#ABC5E1
16.7%	16.7% #9CB7D7	RGB 156 183 215	#9CB7D7
33.3%	33.3% #8DAACE	RGB 141 170 206	#8DAACE
50.0%	50.0% #7E9DC5	RGB 126 157 197	#7E9DC5
66.7%	66.7% #6F90BB	RGB 111 144 187	#6F90BB
83.3%	83.3% #6083B2	RGB 96 131 178	#6083B2
100.0%	100.0% #5176A9	RGB 81 118 169	#5176A9

#ABC5E1 #9CB7D7 #8DAACE #7E9DC5 #6F90BB #6083B2 #5176A9

#ABC5E1 - #5176A9

HSV Blend

#ABC5E1 - #5176A9 | 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 #ABC5E1 as 0% and #5176A9 as 100%.

0.0%	0.0% #ABC5E1	RGB 171 197 225	#ABC5E1
16.7%	16.7% #99B6D7	RGB 153 182 215	#99B6D7
33.3%	33.3% #89A9CE	RGB 137 169 206	#89A9CE
50.0%	50.0% #7A9BC5	RGB 122 155 197	#7A9BC5
66.7%	66.7% #6B8EBB	RGB 107 142 187	#6B8EBB
83.3%	83.3% #5D82B2	RGB 93 130 178	#5D82B2
100.0%	100.0% #5176A9	RGB 81 118 169	#5176A9

#ABC5E1 #99B6D7 #89A9CE #7A9BC5 #6B8EBB #5D82B2 #5176A9

#ABC5E1 - #7A9BC5 - #5176A9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABC5E1 0%, #7A9BC5 50%, #5176A9 100%);
    background: -webkit-linear-gradient(top, #ABC5E1 0%, #7A9BC5 50%, #5176A9 100%);
    background: linear-gradient(to bottom, #ABC5E1 0%, #7A9BC5 50%, #5176A9 100%);
}
</style>