Mixing light
Screens add light. To mix two colors of light we first turn each color code into the amount of light it stands for, using the sRGB transfer function in CSS Color Level 4: a channel value c between 0 and 1 becomes c / 12.92 when it is at most 0.04045, and ((c + 0.055) / 1.055)2.4 otherwise. The amounts are added channel by channel and converted back.
If a sum goes past what the screen can show, all three channels are scaled down together so the hue stays the same. The lamp levels on each color page are these amounts of light, which is why a color code of 128 shows up as about 22%, not 50%.
In the mixer, the color with the larger share shines at full and the other is dimmed in proportion, so an even split means both lights at full.
Mixing paint
Paint subtracts light, and two paints do not simply average. We use spectral.js, an open-source library that turns each color into a reflectance curve and mixes the curves with the Kubelka–Munk model of pigment layers. It is a model: real paints differ by brand and pigment, and the same color name can mix quite differently from one tube to the next.
All paint results on this site use these ten stand-in paints. They are ordinary color codes chosen to cover the wheel, not measurements of any product.
| Paint | Swatch | Code |
|---|---|---|
| Red | #D0202E | |
| Yellow | #F9D71C | |
| Blue | #1E3FA0 | |
| Orange | #F28C1E | |
| Green | #2E8540 | |
| Violet | #5B2C83 | |
| Magenta | #C2187A | |
| Cyan | #0098C8 | |
| White | #F5F5F0 | |
| Black | #1A1A1A | |
| Red light | #FF0000 | |
| Green light | #00FF00 | |
| Blue light | #0000FF |
Recipes on the color pages try every pair of paints at every share from 10% to 90% in steps of 5, and list the pairs that land closest to the target by CIEDE2000 color difference. On the red, blue, yellow, green, orange, black and white pages the paint of the same name is left out, so every recipe is a real mix.
Color wheel pairings
Pairing rules turn a color around a wheel by fixed angles. They are conventions with names, not measurements of taste, and the result depends on which wheel you use. We show two.
| Rule | Angles |
|---|---|
| Complementary | +180° |
| Analogous | -30°, +30° |
| Triadic | +120°, +240° |
| Split-complementary | +150°, +210° |
The painter's wheel puts red, yellow and blue a third of the way around from each other, with orange, green and violet between them. Screens use a different wheel, so we convert with the table below: each screen hue on the left maps to the painter's wheel angle on the right, with straight-line steps in between. We turn the color on the painter's wheel, map it back, and keep its saturation and lightness. The table is our own choice; other tools pick slightly different points and get answers a few degrees away.
| Screen hue (HSL) | Painter's wheel angle |
|---|---|
| 0° | 0° |
| 30° | 60° |
| 60° | 120° |
| 120° | 180° |
| 240° | 240° |
| 280° | 300° |
| 360° | 360° |
The OKLCH wheel is the hue angle of Oklab, a color space built so that equal steps look roughly equal, and part of CSS Color Level 4. Turning a color there keeps its lightness and chroma; if the result falls outside what a screen can show, Culori brings it back inside while holding its lightness and hue.
Gray, black and white have no hue, so wheel rules do not apply to them. Their pages show contrast instead.
Contrast and color difference
Contrast figures use the WCAG 2.2 contrast ratio, (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color. WCAG asks for at least 4.5 : 1 for normal body text.
Distances between a mix and its target use CIEDE2000 (ΔE), as implemented in Culori. Zero means the same color; smaller is closer.
Color names
Where CSS has a named color, such as brown, saddlebrown or maroon, we use its value from CSS Color Level 4. Burgundy has no CSS name and no single standard value, so its page says so and uses a stand-in.
How the numbers are kept honest
Every swatch, color code and figure on the site carries a note of which calculation made it and with what inputs. Each time the site is built, a script repeats every one of those calculations with the same code and stops the build if anything on a page differs.
Sources and code
- W3C, CSS Color Module Level 4 (sRGB transfer function, named colors, OKLCH), checked 2026-09-27
- W3C, Web Content Accessibility Guidelines 2.2 (contrast ratio), checked 2026-09-27
- spectral.js by Ronald van Wijnen (Kubelka–Munk pigment mixing), checked 2026-09-27
- Culori by Dan Burzo (color conversion, CIEDE2000, gamut mapping), checked 2026-09-27
- Björn Ottosson, A perceptual color space for image processing (Oklab), checked 2026-09-27
- Gaurav Sharma, The CIEDE2000 Color-Difference Formula, checked 2026-09-27
spectral.js is released under the MIT License, copyright 2025 Ronald van Wijnen: license text. Culori is released under the MIT License, copyright 2018 Dan Burzo: license text. Both run unchanged. The fonts (Syne, Atkinson Hyperlegible Next and Commit Mono) are served from this site under the SIL Open Font License: Syne, Atkinson Hyperlegible Next, Commit Mono.