#AFE7EC - #3ABDC8 | 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 #AFE7EC to #3ABDC8

#AFE7EC #3ABDC8

Calculate the color between two colors, #AFE7EC and #3ABDC8. 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)

#AFE7EC - #3ABDC8 | 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 #AFE7EC as 0% and #3ABDC8 as 100%.

0.0%	0.0% #AFE7EC	RGB 175 231 236	#AFE7EC
16.7%	16.7% #9BE0E6	RGB 155 224 230	#9BE0E6
33.3%	33.3% #88D9E0	RGB 136 217 224	#88D9E0
50.0%	50.0% #74D2DA	RGB 116 210 218	#74D2DA
66.7%	66.7% #61CBD4	RGB 97 203 212	#61CBD4
83.3%	83.3% #4DC4CE	RGB 77 196 206	#4DC4CE
100.0%	100.0% #3ABDC8	RGB 58 189 200	#3ABDC8

#AFE7EC #9BE0E6 #88D9E0 #74D2DA #61CBD4 #4DC4CE #3ABDC8

#AFE7EC - #3ABDC8

HSV Blend

#AFE7EC - #3ABDC8 | 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 #AFE7EC as 0% and #3ABDC8 as 100%.

0.0%	0.0% #AFE7EC	RGB 175 231 236	#AFE7EC
16.7%	16.7% #99DFE6	RGB 153 223 230	#99DFE6
33.3%	33.3% #84D8E0	RGB 132 216 224	#84D8E0
50.0%	50.0% #70D1DA	RGB 112 209 218	#70D1DA
66.7%	66.7% #5DCAD4	RGB 93 202 212	#5DCAD4
83.3%	83.3% #4BC3CE	RGB 75 195 206	#4BC3CE
100.0%	100.0% #3ABDC8	RGB 58 189 200	#3ABDC8

#AFE7EC #99DFE6 #84D8E0 #70D1DA #5DCAD4 #4BC3CE #3ABDC8

#AFE7EC - #70D1DA - #3ABDC8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #AFE7EC 0%, #70D1DA 50%, #3ABDC8 100%);
    background: -webkit-linear-gradient(top, #AFE7EC 0%, #70D1DA 50%, #3ABDC8 100%);
    background: linear-gradient(to bottom, #AFE7EC 0%, #70D1DA 50%, #3ABDC8 100%);
}
</style>