#BBA2FF - #7D36E3 | 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 #BBA2FF to #7D36E3

#BBA2FF #7D36E3

Calculate the color between two colors, #BBA2FF and #7D36E3. 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)

#BBA2FF - #7D36E3 | 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 #BBA2FF as 0% and #7D36E3 as 100%.

0.0%	0.0% #BBA2FF	RGB 187 162 255	#BBA2FF
16.7%	16.7% #B090FA	RGB 176 144 250	#B090FA
33.3%	33.3% #A67EF5	RGB 166 126 245	#A67EF5
50.0%	50.0% #9C6CF1	RGB 156 108 241	#9C6CF1
66.7%	66.7% #915AEC	RGB 145 90 236	#915AEC
83.3%	83.3% #8748E7	RGB 135 72 231	#8748E7
100.0%	100.0% #7D36E3	RGB 125 54 227	#7D36E3

#BBA2FF #B090FA #A67EF5 #9C6CF1 #915AEC #8748E7 #7D36E3

#BBA2FF - #7D36E3

HSV Blend

#BBA2FF - #7D36E3 | 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 #BBA2FF as 0% and #7D36E3 as 100%.

0.0%	0.0% #BBA2FF	RGB 187 162 255	#BBA2FF
16.7%	16.7% #AD8EFA	RGB 173 142 250	#AD8EFA
33.3%	33.3% #A27BF5	RGB 162 123 245	#A27BF5
50.0%	50.0% #9769F1	RGB 151 105 241	#9769F1
66.7%	66.7% #8D57EC	RGB 141 87 236	#8D57EC
83.3%	83.3% #8446E7	RGB 132 70 231	#8446E7
100.0%	100.0% #7D36E3	RGB 125 54 227	#7D36E3

#BBA2FF #AD8EFA #A27BF5 #9769F1 #8D57EC #8446E7 #7D36E3

#BBA2FF - #9769F1 - #7D36E3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BBA2FF 0%, #9769F1 50%, #7D36E3 100%);
    background: -webkit-linear-gradient(top, #BBA2FF 0%, #9769F1 50%, #7D36E3 100%);
    background: linear-gradient(to bottom, #BBA2FF 0%, #9769F1 50%, #7D36E3 100%);
}
</style>