#31B7E2 - #076BA8 | 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 #31B7E2 to #076BA8

#31B7E2 #076BA8

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

#31B7E2 - #076BA8 | 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 #31B7E2 as 0% and #076BA8 as 100%.

0.0%	0.0% #31B7E2	RGB 49 183 226	#31B7E2
16.7%	16.7% #2AAAD8	RGB 42 170 216	#2AAAD8
33.3%	33.3% #239DCE	RGB 35 157 206	#239DCE
50.0%	50.0% #1C91C5	RGB 28 145 197	#1C91C5
66.7%	66.7% #1584BB	RGB 21 132 187	#1584BB
83.3%	83.3% #0E77B1	RGB 14 119 177	#0E77B1
100.0%	100.0% #076BA8	RGB 7 107 168	#076BA8

#31B7E2 #2AAAD8 #239DCE #1C91C5 #1584BB #0E77B1 #076BA8

#31B7E2 - #076BA8

HSV Blend

#31B7E2 - #076BA8 | 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 #31B7E2 as 0% and #076BA8 as 100%.

0.0%	0.0% #31B6E2	RGB 49 182 226	#31B6E2
16.7%	16.7% #28A9D8	RGB 40 169 216	#28A9D8
33.3%	33.3% #209CCE	RGB 32 156 206	#209CCE
50.0%	50.0% #198FC5	RGB 25 143 197	#198FC5
66.7%	66.7% #1283BB	RGB 18 131 187	#1283BB
83.3%	83.3% #0C76B1	RGB 12 118 177	#0C76B1
100.0%	100.0% #076BA8	RGB 7 107 168	#076BA8

#31B6E2 #28A9D8 #209CCE #198FC5 #1283BB #0C76B1 #076BA8

#31B7E2 - #198FC5 - #076BA8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #31B6E2 0%, #198FC5 50%, #076BA8 100%);
    background: -webkit-linear-gradient(top, #31B6E2 0%, #198FC5 50%, #076BA8 100%);
    background: linear-gradient(to bottom, #31B6E2 0%, #198FC5 50%, #076BA8 100%);
}
</style>