#7E8EB6 - #284A68 | 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 #7E8EB6 to #284A68

#7E8EB6 #284A68

Calculate the color between two colors, #7E8EB6 and #284A68. 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)

#7E8EB6 - #284A68 | 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 #7E8EB6 as 0% and #284A68 as 100%.

0.0%	0.0% #7E8EB6	RGB 126 142 182	#7E8EB6
16.7%	16.7% #6F82A9	RGB 111 130 169	#6F82A9
33.3%	33.3% #61779C	RGB 97 119 156	#61779C
50.0%	50.0% #536C8F	RGB 83 108 143	#536C8F
66.7%	66.7% #446082	RGB 68 96 130	#446082
83.3%	83.3% #365575	RGB 54 85 117	#365575
100.0%	100.0% #284A68	RGB 40 74 104	#284A68

#7E8EB6 #6F82A9 #61779C #536C8F #446082 #365575 #284A68

#7E8EB6 - #284A68

HSV Blend

#7E8EB6 - #284A68 | 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 #7E8EB6 as 0% and #284A68 as 100%.

0.0%	0.0% #7E8DB6	RGB 126 141 182	#7E8DB6
16.7%	16.7% #6C80A9	RGB 108 128 169	#6C80A9
33.3%	33.3% #5C739C	RGB 92 115 156	#5C739C
50.0%	50.0% #4D678F	RGB 77 103 143	#4D678F
66.7%	66.7% #3F5D82	RGB 63 93 130	#3F5D82
83.3%	83.3% #335375	RGB 51 83 117	#335375
100.0%	100.0% #284A68	RGB 40 74 104	#284A68

#7E8DB6 #6C80A9 #5C739C #4D678F #3F5D82 #335375 #284A68

#7E8EB6 - #4D678F - #284A68

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #7E8DB6 0%, #4D678F 50%, #284A68 100%);
    background: -webkit-linear-gradient(top, #7E8DB6 0%, #4D678F 50%, #284A68 100%);
    background: linear-gradient(to bottom, #7E8DB6 0%, #4D678F 50%, #284A68 100%);
}
</style>