How do colors mix on screen?

In RGB, the three channels are averaged with the slider weight. RGB blending does not always match perceptual blending; OKLab handles that better.

Yes. Blending the brand color with white gives light tints, with black gives dark shades. Foundation of many design system scales.

Why do some blends look ugly?

Mixing two complementary colors in RGB passes through gray. For more vibrant blends, use HSL or LCH and rotate hues.

Two-Color Blender

How blending works

Blending colors on screen is not the same as mixing paint. On screen, colors are formed from red, green and blue light (RGB). When you "blend" two colors in RGB, you average the three channel values weighted by the percentage. At 50%, each channel sits halfway between the two colors.

The formula

newR = R1 * (1 - p) + R2 * p
newG = G1 * (1 - p) + G2 * p
newB = B1 * (1 - p) + B2 * p

Where p ranges 0–1. Linear interpolation between two colors.

RGB vs perceptual blend

Blending complementary colors (blue and orange, red and green) in RGB usually passes through a midway gray. Sometimes that's what you want (smooth transition); sometimes not (loses character). For more "vibrant" blends, color spaces like HSL, LCH and OKLab exist. Modern CSS supports color-mix(in oklab, c1, c2 50%) for perceptually uniform blends.

Use cases

Color scales: blend primary with white for lights (50, 100, 200), with black for darks (700, 800, 900).
Gradients: helps understand which colors look good adjacent.
States: hover, active are usually the base blended with black or white.
Theming: derive secondary colors from a primary.

Building scales with blending

A simple technique to generate a 10-stop scale from a primary: take the base as 500. Blend with white at 90%, 80%, 70%... 10% for stops 50, 100, 200... 400. Blend with black at 10%, 20%, 30%... 50% for 600, 700, 800, 900. Not perfect but a usable starting point for manual tweaks.

Limitations

RGB blending does not respect perceptual luminance. Blending yellow and blue 50/50 in RGB gives middle gray, not the green you'd expect from paint. For more natural blends, OKLCH is the best modern option: respects how the human eye perceives lightness.

Design tip

When blending two brand colors, check whether the midpoint is usable as a third palette color. Sometimes you stumble into something nice. Other times the middle looks "muddy" and is better skipped on the scale.