#BABDFB - #5367CE | 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 #BABDFB to #5367CE

#BABDFB #5367CE

Calculate the color between two colors, #BABDFB and #5367CE. 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)

#BABDFB - #5367CE | 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 #BABDFB as 0% and #5367CE as 100%.

0.0%	0.0% #BABDFB	RGB 186 189 251	#BABDFB
16.7%	16.7% #A8AEF3	RGB 168 174 243	#A8AEF3
33.3%	33.3% #97A0EC	RGB 151 160 236	#97A0EC
50.0%	50.0% #8692E4	RGB 134 146 228	#8692E4
66.7%	66.7% #7583DD	RGB 117 131 221	#7583DD
83.3%	83.3% #6475D5	RGB 100 117 213	#6475D5
100.0%	100.0% #5367CE	RGB 83 103 206	#5367CE

#BABDFB #A8AEF3 #97A0EC #8692E4 #7583DD #6475D5 #5367CE

#BABDFB - #5367CE

HSV Blend

#BABDFB - #5367CE | 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 #BABDFB as 0% and #5367CE as 100%.

0.0%	0.0% #BABDFB	RGB 186 189 251	#BABDFB
16.7%	16.7% #A6ABF3	RGB 166 171 243	#A6ABF3
33.3%	33.3% #949BEC	RGB 148 155 236	#949BEC
50.0%	50.0% #828CE4	RGB 130 140 228	#828CE4
66.7%	66.7% #717FDD	RGB 113 127 221	#717FDD
83.3%	83.3% #6272D5	RGB 98 114 213	#6272D5
100.0%	100.0% #5367CE	RGB 83 103 206	#5367CE

#BABDFB #A6ABF3 #949BEC #828CE4 #717FDD #6272D5 #5367CE

#BABDFB - #828CE4 - #5367CE

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BABDFB 0%, #828CE4 50%, #5367CE 100%);
    background: -webkit-linear-gradient(top, #BABDFB 0%, #828CE4 50%, #5367CE 100%);
    background: linear-gradient(to bottom, #BABDFB 0%, #828CE4 50%, #5367CE 100%);
}
</style>