Color Mixing & Palette Science

Additive vs Subtractive Mixing

There are two fundamental models of color mixing, and understanding the difference explains why screen colors and printed colors behave differently.

Additive mixing (RGB) is how screens work. You start with black (no light) and add red, green, and blue light together. Combining all three at full intensity produces white. This is why your monitor uses RGB values — each channel adds light to the display.

Subtractive mixing (CMYK) is how print and paint work. You start with white (paper reflecting all light) and add pigments that absorb (subtract) wavelengths. Cyan absorbs red, magenta absorbs green, and yellow absorbs blue. Combining all three theoretically produces black, though in practice you get a muddy brown — which is why printers add a black (K) ink channel.

For web design, you're always working in additive RGB space. But the mental model of subtractive mixing is still useful — it explains why mixing complementary colors in RGB produces gray (the two colors cancel each other's light), and why certain color combinations feel "muddy" while others feel vibrant.

Mixing Colors in Code

The simplest way to mix two colors is to average their RGB values. Mixing #FF0000 (red) and #0000FF (blue) at 50/50 gives you #800080 (purple). But this naive RGB averaging often produces dull, desaturated results because RGB is not perceptually uniform — the same numerical step in RGB doesn't correspond to the same visual change.

For better results, mix in the HSL color space — this preserves saturation and produces more visually pleasing intermediate colors. Even better is mixing in OKLCH, which is designed to be perceptually uniform (more on that below).

Modern CSS supports color mixing natively with the color-mix() function, which landed in all major browsers:

Tints, Shades & Tones

These three terms describe specific ways to modify a base color, and they're the foundation of any color scale:

Tint = base color + white. Tints are lighter, softer versions of the original. In HSL terms, you're increasing the lightness value while keeping hue and saturation constant.

Shade = base color + black. Shades are darker versions. In HSL, you decrease the lightness.

Tone = base color + gray. Tones are more muted, less saturated versions. In HSL, you decrease the saturation.

The Color Shade Generator creates a full tint-to-shade scale from any base color. Design systems typically use a 10-step scale (50, 100, 200, ... 900) where the base color sits at the 500 level — the same convention Tailwind CSS and Material Design use.

Color Harmony Rules

Color harmony theory describes relationships between colors on the color wheel that tend to feel balanced and intentional. These aren't rigid rules — plenty of great designs break them — but they're reliable starting points.

Complementary

Two colors directly opposite each other on the wheel (180° apart). High contrast, high energy. Coral and teal, blue and orange. Use one as the dominant color and the other as an accent to avoid visual fatigue.

Analogous

Three colors next to each other on the wheel (within about 30° of each other). These palettes feel harmonious and natural because they share underlying hues. Most landscapes and nature scenes are analogous palettes.

Triadic

Three colors equally spaced around the wheel (120° apart). Vibrant and balanced, but can feel loud if all three are used at equal intensity. Let one color dominate and use the other two as accents.

Split-complementary

A base color plus the two colors adjacent to its complement. This gives you the contrast of complementary colors with more variety and less tension. It's one of the easiest harmonies to work with and tends to produce pleasing results even for beginners.

Building a Palette from Scratch

Start with a single color — your brand color or the dominant color in your design. Then build outward using harmony rules and shade scales:

First, generate a full tint-to-shade scale of your primary color (9-11 steps). This gives you light backgrounds, hover states, borders, and dark accents all from one hue. Second, choose one or two accent colors using a harmony rule. Generate shade scales for those too. Third, define your neutrals — grays with a slight warm or cool tint that matches your primary. Pure gray (#808080) often feels lifeless; adding a tiny amount of your primary hue makes neutrals feel intentional.

Finally, assign roles to your colors: primary (CTAs, links), secondary (supporting elements), success/warning/error (semantic feedback), neutral (text, borders, backgrounds). A well-structured palette might have only 3-4 base hues but 30-40 total values when you include all shade steps.

Perceptual Uniformity & OKLCH

RGB and HSL are mathematically convenient but perceptually misleading. A yellow at 50% HSL lightness looks much brighter than a blue at 50% lightness, even though the numbers are identical. This is because human vision is more sensitive to some wavelengths than others.

OKLCH (Lightness, Chroma, Hue) is a color space designed to be perceptually uniform — equal numerical steps produce equal perceived visual changes. When you generate a shade scale in OKLCH, each step looks evenly spaced to the human eye, which isn't the case in HSL.

OKLCH is supported in all modern browsers and is increasingly recommended for design systems that need consistent, predictable color scales. The Color Mixer supports mixing in OKLCH space for perceptually accurate results.

Designing for Color Blindness

Approximately 8% of men and 0.5% of women have some form of color vision deficiency (CVD). The most common types are deuteranomaly and protanomaly (difficulty distinguishing red from green), followed by tritanomaly (difficulty with blue and yellow).

The most important rule: never use color alone to convey information. If a form field has an error, don't just turn the border red — also add an icon, a text label, or a pattern. If a chart uses colors to distinguish data series, also use different line styles, markers, or direct labels.

When choosing palette colors, verify that your key colors remain distinguishable under simulated CVD conditions. The Color Blindness Simulator shows how your colors appear to people with different types of CVD. Pay special attention to red/green combinations, which are the most commonly problematic. Blue/orange is a safer high-contrast pair that works for most types of color blindness.

High luminance contrast between colors helps everyone. Even if two colors look similar in hue under CVD, a significant difference in lightness still makes them distinguishable. This is why WCAG contrast ratios are so important — they measure luminance difference, which is preserved across all forms of color blindness.

Palettes for Dark Mode

Dark mode isn't just an inverted light mode. Colors that work on a light background often need adjustment for dark backgrounds because of how human vision adapts to different ambient light levels.

On dark backgrounds, highly saturated colors can feel glaring and cause visual fatigue. Reduce saturation by 10-20% and increase lightness slightly for primary and accent colors. Your lightest shade step (which was a subtle background tint in light mode) might need to become a much darker value — typically in the 10-15% lightness range.

Text on dark backgrounds should not be pure white (#FFFFFF). It creates harsh contrast that's tiring to read. Use an off-white like #E5E5E5 or rgba(255,255,255,0.87) for body text, reserving brighter white for headings or emphasis.

Testing Your Palette

Once you've built a palette, test it against three criteria. First, check contrast ratios between every text/background combination using the Contrast Checker — aim for WCAG AA (4.5:1) at minimum. Second, run your key colors through the Color Blindness Simulator to verify distinguishability under CVD. Third, test your palette at scale — apply it to a real layout with buttons, cards, text, and backgrounds to see if it feels balanced or if one color overwhelms the others.