#838EB6 - #31436B | 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 #838EB6 to #31436B

#838EB6 #31436B

Calculate the color between two colors, #838EB6 and #31436B. 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)

#838EB6 - #31436B | 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 #838EB6 as 0% and #31436B as 100%.

0.0%	0.0% #838EB6	RGB 131 142 182	#838EB6
16.7%	16.7% #7581A9	RGB 117 129 169	#7581A9
33.3%	33.3% #67759D	RGB 103 117 157	#67759D
50.0%	50.0% #5A6890	RGB 90 104 144	#5A6890
66.7%	66.7% #4C5C84	RGB 76 92 132	#4C5C84
83.3%	83.3% #3E4F77	RGB 62 79 119	#3E4F77
100.0%	100.0% #31436B	RGB 49 67 107	#31436B

#838EB6 #7581A9 #67759D #5A6890 #4C5C84 #3E4F77 #31436B

#838EB6 - #31436B

HSV Blend

#838EB6 - #31436B | 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 #838EB6 as 0% and #31436B as 100%.

0.0%	0.0% #838EB6	RGB 131 142 182	#838EB6
16.7%	16.7% #727FA9	RGB 114 127 169	#727FA9
33.3%	33.3% #63719D	RGB 99 113 157	#63719D
50.0%	50.0% #556490	RGB 85 100 144	#556490
66.7%	66.7% #475884	RGB 71 88 132	#475884
83.3%	83.3% #3B4D77	RGB 59 77 119	#3B4D77
100.0%	100.0% #31436B	RGB 49 67 107	#31436B

#838EB6 #727FA9 #63719D #556490 #475884 #3B4D77 #31436B

#838EB6 - #556490 - #31436B

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #838EB6 0%, #556490 50%, #31436B 100%);
    background: -webkit-linear-gradient(top, #838EB6 0%, #556490 50%, #31436B 100%);
    background: linear-gradient(to bottom, #838EB6 0%, #556490 50%, #31436B 100%);
}
</style>