#31A2E2 - #C5FFA8 | 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 #31A2E2 to #C5FFA8

#31A2E2 #C5FFA8

Calculate the color between two colors, #31A2E2 and #C5FFA8. 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)

#31A2E2 - #C5FFA8 | 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 #31A2E2 as 0% and #C5FFA8 as 100%.

0.0%	0.0% #31A2E2	RGB 49 162 226	#31A2E2
16.7%	16.7% #49B1D8	RGB 73 177 216	#49B1D8
33.3%	33.3% #62C1CE	RGB 98 193 206	#62C1CE
50.0%	50.0% #7BD0C5	RGB 123 208 197	#7BD0C5
66.7%	66.7% #93E0BB	RGB 147 224 187	#93E0BB
83.3%	83.3% #ACEFB1	RGB 172 239 177	#ACEFB1
100.0%	100.0% #C5FFA8	RGB 197 255 168	#C5FFA8

#31A2E2 #49B1D8 #62C1CE #7BD0C5 #93E0BB #ACEFB1 #C5FFA8

#31A2E2 - #C5FFA8

HSV Blend

#31A2E2 - #C5FFA8 | 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 #31A2E2 as 0% and #C5FFA8 as 100%.

0.0%	0.0% #31A2E2	RGB 49 162 226	#31A2E2
16.7%	16.7% #43D9E6	RGB 67 217 230	#43D9E6
33.3%	33.3% #55EBCD	RGB 85 235 205	#55EBCD
50.0%	50.0% #69F0AE	RGB 105 240 174	#69F0AE
66.7%	66.7% #7DF599	RGB 125 245 153	#7DF599
83.3%	83.3% #97FA92	RGB 151 250 146	#97FA92
100.0%	100.0% #C5FFA8	RGB 197 255 168	#C5FFA8

#31A2E2 #43D9E6 #55EBCD #69F0AE #7DF599 #97FA92 #C5FFA8

#31A2E2 - #69F0AE - #C5FFA8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #31A2E2 0%, #69F0AE 50%, #C5FFA8 100%);
    background: -webkit-linear-gradient(top, #31A2E2 0%, #69F0AE 50%, #C5FFA8 100%);
    background: linear-gradient(to bottom, #31A2E2 0%, #69F0AE 50%, #C5FFA8 100%);
}
</style>