#56BFA1 - #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 #56BFA1 to #CEECE4

#56BFA1 #CEECE4

Calculate the color between two colors, #56BFA1 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)

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

0.0%	0.0% #56BFA1	RGB 86 191 161	#56BFA1
16.7%	16.7% #6AC6AC	RGB 106 198 172	#6AC6AC
33.3%	33.3% #7ECEB7	RGB 126 206 183	#7ECEB7
50.0%	50.0% #92D5C2	RGB 146 213 194	#92D5C2
66.7%	66.7% #A6DDCD	RGB 166 221 205	#A6DDCD
83.3%	83.3% #BAE4D8	RGB 186 228 216	#BAE4D8
100.0%	100.0% #CEECE4	RGB 206 236 228	#CEECE4

#56BFA1 #6AC6AC #7ECEB7 #92D5C2 #A6DDCD #BAE4D8 #CEECE4

#56BFA1 - #CEECE4

HSV Blend

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

0.0%	0.0% #56BFA1	RGB 86 191 161	#56BFA1
16.7%	16.7% #67C6AB	RGB 103 198 171	#67C6AB
33.3%	33.3% #79CEB6	RGB 121 206 182	#79CEB6
50.0%	50.0% #8DD5C1	RGB 141 213 193	#8DD5C1
66.7%	66.7% #A1DDCC	RGB 161 221 204	#A1DDCC
83.3%	83.3% #B7E4D8	RGB 183 228 216	#B7E4D8
100.0%	100.0% #CEECE4	RGB 206 236 228	#CEECE4

#56BFA1 #67C6AB #79CEB6 #8DD5C1 #A1DDCC #B7E4D8 #CEECE4

#56BFA1 - #8DD5C1 - #CEECE4

CSS codes

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

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