#5A6971 - #7EB6E5 | 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 #5A6971 to #7EB6E5

#5A6971 #7EB6E5

Calculate the color between two colors, #5A6971 and #7EB6E5. 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)

#5A6971 - #7EB6E5 | 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 #5A6971 as 0% and #7EB6E5 as 100%.

0.0%	0.0% #5A6971	RGB 90 105 113	#5A6971
16.7%	16.7% #607584	RGB 96 117 132	#607584
33.3%	33.3% #668297	RGB 102 130 151	#668297
50.0%	50.0% #6C8FAB	RGB 108 143 171	#6C8FAB
66.7%	66.7% #729CBE	RGB 114 156 190	#729CBE
83.3%	83.3% #78A9D1	RGB 120 169 209	#78A9D1
100.0%	100.0% #7EB6E5	RGB 126 182 229	#7EB6E5

#5A6971 #607584 #668297 #6C8FAB #729CBE #78A9D1 #7EB6E5

#5A6971 - #7EB6E5

HSV Blend

#5A6971 - #7EB6E5 | 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 #5A6971 as 0% and #7EB6E5 as 100%.

0.0%	0.0% #5A6971	RGB 90 105 113	#5A6971
16.7%	16.7% #637884	RGB 99 120 132	#637884
33.3%	33.3% #6C8797	RGB 108 135 151	#6C8797
50.0%	50.0% #7394AB	RGB 115 148 171	#7394AB
66.7%	66.7% #78A0BE	RGB 120 160 190	#78A0BE
83.3%	83.3% #7BACD1	RGB 123 172 209	#7BACD1
100.0%	100.0% #7EB6E5	RGB 126 182 229	#7EB6E5

#5A6971 #637884 #6C8797 #7394AB #78A0BE #7BACD1 #7EB6E5

#5A6971 - #7394AB - #7EB6E5

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5A6971 0%, #7394AB 50%, #7EB6E5 100%);
    background: -webkit-linear-gradient(top, #5A6971 0%, #7394AB 50%, #7EB6E5 100%);
    background: linear-gradient(to bottom, #5A6971 0%, #7394AB 50%, #7EB6E5 100%);
}
</style>