#54BEA2 - #CEECE4 | 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 #54BEA2 to #CEECE4

#54BEA2 #CEECE4

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

#54BEA2 - #CEECE4 | 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 #54BEA2 as 0% and #CEECE4 as 100%.

0.0%	0.0% #54BEA2	RGB 84 190 162	#54BEA2
16.7%	16.7% #68C5AD	RGB 104 197 173	#68C5AD
33.3%	33.3% #7CCDB8	RGB 124 205 184	#7CCDB8
50.0%	50.0% #91D5C3	RGB 145 213 195	#91D5C3
66.7%	66.7% #A5DCCE	RGB 165 220 206	#A5DCCE
83.3%	83.3% #B9E4D9	RGB 185 228 217	#B9E4D9
100.0%	100.0% #CEECE4	RGB 206 236 228	#CEECE4

#54BEA2 #68C5AD #7CCDB8 #91D5C3 #A5DCCE #B9E4D9 #CEECE4

#54BEA2 - #CEECE4

HSV Blend

#54BEA2 - #CEECE4 | 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 #54BEA2 as 0% and #CEECE4 as 100%.

0.0%	0.0% #54BEA2	RGB 84 190 162	#54BEA2
16.7%	16.7% #65C5AC	RGB 101 197 172	#65C5AC
33.3%	33.3% #78CDB6	RGB 120 205 182	#78CDB6
50.0%	50.0% #8CD5C1	RGB 140 213 193	#8CD5C1
66.7%	66.7% #A0DCCC	RGB 160 220 204	#A0DCCC
83.3%	83.3% #B6E4D8	RGB 182 228 216	#B6E4D8
100.0%	100.0% #CEECE4	RGB 206 236 228	#CEECE4

#54BEA2 #65C5AC #78CDB6 #8CD5C1 #A0DCCC #B6E4D8 #CEECE4

#54BEA2 - #8CD5C1 - #CEECE4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #54BEA2 0%, #8CD5C1 50%, #CEECE4 100%);
    background: -webkit-linear-gradient(top, #54BEA2 0%, #8CD5C1 50%, #CEECE4 100%);
    background: linear-gradient(to bottom, #54BEA2 0%, #8CD5C1 50%, #CEECE4 100%);
}
</style>