#B4E2FF - #559AD9 | 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 #B4E2FF to #559AD9

#B4E2FF #559AD9

Calculate the color between two colors, #B4E2FF and #559AD9. 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)

#B4E2FF - #559AD9 | 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 #B4E2FF as 0% and #559AD9 as 100%.

0.0%	0.0% #B4E2FF	RGB 180 226 255	#B4E2FF
16.7%	16.7% #A4D6F8	RGB 164 214 248	#A4D6F8
33.3%	33.3% #94CAF2	RGB 148 202 242	#94CAF2
50.0%	50.0% #84BEEC	RGB 132 190 236	#84BEEC
66.7%	66.7% #74B2E5	RGB 116 178 229	#74B2E5
83.3%	83.3% #64A6DF	RGB 100 166 223	#64A6DF
100.0%	100.0% #559AD9	RGB 85 154 217	#559AD9

#B4E2FF #A4D6F8 #94CAF2 #84BEEC #74B2E5 #64A6DF #559AD9

#B4E2FF - #559AD9

HSV Blend

#B4E2FF - #559AD9 | 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 #B4E2FF as 0% and #559AD9 as 100%.

0.0%	0.0% #B4E2FF	RGB 180 226 255	#B4E2FF
16.7%	16.7% #A2D6F8	RGB 162 214 248	#A2D6F8
33.3%	33.3% #91CAF2	RGB 145 202 242	#91CAF2
50.0%	50.0% #81BEEC	RGB 129 190 236	#81BEEC
66.7%	66.7% #72B1E5	RGB 114 177 229	#72B1E5
83.3%	83.3% #63A5DF	RGB 99 165 223	#63A5DF
100.0%	100.0% #559AD9	RGB 85 154 217	#559AD9

#B4E2FF #A2D6F8 #91CAF2 #81BEEC #72B1E5 #63A5DF #559AD9

#B4E2FF - #81BEEC - #559AD9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #B4E2FF 0%, #81BEEC 50%, #559AD9 100%);
    background: -webkit-linear-gradient(top, #B4E2FF 0%, #81BEEC 50%, #559AD9 100%);
    background: linear-gradient(to bottom, #B4E2FF 0%, #81BEEC 50%, #559AD9 100%);
}
</style>