#5E85B4 - #BCC4C9 | 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 #5E85B4 to #BCC4C9

#5E85B4 #BCC4C9

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

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

0.0%	0.0% #5E85B4	RGB 94 133 180	#5E85B4
16.7%	16.7% #6D8FB7	RGB 109 143 183	#6D8FB7
33.3%	33.3% #7D9ABB	RGB 125 154 187	#7D9ABB
50.0%	50.0% #8DA4BE	RGB 141 164 190	#8DA4BE
66.7%	66.7% #9CAFC2	RGB 156 175 194	#9CAFC2
83.3%	83.3% #ACB9C5	RGB 172 185 197	#ACB9C5
100.0%	100.0% #BCC4C9	RGB 188 196 201	#BCC4C9

#5E85B4 #6D8FB7 #7D9ABB #8DA4BE #9CAFC2 #ACB9C5 #BCC4C9

#5E85B4 - #BCC4C9

HSV Blend

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

0.0%	0.0% #5E85B4	RGB 94 133 180	#5E85B4
16.7%	16.7% #6C90B7	RGB 108 144 183	#6C90B7
33.3%	33.3% #7B9BBB	RGB 123 155 187	#7B9BBB
50.0%	50.0% #8AA6BE	RGB 138 166 190	#8AA6BE
66.7%	66.7% #9AB0C2	RGB 154 176 194	#9AB0C2
83.3%	83.3% #ABBAC5	RGB 171 186 197	#ABBAC5
100.0%	100.0% #BCC4C9	RGB 188 196 201	#BCC4C9

#5E85B4 #6C90B7 #7B9BBB #8AA6BE #9AB0C2 #ABBAC5 #BCC4C9

#5E85B4 - #8AA6BE - #BCC4C9

CSS codes

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

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