#8CCAF2 - #337CC4 | 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 #8CCAF2 to #337CC4

#8CCAF2 #337CC4

Calculate the color between two colors, #8CCAF2 and #337CC4. 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)

#8CCAF2 - #337CC4 | 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 #8CCAF2 as 0% and #337CC4 as 100%.

0.0%	0.0% #8CCAF2	RGB 140 202 242	#8CCAF2
16.7%	16.7% #7DBDEA	RGB 125 189 234	#7DBDEA
33.3%	33.3% #6EB0E2	RGB 110 176 226	#6EB0E2
50.0%	50.0% #5FA3DB	RGB 95 163 219	#5FA3DB
66.7%	66.7% #5096D3	RGB 80 150 211	#5096D3
83.3%	83.3% #4189CB	RGB 65 137 203	#4189CB
100.0%	100.0% #337CC4	RGB 51 124 196	#337CC4

#8CCAF2 #7DBDEA #6EB0E2 #5FA3DB #5096D3 #4189CB #337CC4

#8CCAF2 - #337CC4

HSV Blend

#8CCAF2 - #337CC4 | 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 #8CCAF2 as 0% and #337CC4 as 100%.

0.0%	0.0% #8CCAF2	RGB 140 202 242	#8CCAF2
16.7%	16.7% #7BBCEA	RGB 123 188 234	#7BBCEA
33.3%	33.3% #6BAFE2	RGB 107 175 226	#6BAFE2
50.0%	50.0% #5BA2DB	RGB 91 162 219	#5BA2DB
66.7%	66.7% #4D95D3	RGB 77 149 211	#4D95D3
83.3%	83.3% #3F88CB	RGB 63 136 203	#3F88CB
100.0%	100.0% #337CC4	RGB 51 124 196	#337CC4

#8CCAF2 #7BBCEA #6BAFE2 #5BA2DB #4D95D3 #3F88CB #337CC4

#8CCAF2 - #5BA2DB - #337CC4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #8CCAF2 0%, #5BA2DB 50%, #337CC4 100%);
    background: -webkit-linear-gradient(top, #8CCAF2 0%, #5BA2DB 50%, #337CC4 100%);
    background: linear-gradient(to bottom, #8CCAF2 0%, #5BA2DB 50%, #337CC4 100%);
}
</style>