#BAD8EA - #628DB7 | 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 #BAD8EA to #628DB7

#BAD8EA #628DB7

Calculate the color between two colors, #BAD8EA and #628DB7. 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)

#BAD8EA - #628DB7 | 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 #BAD8EA as 0% and #628DB7 as 100%.

0.0%	0.0% #BAD8EA	RGB 186 216 234	#BAD8EA
16.7%	16.7% #ABCBE1	RGB 171 203 225	#ABCBE1
33.3%	33.3% #9CBFD9	RGB 156 191 217	#9CBFD9
50.0%	50.0% #8EB2D0	RGB 142 178 208	#8EB2D0
66.7%	66.7% #7FA6C8	RGB 127 166 200	#7FA6C8
83.3%	83.3% #7099BF	RGB 112 153 191	#7099BF
100.0%	100.0% #628DB7	RGB 98 141 183	#628DB7

#BAD8EA #ABCBE1 #9CBFD9 #8EB2D0 #7FA6C8 #7099BF #628DB7

#BAD8EA - #628DB7

HSV Blend

#BAD8EA - #628DB7 | 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 #BAD8EA as 0% and #628DB7 as 100%.

0.0%	0.0% #BAD8EA	RGB 186 216 234	#BAD8EA
16.7%	16.7% #A9CBE1	RGB 169 203 225	#A9CBE1
33.3%	33.3% #99BED9	RGB 153 190 217	#99BED9
50.0%	50.0% #8AB2D0	RGB 138 178 208	#8AB2D0
66.7%	66.7% #7CA5C8	RGB 124 165 200	#7CA5C8
83.3%	83.3% #6E99BF	RGB 110 153 191	#6E99BF
100.0%	100.0% #628DB7	RGB 98 141 183	#628DB7

#BAD8EA #A9CBE1 #99BED9 #8AB2D0 #7CA5C8 #6E99BF #628DB7

#BAD8EA - #8AB2D0 - #628DB7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BAD8EA 0%, #8AB2D0 50%, #628DB7 100%);
    background: -webkit-linear-gradient(top, #BAD8EA 0%, #8AB2D0 50%, #628DB7 100%);
    background: linear-gradient(to bottom, #BAD8EA 0%, #8AB2D0 50%, #628DB7 100%);
}
</style>