#ABD9EC - #54A2B8 | 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 #ABD9EC to #54A2B8

#ABD9EC #54A2B8

Calculate the color between two colors, #ABD9EC and #54A2B8. 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)

#ABD9EC - #54A2B8 | 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 #ABD9EC as 0% and #54A2B8 as 100%.

0.0%	0.0% #ABD9EC	RGB 171 217 236	#ABD9EC
16.7%	16.7% #9CCFE3	RGB 156 207 227	#9CCFE3
33.3%	33.3% #8EC6DA	RGB 142 198 218	#8EC6DA
50.0%	50.0% #7FBDD2	RGB 127 189 210	#7FBDD2
66.7%	66.7% #71B4C9	RGB 113 180 201	#71B4C9
83.3%	83.3% #62ABC0	RGB 98 171 192	#62ABC0
100.0%	100.0% #54A2B8	RGB 84 162 184	#54A2B8

#ABD9EC #9CCFE3 #8EC6DA #7FBDD2 #71B4C9 #62ABC0 #54A2B8

#ABD9EC - #54A2B8

HSV Blend

#ABD9EC - #54A2B8 | 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 #ABD9EC as 0% and #54A2B8 as 100%.

0.0%	0.0% #ABD9EC	RGB 171 217 236	#ABD9EC
16.7%	16.7% #9ACEE3	RGB 154 206 227	#9ACEE3
33.3%	33.3% #8AC5DA	RGB 138 197 218	#8AC5DA
50.0%	50.0% #7CBBD2	RGB 124 187 210	#7CBBD2
66.7%	66.7% #6DB3C9	RGB 109 179 201	#6DB3C9
83.3%	83.3% #60AAC0	RGB 96 170 192	#60AAC0
100.0%	100.0% #54A2B8	RGB 84 162 184	#54A2B8

#ABD9EC #9ACEE3 #8AC5DA #7CBBD2 #6DB3C9 #60AAC0 #54A2B8

#ABD9EC - #7CBBD2 - #54A2B8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABD9EC 0%, #7CBBD2 50%, #54A2B8 100%);
    background: -webkit-linear-gradient(top, #ABD9EC 0%, #7CBBD2 50%, #54A2B8 100%);
    background: linear-gradient(to bottom, #ABD9EC 0%, #7CBBD2 50%, #54A2B8 100%);
}
</style>