Color Mixer

Mix two colors together with a ratio slider and see the blended result

What is it and how does it work?

A colour mixer blends two or more colours together and shows the resulting mixed colour. Unlike a colour picker that selects existing colours, a colour mixer simulates the result of combining pigments or light — helping designers, artists, and developers predict what blend will appear before applying it. The result depends on the colour model: RGB mixing (additive, like light) and RYB mixing (subtractive, like paint pigments) produce different results.

This tool supports RGB mixing (standard for screens and web design), HSL interpolation (produces perceptually smoother gradients by blending through hue space), and optional RYB mixing (the traditional painter's model where red + blue = purple, not the digital magenta). You can control the mix ratio — a 75/25 split gives a result much closer to the dominant colour. The output is shown as hex, RGB, and HSL values ready to use in CSS.

Common use cases

• Brand colour variations: mix your primary brand colour with white (tint) or black (shade) at varying ratios to generate a complete palette of lighter and darker variants.
• Gradient midpoint: when creating a CSS gradient, mix the start and end colours to find the ideal midpoint colour for a three-stop gradient that avoids dull grey transitions.
• UI state colours: mix a button's base colour with a dark overlay to predict the hover state colour before coding it.

Frequently asked questions

Why does mixing red and blue give different results on screen vs. with paint?

Screens use additive RGB: red (255,0,0) + blue (0,0,255) = magenta (255,0,255). Pigments use subtractive mixing: red absorbs cyan/blue light, blue absorbs red/orange light, so the mix absorbs more of the spectrum, giving a darker purple-brown. The RYB model is a simplified approximation of paint mixing used in art education.

What is the difference between a tint, a shade, and a tone?

Tint = colour mixed with white (lighter, lower saturation). Shade = colour mixed with black (darker). Tone = colour mixed with grey (muted). In CSS, you achieve tints by increasing lightness in HSL, shades by decreasing it, and tones by reducing saturation.

How does 50/50 RGB mixing work mathematically?

Each RGB channel is averaged independently: mix(red1, red2) = (red1 + red2) / 2. So mixing #FF0000 (255,0,0) with #0000FF (0,0,255) gives (127,0,127) = #7F007F, a dark purple. Mixing in HSL space would give a different intermediate hue.

Is colour mixing in CSS possible natively?

CSS color-mix() is now supported in all major browsers (since 2023). It lets you write color-mix(in srgb, red 50%, blue 50%) directly in CSS without JavaScript. For production use, this is now the recommended approach over JavaScript mixing.

Color

Color Palette Generator · CSS Gradient Generator · Contrast Checker · Color Name Finder