#78A8C2 - #31597D | 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 #78A8C2 to #31597D

#78A8C2 #31597D

Calculate the color between two colors, #78A8C2 and #31597D. 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)

#78A8C2 - #31597D | 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 #78A8C2 as 0% and #31597D as 100%.

0.0%	0.0% #78A8C2	RGB 120 168 194	#78A8C2
16.7%	16.7% #6C9AB6	RGB 108 154 182	#6C9AB6
33.3%	33.3% #608DAB	RGB 96 141 171	#608DAB
50.0%	50.0% #54809F	RGB 84 128 159	#54809F
66.7%	66.7% #487394	RGB 72 115 148	#487394
83.3%	83.3% #3C6688	RGB 60 102 136	#3C6688
100.0%	100.0% #31597D	RGB 49 89 125	#31597D

#78A8C2 #6C9AB6 #608DAB #54809F #487394 #3C6688 #31597D

#78A8C2 - #31597D

HSV Blend

#78A8C2 - #31597D | 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 #78A8C2 as 0% and #31597D as 100%.

0.0%	0.0% #78A8C2	RGB 120 168 194	#78A8C2
16.7%	16.7% #699AB6	RGB 105 154 182	#699AB6
33.3%	33.3% #5C8CAB	RGB 92 140 171	#5C8CAB
50.0%	50.0% #507E9F	RGB 80 126 159	#507E9F
66.7%	66.7% #457194	RGB 69 113 148	#457194
83.3%	83.3% #3A6588	RGB 58 101 136	#3A6588
100.0%	100.0% #31597D	RGB 49 89 125	#31597D

#78A8C2 #699AB6 #5C8CAB #507E9F #457194 #3A6588 #31597D

#78A8C2 - #507E9F - #31597D

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #78A8C2 0%, #507E9F 50%, #31597D 100%);
    background: -webkit-linear-gradient(top, #78A8C2 0%, #507E9F 50%, #31597D 100%);
    background: linear-gradient(to bottom, #78A8C2 0%, #507E9F 50%, #31597D 100%);
}
</style>