#97C2FF - #376ED6 | 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 #97C2FF to #376ED6

#97C2FF #376ED6

Calculate the color between two colors, #97C2FF and #376ED6. 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)

#97C2FF - #376ED6 | 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 #97C2FF as 0% and #376ED6 as 100%.

0.0%	0.0% #97C2FF	RGB 151 194 255	#97C2FF
16.7%	16.7% #87B4F8	RGB 135 180 248	#87B4F8
33.3%	33.3% #77A6F1	RGB 119 166 241	#77A6F1
50.0%	50.0% #6798EA	RGB 103 152 234	#6798EA
66.7%	66.7% #578AE3	RGB 87 138 227	#578AE3
83.3%	83.3% #477CDC	RGB 71 124 220	#477CDC
100.0%	100.0% #376ED6	RGB 55 110 214	#376ED6

#97C2FF #87B4F8 #77A6F1 #6798EA #578AE3 #477CDC #376ED6

#97C2FF - #376ED6

HSV Blend

#97C2FF - #376ED6 | 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 #97C2FF as 0% and #376ED6 as 100%.

0.0%	0.0% #97C2FF	RGB 151 194 255	#97C2FF
16.7%	16.7% #85B3F8	RGB 133 179 248	#85B3F8
33.3%	33.3% #73A4F1	RGB 115 164 241	#73A4F1
50.0%	50.0% #6396EA	RGB 99 150 234	#6396EA
66.7%	66.7% #5388E3	RGB 83 136 227	#5388E3
83.3%	83.3% #457BDC	RGB 69 123 220	#457BDC
100.0%	100.0% #376ED6	RGB 55 110 214	#376ED6

#97C2FF #85B3F8 #73A4F1 #6396EA #5388E3 #457BDC #376ED6

#97C2FF - #6396EA - #376ED6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #97C2FF 0%, #6396EA 50%, #376ED6 100%);
    background: -webkit-linear-gradient(top, #97C2FF 0%, #6396EA 50%, #376ED6 100%);
    background: linear-gradient(to bottom, #97C2FF 0%, #6396EA 50%, #376ED6 100%);
}
</style>