#00AFE7 - #9BF5E5 | 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 #00AFE7 to #9BF5E5

#00AFE7 #9BF5E5

Calculate the color between two colors, #00AFE7 and #9BF5E5. 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)

#00AFE7 - #9BF5E5 | 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 #00AFE7 as 0% and #9BF5E5 as 100%.

0.0%	0.0% #00AFE7	RGB 0 175 231	#00AFE7
16.7%	16.7% #19BAE6	RGB 25 186 230	#19BAE6
33.3%	33.3% #33C6E6	RGB 51 198 230	#33C6E6
50.0%	50.0% #4DD2E6	RGB 77 210 230	#4DD2E6
66.7%	66.7% #67DDE5	RGB 103 221 229	#67DDE5
83.3%	83.3% #81E9E5	RGB 129 233 229	#81E9E5
100.0%	100.0% #9BF5E5	RGB 155 245 229	#9BF5E5

#00AFE7 #19BAE6 #33C6E6 #4DD2E6 #67DDE5 #81E9E5 #9BF5E5

#00AFE7 - #9BF5E5

HSV Blend

#00AFE7 - #9BF5E5 | 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 #00AFE7 as 0% and #9BF5E5 as 100%.

0.0%	0.0% #00AFE7	RGB 0 175 231	#00AFE7
16.7%	16.7% #18C5E9	RGB 24 197 233	#18C5E9
33.3%	33.3% #31D8EB	RGB 49 216 235	#31D8EB
50.0%	50.0% #4BE8EE	RGB 75 232 238	#4BE8EE
66.7%	66.7% #65F0EB	RGB 101 240 235	#65F0EB
83.3%	83.3% #7FF2E6	RGB 127 242 230	#7FF2E6
100.0%	100.0% #9BF5E5	RGB 155 245 229	#9BF5E5

#00AFE7 #18C5E9 #31D8EB #4BE8EE #65F0EB #7FF2E6 #9BF5E5

#00AFE7 - #4BE8EE - #9BF5E5

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #00AFE7 0%, #4BE8EE 50%, #9BF5E5 100%);
    background: -webkit-linear-gradient(top, #00AFE7 0%, #4BE8EE 50%, #9BF5E5 100%);
    background: linear-gradient(to bottom, #00AFE7 0%, #4BE8EE 50%, #9BF5E5 100%);
}
</style>