#7F9EB6 - #2F556B | 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 #7F9EB6 to #2F556B

#7F9EB6 #2F556B

Calculate the color between two colors, #7F9EB6 and #2F556B. 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)

#7F9EB6 - #2F556B | 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 #7F9EB6 as 0% and #2F556B as 100%.

0.0%	0.0% #7F9EB6	RGB 127 158 182	#7F9EB6
16.7%	16.7% #7191A9	RGB 113 145 169	#7191A9
33.3%	33.3% #64859D	RGB 100 133 157	#64859D
50.0%	50.0% #577990	RGB 87 121 144	#577990
66.7%	66.7% #496D84	RGB 73 109 132	#496D84
83.3%	83.3% #3C6177	RGB 60 97 119	#3C6177
100.0%	100.0% #2F556B	RGB 47 85 107	#2F556B

#7F9EB6 #7191A9 #64859D #577990 #496D84 #3C6177 #2F556B

#7F9EB6 - #2F556B

HSV Blend

#7F9EB6 - #2F556B | 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 #7F9EB6 as 0% and #2F556B as 100%.

0.0%	0.0% #7F9EB6	RGB 127 158 182	#7F9EB6
16.7%	16.7% #6E90A9	RGB 110 144 169	#6E90A9
33.3%	33.3% #60839D	RGB 96 131 157	#60839D
50.0%	50.0% #527790	RGB 82 119 144	#527790
66.7%	66.7% #456B84	RGB 69 107 132	#456B84
83.3%	83.3% #396077	RGB 57 96 119	#396077
100.0%	100.0% #2F556B	RGB 47 85 107	#2F556B

#7F9EB6 #6E90A9 #60839D #527790 #456B84 #396077 #2F556B

#7F9EB6 - #527790 - #2F556B

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #7F9EB6 0%, #527790 50%, #2F556B 100%);
    background: -webkit-linear-gradient(top, #7F9EB6 0%, #527790 50%, #2F556B 100%);
    background: linear-gradient(to bottom, #7F9EB6 0%, #527790 50%, #2F556B 100%);
}
</style>