#5DCCFF - #8FFFC7 | 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 #5DCCFF to #8FFFC7

#5DCCFF #8FFFC7

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

#5DCCFF - #8FFFC7 | 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 #5DCCFF as 0% and #8FFFC7 as 100%.

0.0%	0.0% #5DCCFF	RGB 93 204 255	#5DCCFF
16.7%	16.7% #65D4F5	RGB 101 212 245	#65D4F5
33.3%	33.3% #6DDDEC	RGB 109 221 236	#6DDDEC
50.0%	50.0% #76E5E3	RGB 118 229 227	#76E5E3
66.7%	66.7% #7EEED9	RGB 126 238 217	#7EEED9
83.3%	83.3% #86F6D0	RGB 134 246 208	#86F6D0
100.0%	100.0% #8FFFC7	RGB 143 255 199	#8FFFC7

#5DCCFF #65D4F5 #6DDDEC #76E5E3 #7EEED9 #86F6D0 #8FFFC7

#5DCCFF - #8FFFC7

HSV Blend

#5DCCFF - #8FFFC7 | 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 #5DCCFF as 0% and #8FFFC7 as 100%.

0.0%	0.0% #5DCCFF	RGB 93 204 255	#5DCCFF
16.7%	16.7% #65E3FF	RGB 101 227 255	#65E3FF
33.3%	33.3% #6DF8FF	RGB 109 248 255	#6DF8FF
50.0%	50.0% #76FFF2	RGB 118 255 242	#76FFF2
66.7%	66.7% #7EFFE1	RGB 126 255 225	#7EFFE1
83.3%	83.3% #86FFD3	RGB 134 255 211	#86FFD3
100.0%	100.0% #8FFFC7	RGB 143 255 199	#8FFFC7

#5DCCFF #65E3FF #6DF8FF #76FFF2 #7EFFE1 #86FFD3 #8FFFC7

#5DCCFF - #76FFF2 - #8FFFC7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5DCCFF 0%, #76FFF2 50%, #8FFFC7 100%);
    background: -webkit-linear-gradient(top, #5DCCFF 0%, #76FFF2 50%, #8FFFC7 100%);
    background: linear-gradient(to bottom, #5DCCFF 0%, #76FFF2 50%, #8FFFC7 100%);
}
</style>