Color Mixer

Blend two colors together to create a custom mixed color — great for design, painting, and UI work.

Color 1

Color 2

Mix Ratio: 50% Color 1 / 50% Color 2

Mixed Color

#bf4999
rgb(191, 73, 153)

Frequently Asked Questions

Digital color mixing (additive) blends RGB values. For example, red (255,0,0) + blue (0,0,255) = purple (127,0,127) at 50/50 mix.

No — paint mixing is subtractive (cyan, magenta, yellow primaries), while digital is additive (red, green, blue primaries). Red + Green on screen = Yellow. Red + Green paint = brown/dark color.

A hex color code (#RRGGBB) represents a color as three pairs of hexadecimal digits for red, green, and blue channels, each 0–255.

Complementary colors are opposite each other on the color wheel. Red and green, blue and orange, purple and yellow are complementary pairs that create strong contrast.

About this calculator

Pick two colours and slide the ratio to blend them into a new one. Copy the hex code of the result.

Every control updates a live preview and the CSS code at once. Copy the declaration into your stylesheet.

How to use it

Choose Colour 1 and Colour 2.
Move the ratio slider.
Press Copy Hex.

How mixing works

Digital mixing averages each channel by the ratio: mixed = c1 × (1 − t) + c2 × t. At 50%, #FF0000 (red) and #0000FF (blue) give #800080 (rgb 128, 0, 128), a purple. This differs from paint, where pigments absorb light and mix subtractively, so blue and yellow paint make green but blue and yellow light make grey.

Worked example

Examples at 50%

#FF0000 + #0000FF	#800080
#FFFFFF + #000000	#808080
#FF0000 + #00FF00	#808000

Tips and common mistakes

Mix with white to tint, with black to shade.
Mixing in HSL can look more natural than RGB.
Check contrast after mixing.
Use mixes to make hover states.
Save the result as a CSS variable.

Frequently asked questions

How do I mix two colours?

Average their red, green and blue values by a ratio.

Is digital mixing the same as paint?

No, light is additive and paint is subtractive.

What is 50% of red and blue?

Purple, #800080.

How do I make a tint?

Mix with white.

How do I make a shade?

Mix with black.

What is a hex colour code?

A six-digit base-16 code for red, green and blue.