#3E6CB3 - #97B7D3 | 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 #3E6CB3 to #97B7D3

#3E6CB3 #97B7D3

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

#3E6CB3 - #97B7D3 | 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 #3E6CB3 as 0% and #97B7D3 as 100%.

0.0%	0.0% #3E6CB3	RGB 62 108 179	#3E6CB3
16.7%	16.7% #4C78B8	RGB 76 120 184	#4C78B8
33.3%	33.3% #5B85BD	RGB 91 133 189	#5B85BD
50.0%	50.0% #6A91C3	RGB 106 145 195	#6A91C3
66.7%	66.7% #799EC8	RGB 121 158 200	#799EC8
83.3%	83.3% #88AACD	RGB 136 170 205	#88AACD
100.0%	100.0% #97B7D3	RGB 151 183 211	#97B7D3

#3E6CB3 #4C78B8 #5B85BD #6A91C3 #799EC8 #88AACD #97B7D3

#3E6CB3 - #97B7D3

HSV Blend

#3E6CB3 - #97B7D3 | 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 #3E6CB3 as 0% and #97B7D3 as 100%.

0.0%	0.0% #3E6CB3	RGB 62 108 179	#3E6CB3
16.7%	16.7% #4B78B8	RGB 75 120 184	#4B78B8
33.3%	33.3% #5985BD	RGB 89 133 189	#5985BD
50.0%	50.0% #6791C3	RGB 103 145 195	#6791C3
66.7%	66.7% #769EC8	RGB 118 158 200	#769EC8
83.3%	83.3% #86AACD	RGB 134 170 205	#86AACD
100.0%	100.0% #97B7D3	RGB 151 183 211	#97B7D3

#3E6CB3 #4B78B8 #5985BD #6791C3 #769EC8 #86AACD #97B7D3

#3E6CB3 - #6791C3 - #97B7D3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3E6CB3 0%, #6791C3 50%, #97B7D3 100%);
    background: -webkit-linear-gradient(top, #3E6CB3 0%, #6791C3 50%, #97B7D3 100%);
    background: linear-gradient(to bottom, #3E6CB3 0%, #6791C3 50%, #97B7D3 100%);
}
</style>