#678A8F - #313D44 | 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 #678A8F to #313D44

#678A8F #313D44

Calculate the color between two colors, #678A8F and #313D44. 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)

#678A8F - #313D44 | 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 #678A8F as 0% and #313D44 as 100%.

0.0%	0.0% #678A8F	RGB 103 138 143	#678A8F
16.7%	16.7% #5E7D82	RGB 94 125 130	#5E7D82
33.3%	33.3% #557076	RGB 85 112 118	#557076
50.0%	50.0% #4C6369	RGB 76 99 105	#4C6369
66.7%	66.7% #43565D	RGB 67 86 93	#43565D
83.3%	83.3% #3A4950	RGB 58 73 80	#3A4950
100.0%	100.0% #313D44	RGB 49 61 68	#313D44

#678A8F #5E7D82 #557076 #4C6369 #43565D #3A4950 #313D44

#678A8F - #313D44

HSV Blend

#678A8F - #313D44 | 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 #678A8F as 0% and #313D44 as 100%.

0.0%	0.0% #678A8F	RGB 103 138 143	#678A8F
16.7%	16.7% #5E7C82	RGB 94 124 130	#5E7C82
33.3%	33.3% #556F76	RGB 85 111 118	#556F76
50.0%	50.0% #4C6269	RGB 76 98 105	#4C6269
66.7%	66.7% #43555D	RGB 67 85 93	#43555D
83.3%	83.3% #3A4950	RGB 58 73 80	#3A4950
100.0%	100.0% #313D44	RGB 49 61 68	#313D44

#678A8F #5E7C82 #556F76 #4C6269 #43555D #3A4950 #313D44

#678A8F - #4C6269 - #313D44

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #678A8F 0%, #4C6269 50%, #313D44 100%);
    background: -webkit-linear-gradient(top, #678A8F 0%, #4C6269 50%, #313D44 100%);
    background: linear-gradient(to bottom, #678A8F 0%, #4C6269 50%, #313D44 100%);
}
</style>