#B8D4FF - #5A80D9 | 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 #B8D4FF to #5A80D9

#B8D4FF #5A80D9

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

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

0.0%	0.0% #B8D4FF	RGB 184 212 255	#B8D4FF
16.7%	16.7% #A8C6F8	RGB 168 198 248	#A8C6F8
33.3%	33.3% #98B8F2	RGB 152 184 242	#98B8F2
50.0%	50.0% #89AAEC	RGB 137 170 236	#89AAEC
66.7%	66.7% #799CE5	RGB 121 156 229	#799CE5
83.3%	83.3% #698EDF	RGB 105 142 223	#698EDF
100.0%	100.0% #5A80D9	RGB 90 128 217	#5A80D9

#B8D4FF #A8C6F8 #98B8F2 #89AAEC #799CE5 #698EDF #5A80D9

#B8D4FF - #5A80D9

HSV Blend

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

0.0%	0.0% #B8D4FF	RGB 184 212 255	#B8D4FF
16.7%	16.7% #A6C5F8	RGB 166 197 248	#A6C5F8
33.3%	33.3% #96B7F2	RGB 150 183 242	#96B7F2
50.0%	50.0% #86A9EC	RGB 134 169 236	#86A9EC
66.7%	66.7% #769BE5	RGB 118 155 229	#769BE5
83.3%	83.3% #688DDF	RGB 104 141 223	#688DDF
100.0%	100.0% #5A80D9	RGB 90 128 217	#5A80D9

#B8D4FF #A6C5F8 #96B7F2 #86A9EC #769BE5 #688DDF #5A80D9

#B8D4FF - #86A9EC - #5A80D9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #B8D4FF 0%, #86A9EC 50%, #5A80D9 100%);
    background: -webkit-linear-gradient(top, #B8D4FF 0%, #86A9EC 50%, #5A80D9 100%);
    background: linear-gradient(to bottom, #B8D4FF 0%, #86A9EC 50%, #5A80D9 100%);
}
</style>