#BCDFD1 - #5AA09C | 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 #BCDFD1 to #5AA09C

#BCDFD1 #5AA09C

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

#BCDFD1 - #5AA09C | 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 #BCDFD1 as 0% and #5AA09C as 100%.

0.0%	0.0% #BCDFD1	RGB 188 223 209	#BCDFD1
16.7%	16.7% #ABD4C8	RGB 171 212 200	#ABD4C8
33.3%	33.3% #9BCABF	RGB 155 202 191	#9BCABF
50.0%	50.0% #8BBFB6	RGB 139 191 182	#8BBFB6
66.7%	66.7% #7AB5AD	RGB 122 181 173	#7AB5AD
83.3%	83.3% #6AAAA4	RGB 106 170 164	#6AAAA4
100.0%	100.0% #5AA09C	RGB 90 160 156	#5AA09C

#BCDFD1 #ABD4C8 #9BCABF #8BBFB6 #7AB5AD #6AAAA4 #5AA09C

#BCDFD1 - #5AA09C

HSV Blend

#BCDFD1 - #5AA09C | 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 #BCDFD1 as 0% and #5AA09C as 100%.

0.0%	0.0% #BCDFD1	RGB 188 223 209	#BCDFD1
16.7%	16.7% #A9D4C5	RGB 169 212 197	#A9D4C5
33.3%	33.3% #97CABB	RGB 151 202 187	#97CABB
50.0%	50.0% #86BFB2	RGB 134 191 178	#86BFB2
66.7%	66.7% #76B5AA	RGB 118 181 170	#76B5AA
83.3%	83.3% #67AAA2	RGB 103 170 162	#67AAA2
100.0%	100.0% #5AA09C	RGB 90 160 156	#5AA09C

#BCDFD1 #A9D4C5 #97CABB #86BFB2 #76B5AA #67AAA2 #5AA09C

#BCDFD1 - #86BFB2 - #5AA09C

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BCDFD1 0%, #86BFB2 50%, #5AA09C 100%);
    background: -webkit-linear-gradient(top, #BCDFD1 0%, #86BFB2 50%, #5AA09C 100%);
    background: linear-gradient(to bottom, #BCDFD1 0%, #86BFB2 50%, #5AA09C 100%);
}
</style>