#B7ECF7 - #5AAFCB | 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 #B7ECF7 to #5AAFCB

#B7ECF7 #5AAFCB

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

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

0.0%	0.0% #B7ECF7	RGB 183 236 247	#B7ECF7
16.7%	16.7% #A7E1EF	RGB 167 225 239	#A7E1EF
33.3%	33.3% #98D7E8	RGB 152 215 232	#98D7E8
50.0%	50.0% #88CDE1	RGB 136 205 225	#88CDE1
66.7%	66.7% #79C3D9	RGB 121 195 217	#79C3D9
83.3%	83.3% #69B9D2	RGB 105 185 210	#69B9D2
100.0%	100.0% #5AAFCB	RGB 90 175 203	#5AAFCB

#B7ECF7 #A7E1EF #98D7E8 #88CDE1 #79C3D9 #69B9D2 #5AAFCB

#B7ECF7 - #5AAFCB

HSV Blend

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

0.0%	0.0% #B7ECF7	RGB 183 236 247	#B7ECF7
16.7%	16.7% #A5E2EF	RGB 165 226 239	#A5E2EF
33.3%	33.3% #95D7E8	RGB 149 215 232	#95D7E8
50.0%	50.0% #85CDE1	RGB 133 205 225	#85CDE1
66.7%	66.7% #76C3D9	RGB 118 195 217	#76C3D9
83.3%	83.3% #67B9D2	RGB 103 185 210	#67B9D2
100.0%	100.0% #5AAFCB	RGB 90 175 203	#5AAFCB

#B7ECF7 #A5E2EF #95D7E8 #85CDE1 #76C3D9 #67B9D2 #5AAFCB

#B7ECF7 - #85CDE1 - #5AAFCB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #B7ECF7 0%, #85CDE1 50%, #5AAFCB 100%);
    background: -webkit-linear-gradient(top, #B7ECF7 0%, #85CDE1 50%, #5AAFCB 100%);
    background: linear-gradient(to bottom, #B7ECF7 0%, #85CDE1 50%, #5AAFCB 100%);
}
</style>