#B5DDF3 - #5A94C5 | 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 #B5DDF3 to #5A94C5

#B5DDF3 #5A94C5

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

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

0.0%	0.0% #B5DDF3	RGB 181 221 243	#B5DDF3
16.7%	16.7% #A5D0EB	RGB 165 208 235	#A5D0EB
33.3%	33.3% #96C4E3	RGB 150 196 227	#96C4E3
50.0%	50.0% #87B8DC	RGB 135 184 220	#87B8DC
66.7%	66.7% #78ACD4	RGB 120 172 212	#78ACD4
83.3%	83.3% #69A0CC	RGB 105 160 204	#69A0CC
100.0%	100.0% #5A94C5	RGB 90 148 197	#5A94C5

#B5DDF3 #A5D0EB #96C4E3 #87B8DC #78ACD4 #69A0CC #5A94C5

#B5DDF3 - #5A94C5

HSV Blend

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

0.0%	0.0% #B5DDF3	RGB 181 221 243	#B5DDF3
16.7%	16.7% #A3D0EB	RGB 163 208 235	#A3D0EB
33.3%	33.3% #93C4E3	RGB 147 196 227	#93C4E3
50.0%	50.0% #84B8DC	RGB 132 184 220	#84B8DC
66.7%	66.7% #75ACD4	RGB 117 172 212	#75ACD4
83.3%	83.3% #67A0CC	RGB 103 160 204	#67A0CC
100.0%	100.0% #5A94C5	RGB 90 148 197	#5A94C5

#B5DDF3 #A3D0EB #93C4E3 #84B8DC #75ACD4 #67A0CC #5A94C5

#B5DDF3 - #84B8DC - #5A94C5

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #B5DDF3 0%, #84B8DC 50%, #5A94C5 100%);
    background: -webkit-linear-gradient(top, #B5DDF3 0%, #84B8DC 50%, #5A94C5 100%);
    background: linear-gradient(to bottom, #B5DDF3 0%, #84B8DC 50%, #5A94C5 100%);
}
</style>