#5477B5 - #A0E4A8 | 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 #5477B5 to #A0E4A8

#5477B5 #A0E4A8

Calculate the color between two colors, #5477B5 and #A0E4A8. 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)

#5477B5 - #A0E4A8 | 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 #5477B5 as 0% and #A0E4A8 as 100%.

0.0%	0.0% #5477B5	RGB 84 119 181	#5477B5
16.7%	16.7% #6089B2	RGB 96 137 178	#6089B2
33.3%	33.3% #6D9BB0	RGB 109 155 176	#6D9BB0
50.0%	50.0% #7AADAE	RGB 122 173 174	#7AADAE
66.7%	66.7% #86BFAC	RGB 134 191 172	#86BFAC
83.3%	83.3% #93D1AA	RGB 147 209 170	#93D1AA
100.0%	100.0% #A0E4A8	RGB 160 228 168	#A0E4A8

#5477B5 #6089B2 #6D9BB0 #7AADAE #86BFAC #93D1AA #A0E4A8

#5477B5 - #A0E4A8

HSV Blend

#5477B5 - #A0E4A8 | 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 #5477B5 as 0% and #A0E4A8 as 100%.

0.0%	0.0% #5477B5	RGB 84 119 181	#5477B5
16.7%	16.7% #5F98BC	RGB 95 152 188	#5F98BC
33.3%	33.3% #6AB8C4	RGB 106 184 196	#6AB8C4
50.0%	50.0% #77CCC2	RGB 119 204 194	#77CCC2
66.7%	66.7% #84D4B6	RGB 132 212 182	#84D4B6
83.3%	83.3% #91DCAD	RGB 145 220 173	#91DCAD
100.0%	100.0% #A0E4A8	RGB 160 228 168	#A0E4A8

#5477B5 #5F98BC #6AB8C4 #77CCC2 #84D4B6 #91DCAD #A0E4A8

#5477B5 - #77CCC2 - #A0E4A8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5477B5 0%, #77CCC2 50%, #A0E4A8 100%);
    background: -webkit-linear-gradient(top, #5477B5 0%, #77CCC2 50%, #A0E4A8 100%);
    background: linear-gradient(to bottom, #5477B5 0%, #77CCC2 50%, #A0E4A8 100%);
}
</style>