#486EA8 - #A8DDB4 | 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 #486EA8 to #A8DDB4

#486EA8 #A8DDB4

Calculate the color between two colors, #486EA8 and #A8DDB4. 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)

#486EA8 - #A8DDB4 | 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 #486EA8 as 0% and #A8DDB4 as 100%.

0.0%	0.0% #486EA8	RGB 72 110 168	#486EA8
16.7%	16.7% #5880AA	RGB 88 128 170	#5880AA
33.3%	33.3% #6893AC	RGB 104 147 172	#6893AC
50.0%	50.0% #78A5AE	RGB 120 165 174	#78A5AE
66.7%	66.7% #88B8B0	RGB 136 184 176	#88B8B0
83.3%	83.3% #98CAB2	RGB 152 202 178	#98CAB2
100.0%	100.0% #A8DDB4	RGB 168 221 180	#A8DDB4

#486EA8 #5880AA #6893AC #78A5AE #88B8B0 #98CAB2 #A8DDB4

#486EA8 - #A8DDB4

HSV Blend

#486EA8 - #A8DDB4 | 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 #486EA8 as 0% and #A8DDB4 as 100%.

0.0%	0.0% #486EA8	RGB 72 110 168	#486EA8
16.7%	16.7% #558EB0	RGB 85 142 176	#558EB0
33.3%	33.3% #64ADB9	RGB 100 173 185	#64ADB9
50.0%	50.0% #73C2BB	RGB 115 194 187	#73C2BB
66.7%	66.7% #84CBB4	RGB 132 203 180	#84CBB4
83.3%	83.3% #95D4B2	RGB 149 212 178	#95D4B2
100.0%	100.0% #A8DDB4	RGB 168 221 180	#A8DDB4

#486EA8 #558EB0 #64ADB9 #73C2BB #84CBB4 #95D4B2 #A8DDB4

#486EA8 - #73C2BB - #A8DDB4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #486EA8 0%, #73C2BB 50%, #A8DDB4 100%);
    background: -webkit-linear-gradient(top, #486EA8 0%, #73C2BB 50%, #A8DDB4 100%);
    background: linear-gradient(to bottom, #486EA8 0%, #73C2BB 50%, #A8DDB4 100%);
}
</style>