#3E6EB8 - #97B9D6 | 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 #3E6EB8 to #97B9D6

#3E6EB8 #97B9D6

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

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

0.0%	0.0% #3E6EB8	RGB 62 110 184	#3E6EB8
16.7%	16.7% #4C7ABD	RGB 76 122 189	#4C7ABD
33.3%	33.3% #5B87C2	RGB 91 135 194	#5B87C2
50.0%	50.0% #6A93C7	RGB 106 147 199	#6A93C7
66.7%	66.7% #79A0CC	RGB 121 160 204	#79A0CC
83.3%	83.3% #88ACD1	RGB 136 172 209	#88ACD1
100.0%	100.0% #97B9D6	RGB 151 185 214	#97B9D6

#3E6EB8 #4C7ABD #5B87C2 #6A93C7 #79A0CC #88ACD1 #97B9D6

#3E6EB8 - #97B9D6

HSV Blend

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

0.0%	0.0% #3E6EB8	RGB 62 110 184	#3E6EB8
16.7%	16.7% #4B7ABD	RGB 75 122 189	#4B7ABD
33.3%	33.3% #5987C2	RGB 89 135 194	#5987C2
50.0%	50.0% #6794C7	RGB 103 148 199	#6794C7
66.7%	66.7% #76A0CC	RGB 118 160 204	#76A0CC
83.3%	83.3% #86ACD1	RGB 134 172 209	#86ACD1
100.0%	100.0% #97B9D6	RGB 151 185 214	#97B9D6

#3E6EB8 #4B7ABD #5987C2 #6794C7 #76A0CC #86ACD1 #97B9D6

#3E6EB8 - #6794C7 - #97B9D6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3E6EB8 0%, #6794C7 50%, #97B9D6 100%);
    background: -webkit-linear-gradient(top, #3E6EB8 0%, #6794C7 50%, #97B9D6 100%);
    background: linear-gradient(to bottom, #3E6EB8 0%, #6794C7 50%, #97B9D6 100%);
}
</style>