#3A4F5E - #5D9CCE | 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 #3A4F5E to #5D9CCE

#3A4F5E #5D9CCE

Calculate the color between two colors, #3A4F5E and #5D9CCE. 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)

#3A4F5E - #5D9CCE | 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 #3A4F5E as 0% and #5D9CCE as 100%.

0.0%	0.0% #3A4F5E	RGB 58 79 94	#3A4F5E
16.7%	16.7% #3F5B70	RGB 63 91 112	#3F5B70
33.3%	33.3% #456883	RGB 69 104 131	#456883
50.0%	50.0% #4B7596	RGB 75 117 150	#4B7596
66.7%	66.7% #5182A8	RGB 81 130 168	#5182A8
83.3%	83.3% #578FBB	RGB 87 143 187	#578FBB
100.0%	100.0% #5D9CCE	RGB 93 156 206	#5D9CCE

#3A4F5E #3F5B70 #456883 #4B7596 #5182A8 #578FBB #5D9CCE

#3A4F5E - #5D9CCE

HSV Blend

#3A4F5E - #5D9CCE | 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 #3A4F5E as 0% and #5D9CCE as 100%.

0.0%	0.0% #3A4F5E	RGB 58 79 94	#3A4F5E
16.7%	16.7% #425D70	RGB 66 93 112	#425D70
33.3%	33.3% #496A83	RGB 73 106 131	#496A83
50.0%	50.0% #507796	RGB 80 119 150	#507796
66.7%	66.7% #5584A8	RGB 85 132 168	#5584A8
83.3%	83.3% #5990BB	RGB 89 144 187	#5990BB
100.0%	100.0% #5D9CCE	RGB 93 156 206	#5D9CCE

#3A4F5E #425D70 #496A83 #507796 #5584A8 #5990BB #5D9CCE

#3A4F5E - #507796 - #5D9CCE

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3A4F5E 0%, #507796 50%, #5D9CCE 100%);
    background: -webkit-linear-gradient(top, #3A4F5E 0%, #507796 50%, #5D9CCE 100%);
    background: linear-gradient(to bottom, #3A4F5E 0%, #507796 50%, #5D9CCE 100%);
}
</style>