#9ECDF5 - #417EC8 | 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 #9ECDF5 to #417EC8

#9ECDF5 #417EC8

Calculate the color between two colors, #9ECDF5 and #417EC8. 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)

#9ECDF5 - #417EC8 | 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 #9ECDF5 as 0% and #417EC8 as 100%.

0.0%	0.0% #9ECDF5	RGB 158 205 245	#9ECDF5
16.7%	16.7% #8EBFED	RGB 142 191 237	#8EBFED
33.3%	33.3% #7FB2E6	RGB 127 178 230	#7FB2E6
50.0%	50.0% #6FA5DE	RGB 111 165 222	#6FA5DE
66.7%	66.7% #6098D7	RGB 96 152 215	#6098D7
83.3%	83.3% #508BCF	RGB 80 139 207	#508BCF
100.0%	100.0% #417EC8	RGB 65 126 200	#417EC8

#9ECDF5 #8EBFED #7FB2E6 #6FA5DE #6098D7 #508BCF #417EC8

#9ECDF5 - #417EC8

HSV Blend

#9ECDF5 - #417EC8 | 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 #9ECDF5 as 0% and #417EC8 as 100%.

0.0%	0.0% #9ECDF5	RGB 158 205 245	#9ECDF5
16.7%	16.7% #8CBFED	RGB 140 191 237	#8CBFED
33.3%	33.3% #7BB2E6	RGB 123 178 230	#7BB2E6
50.0%	50.0% #6BA4DE	RGB 107 164 222	#6BA4DE
66.7%	66.7% #5C97D7	RGB 92 151 215	#5C97D7
83.3%	83.3% #4E8ACF	RGB 78 138 207	#4E8ACF
100.0%	100.0% #417EC8	RGB 65 126 200	#417EC8

#9ECDF5 #8CBFED #7BB2E6 #6BA4DE #5C97D7 #4E8ACF #417EC8

#9ECDF5 - #6BA4DE - #417EC8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #9ECDF5 0%, #6BA4DE 50%, #417EC8 100%);
    background: -webkit-linear-gradient(top, #9ECDF5 0%, #6BA4DE 50%, #417EC8 100%);
    background: linear-gradient(to bottom, #9ECDF5 0%, #6BA4DE 50%, #417EC8 100%);
}
</style>