#5BA5E3 - #BCD7E1 | 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 #5BA5E3 to #BCD7E1

#5BA5E3 #BCD7E1

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

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

0.0%	0.0% #5BA5E3	RGB 91 165 227	#5BA5E3
16.7%	16.7% #6BADE2	RGB 107 173 226	#6BADE2
33.3%	33.3% #7BB5E2	RGB 123 181 226	#7BB5E2
50.0%	50.0% #8BBEE2	RGB 139 190 226	#8BBEE2
66.7%	66.7% #9BC6E1	RGB 155 198 225	#9BC6E1
83.3%	83.3% #ABCEE1	RGB 171 206 225	#ABCEE1
100.0%	100.0% #BCD7E1	RGB 188 215 225	#BCD7E1

#5BA5E3 #6BADE2 #7BB5E2 #8BBEE2 #9BC6E1 #ABCEE1 #BCD7E1

#5BA5E3 - #BCD7E1

HSV Blend

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

0.0%	0.0% #5BA4E3	RGB 91 164 227	#5BA4E3
16.7%	16.7% #6BAFE2	RGB 107 175 226	#6BAFE2
33.3%	33.3% #7BB9E2	RGB 123 185 226	#7BB9E2
50.0%	50.0% #8BC2E2	RGB 139 194 226	#8BC2E2
66.7%	66.7% #9BCAE1	RGB 155 202 225	#9BCAE1
83.3%	83.3% #ABD1E1	RGB 171 209 225	#ABD1E1
100.0%	100.0% #BCD7E1	RGB 188 215 225	#BCD7E1

#5BA4E3 #6BAFE2 #7BB9E2 #8BC2E2 #9BCAE1 #ABD1E1 #BCD7E1

#5BA5E3 - #8BC2E2 - #BCD7E1

CSS codes

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

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