#5E8EC4 - #1C4471 | 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 #5E8EC4 to #1C4471

#5E8EC4 #1C4471

Calculate the color between two colors, #5E8EC4 and #1C4471. 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)

#5E8EC4 - #1C4471 | 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 #5E8EC4 as 0% and #1C4471 as 100%.

0.0%	0.0% #5E8EC4	RGB 94 142 196	#5E8EC4
16.7%	16.7% #5381B6	RGB 83 129 182	#5381B6
33.3%	33.3% #4875A8	RGB 72 117 168	#4875A8
50.0%	50.0% #3D699A	RGB 61 105 154	#3D699A
66.7%	66.7% #325C8C	RGB 50 92 140	#325C8C
83.3%	83.3% #27507E	RGB 39 80 126	#27507E
100.0%	100.0% #1C4471	RGB 28 68 113	#1C4471

#5E8EC4 #5381B6 #4875A8 #3D699A #325C8C #27507E #1C4471

#5E8EC4 - #1C4471

HSV Blend

#5E8EC4 - #1C4471 | 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 #5E8EC4 as 0% and #1C4471 as 100%.

0.0%	0.0% #5E8DC4	RGB 94 141 196	#5E8DC4
16.7%	16.7% #5080B6	RGB 80 128 182	#5080B6
33.3%	33.3% #4373A8	RGB 67 115 168	#4373A8
50.0%	50.0% #38669A	RGB 56 102 154	#38669A
66.7%	66.7% #2D5A8C	RGB 45 90 140	#2D5A8C
83.3%	83.3% #244E7E	RGB 36 78 126	#244E7E
100.0%	100.0% #1C4471	RGB 28 68 113	#1C4471

#5E8DC4 #5080B6 #4373A8 #38669A #2D5A8C #244E7E #1C4471

#5E8EC4 - #38669A - #1C4471

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5E8DC4 0%, #38669A 50%, #1C4471 100%);
    background: -webkit-linear-gradient(top, #5E8DC4 0%, #38669A 50%, #1C4471 100%);
    background: linear-gradient(to bottom, #5E8DC4 0%, #38669A 50%, #1C4471 100%);
}
</style>