Color Mixer

Mix two colors and generate blends, tints, shades, and CSS output.

Colors

Color A

Color B

Mix Ratio

Color AColor B50%

Mixed Color

#a857c5

rgb(168, 87, 197)

hsl(284, 49%, 56%)

5-Step Gradient A → B

0%#6366f1

25%#855fdb

50%#a857c5

75%#ca50af

100%#ec4899

Blend Modes

Normal (RGB mix)#a857c5

Multiply#5c1d91

Screen#f391f9

Overlay#b73af4

Tints of Color A (mix with white)

+20%#8285f4

+40%#a1a3f7

+60%#c1c2f9

+80%#e0e0fc

+100%#ffffff

Shades of Color A (mix with black)

+20%#4f52c1

+40%#3b3d91

+60%#282960

+80%#141430

+100%#000000

Contrast Ratio (A vs B)

#6366f1

#ec4899

1.27:1WCAG Fail

Sample text on Color A background

Sample text on Color B background