#9ECBFF - #3E7AD8 | 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 #9ECBFF to #3E7AD8

#9ECBFF #3E7AD8

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

#9ECBFF - #3E7AD8 | 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 #9ECBFF as 0% and #3E7AD8 as 100%.

0.0%	0.0% #9ECBFF	RGB 158 203 255	#9ECBFF
16.7%	16.7% #8EBDF8	RGB 142 189 248	#8EBDF8
33.3%	33.3% #7EB0F2	RGB 126 176 242	#7EB0F2
50.0%	50.0% #6EA2EB	RGB 110 162 235	#6EA2EB
66.7%	66.7% #5E95E5	RGB 94 149 229	#5E95E5
83.3%	83.3% #4E87DE	RGB 78 135 222	#4E87DE
100.0%	100.0% #3E7AD8	RGB 62 122 216	#3E7AD8

#9ECBFF #8EBDF8 #7EB0F2 #6EA2EB #5E95E5 #4E87DE #3E7AD8

#9ECBFF - #3E7AD8

HSV Blend

#9ECBFF - #3E7AD8 | 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 #9ECBFF as 0% and #3E7AD8 as 100%.

0.0%	0.0% #9ECBFF	RGB 158 203 255	#9ECBFF
16.7%	16.7% #8CBDF8	RGB 140 189 248	#8CBDF8
33.3%	33.3% #7BAFF2	RGB 123 175 242	#7BAFF2
50.0%	50.0% #6AA1EB	RGB 106 161 235	#6AA1EB
66.7%	66.7% #5B94E5	RGB 91 148 229	#5B94E5
83.3%	83.3% #4C87DE	RGB 76 135 222	#4C87DE
100.0%	100.0% #3E7AD8	RGB 62 122 216	#3E7AD8

#9ECBFF #8CBDF8 #7BAFF2 #6AA1EB #5B94E5 #4C87DE #3E7AD8

#9ECBFF - #6AA1EB - #3E7AD8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #9ECBFF 0%, #6AA1EB 50%, #3E7AD8 100%);
    background: -webkit-linear-gradient(top, #9ECBFF 0%, #6AA1EB 50%, #3E7AD8 100%);
    background: linear-gradient(to bottom, #9ECBFF 0%, #6AA1EB 50%, #3E7AD8 100%);
}
</style>