#BAE7FF - #5DA1D9 | 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 #BAE7FF to #5DA1D9

#BAE7FF #5DA1D9

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

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

0.0%	0.0% #BAE7FF	RGB 186 231 255	#BAE7FF
16.7%	16.7% #AADBF8	RGB 170 219 248	#AADBF8
33.3%	33.3% #9BCFF2	RGB 155 207 242	#9BCFF2
50.0%	50.0% #8BC4EC	RGB 139 196 236	#8BC4EC
66.7%	66.7% #7CB8E5	RGB 124 184 229	#7CB8E5
83.3%	83.3% #6CACDF	RGB 108 172 223	#6CACDF
100.0%	100.0% #5DA1D9	RGB 93 161 217	#5DA1D9

#BAE7FF #AADBF8 #9BCFF2 #8BC4EC #7CB8E5 #6CACDF #5DA1D9

#BAE7FF - #5DA1D9

HSV Blend

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

0.0%	0.0% #BAE7FF	RGB 186 231 255	#BAE7FF
16.7%	16.7% #A8DBF8	RGB 168 219 248	#A8DBF8
33.3%	33.3% #98CFF2	RGB 152 207 242	#98CFF2
50.0%	50.0% #88C4EC	RGB 136 196 236	#88C4EC
66.7%	66.7% #79B8E5	RGB 121 184 229	#79B8E5
83.3%	83.3% #6AACDF	RGB 106 172 223	#6AACDF
100.0%	100.0% #5DA1D9	RGB 93 161 217	#5DA1D9

#BAE7FF #A8DBF8 #98CFF2 #88C4EC #79B8E5 #6AACDF #5DA1D9

#BAE7FF - #88C4EC - #5DA1D9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BAE7FF 0%, #88C4EC 50%, #5DA1D9 100%);
    background: -webkit-linear-gradient(top, #BAE7FF 0%, #88C4EC 50%, #5DA1D9 100%);
    background: linear-gradient(to bottom, #BAE7FF 0%, #88C4EC 50%, #5DA1D9 100%);
}
</style>