#3E7FA2 - #B3C6C2 | 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 #3E7FA2 to #B3C6C2

#3E7FA2 #B3C6C2

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

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

0.0%	0.0% #3E7FA2	RGB 62 127 162	#3E7FA2
16.7%	16.7% #518AA7	RGB 81 138 167	#518AA7
33.3%	33.3% #6596AC	RGB 101 150 172	#6596AC
50.0%	50.0% #78A2B2	RGB 120 162 178	#78A2B2
66.7%	66.7% #8CAEB7	RGB 140 174 183	#8CAEB7
83.3%	83.3% #9FBABC	RGB 159 186 188	#9FBABC
100.0%	100.0% #B3C6C2	RGB 179 198 194	#B3C6C2

#3E7FA2 #518AA7 #6596AC #78A2B2 #8CAEB7 #9FBABC #B3C6C2

#3E7FA2 - #B3C6C2

HSV Blend

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

0.0%	0.0% #3E7FA2	RGB 62 127 162	#3E7FA2
16.7%	16.7% #4E91A8	RGB 78 145 168	#4E91A8
33.3%	33.3% #60A1AE	RGB 96 161 174	#60A1AE
50.0%	50.0% #73AFB4	RGB 115 175 180	#73AFB4
66.7%	66.7% #87BAB8	RGB 135 186 184	#87BAB8
83.3%	83.3% #9CC0BB	RGB 156 192 187	#9CC0BB
100.0%	100.0% #B3C6C2	RGB 179 198 194	#B3C6C2

#3E7FA2 #4E91A8 #60A1AE #73AFB4 #87BAB8 #9CC0BB #B3C6C2

#3E7FA2 - #73AFB4 - #B3C6C2

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3E7FA2 0%, #73AFB4 50%, #B3C6C2 100%);
    background: -webkit-linear-gradient(top, #3E7FA2 0%, #73AFB4 50%, #B3C6C2 100%);
    background: linear-gradient(to bottom, #3E7FA2 0%, #73AFB4 50%, #B3C6C2 100%);
}
</style>