#2B5F99 - #5EACCF | 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 #2B5F99 to #5EACCF

#2B5F99 #5EACCF

Calculate the color between two colors, #2B5F99 and #5EACCF. 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)

#2B5F99 - #5EACCF | 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 #2B5F99 as 0% and #5EACCF as 100%.

0.0%	0.0% #2B5F99	RGB 43 95 153	#2B5F99
16.7%	16.7% #336BA2	RGB 51 107 162	#336BA2
33.3%	33.3% #3C78AB	RGB 60 120 171	#3C78AB
50.0%	50.0% #4485B4	RGB 68 133 180	#4485B4
66.7%	66.7% #4D92BD	RGB 77 146 189	#4D92BD
83.3%	83.3% #559FC6	RGB 85 159 198	#559FC6
100.0%	100.0% #5EACCF	RGB 94 172 207	#5EACCF

#2B5F99 #336BA2 #3C78AB #4485B4 #4D92BD #559FC6 #5EACCF

#2B5F99 - #5EACCF

HSV Blend

#2B5F99 - #5EACCF | 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 #2B5F99 as 0% and #5EACCF as 100%.

0.0%	0.0% #2A5F99	RGB 42 95 153	#2A5F99
16.7%	16.7% #326BA2	RGB 50 107 162	#326BA2
33.3%	33.3% #3977AB	RGB 57 119 171	#3977AB
50.0%	50.0% #4284B4	RGB 66 132 180	#4284B4
66.7%	66.7% #4A91BD	RGB 74 145 189	#4A91BD
83.3%	83.3% #549EC6	RGB 84 158 198	#549EC6
100.0%	100.0% #5EACCF	RGB 94 172 207	#5EACCF

#2A5F99 #326BA2 #3977AB #4284B4 #4A91BD #549EC6 #5EACCF

#2B5F99 - #4284B4 - #5EACCF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #2A5F99 0%, #4284B4 50%, #5EACCF 100%);
    background: -webkit-linear-gradient(top, #2A5F99 0%, #4284B4 50%, #5EACCF 100%);
    background: linear-gradient(to bottom, #2A5F99 0%, #4284B4 50%, #5EACCF 100%);
}
</style>