#2F5C5E - #54A1C0 | 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 #2F5C5E to #54A1C0

#2F5C5E #54A1C0

Calculate the color between two colors, #2F5C5E and #54A1C0. 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)

#2F5C5E - #54A1C0 | 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 #2F5C5E as 0% and #54A1C0 as 100%.

0.0%	0.0% #2F5C5E	RGB 47 92 94	#2F5C5E
16.7%	16.7% #35676E	RGB 53 103 110	#35676E
33.3%	33.3% #3B737E	RGB 59 115 126	#3B737E
50.0%	50.0% #417E8F	RGB 65 126 143	#417E8F
66.7%	66.7% #478A9F	RGB 71 138 159	#478A9F
83.3%	83.3% #4D95AF	RGB 77 149 175	#4D95AF
100.0%	100.0% #54A1C0	RGB 84 161 192	#54A1C0

#2F5C5E #35676E #3B737E #417E8F #478A9F #4D95AF #54A1C0

#2F5C5E - #54A1C0

HSV Blend

#2F5C5E - #54A1C0 | 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 #2F5C5E as 0% and #54A1C0 as 100%.

0.0%	0.0% #2F5C5E	RGB 47 92 94	#2F5C5E
16.7%	16.7% #36696E	RGB 54 105 110	#36696E
33.3%	33.3% #3C767E	RGB 60 118 126	#3C767E
50.0%	50.0% #43828F	RGB 67 130 143	#43828F
66.7%	66.7% #498D9F	RGB 73 141 159	#498D9F
83.3%	83.3% #4E97AF	RGB 78 151 175	#4E97AF
100.0%	100.0% #54A1C0	RGB 84 161 192	#54A1C0

#2F5C5E #36696E #3C767E #43828F #498D9F #4E97AF #54A1C0

#2F5C5E - #43828F - #54A1C0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #2F5C5E 0%, #43828F 50%, #54A1C0 100%);
    background: -webkit-linear-gradient(top, #2F5C5E 0%, #43828F 50%, #54A1C0 100%);
    background: linear-gradient(to bottom, #2F5C5E 0%, #43828F 50%, #54A1C0 100%);
}
</style>