#00AFEC - #BDFFAF | 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 #00AFEC to #BDFFAF

#00AFEC #BDFFAF

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

#00AFEC - #BDFFAF | 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 #00AFEC as 0% and #BDFFAF as 100%.

0.0%	0.0% #00AFEC	RGB 0 175 236	#00AFEC
16.7%	16.7% #1FBCE1	RGB 31 188 225	#1FBCE1
33.3%	33.3% #3FC9D7	RGB 63 201 215	#3FC9D7
50.0%	50.0% #5ED7CD	RGB 94 215 205	#5ED7CD
66.7%	66.7% #7EE4C3	RGB 126 228 195	#7EE4C3
83.3%	83.3% #9DF1B9	RGB 157 241 185	#9DF1B9
100.0%	100.0% #BDFFAF	RGB 189 255 175	#BDFFAF

#00AFEC #1FBCE1 #3FC9D7 #5ED7CD #7EE4C3 #9DF1B9 #BDFFAF

#00AFEC - #BDFFAF

HSV Blend

#00AFEC - #BDFFAF | 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 #00AFEC as 0% and #BDFFAF as 100%.

0.0%	0.0% #00AFEC	RGB 0 175 236	#00AFEC
16.7%	16.7% #1BEBEF	RGB 27 235 239	#1BEBEF
33.3%	33.3% #37F2C9	RGB 55 242 201	#37F2C9
50.0%	50.0% #54F5AB	RGB 84 245 171	#54F5AB
66.7%	66.7% #71F89A	RGB 113 248 154	#71F89A
83.3%	83.3% #90FB96	RGB 144 251 150	#90FB96
100.0%	100.0% #BDFFAF	RGB 189 255 175	#BDFFAF

#00AFEC #1BEBEF #37F2C9 #54F5AB #71F89A #90FB96 #BDFFAF

#00AFEC - #54F5AB - #BDFFAF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #00AFEC 0%, #54F5AB 50%, #BDFFAF 100%);
    background: -webkit-linear-gradient(top, #00AFEC 0%, #54F5AB 50%, #BDFFAF 100%);
    background: linear-gradient(to bottom, #00AFEC 0%, #54F5AB 50%, #BDFFAF 100%);
}
</style>