How ColorPlum works
Updated
Every number on ColorPlum is calculated, not typed. This page explains where the starting values come from and which formulas turn them into everything else.
Where named colors come from
- CSS named colors. The 148 names that work in every browser (such as
crimson,aliceblueandrebeccapurple) are defined, with their hex values, in the CSS Color Module Level 4 specification from the W3C. Pages that use one say "value from CSS Color Module Level 4". - The xkcd color survey. For everyday names the CSS list doesn't have (such as "burgundy", "neon purple" or "dusty green"), we use the results of the xkcd color survey, in which more than 200,000 people named colors shown on their own screens. Randall Munroe published the 954 most agreed-on names with the average color for each; ColorPlum uses that list as distributed in the open-source matplotlib library. A survey value is what most people mean by a name on a screen, which is not the same as an official definition.
- When both lists have a name, the page shows both values and says how far apart they are.
- When no published list has a name (many paint and fashion names), we don't publish a page for it yet rather than pick a value ourselves.
How values are converted
- Hex and RGB are the same numbers written two ways: each pair of hex digits is one 0 to 255 channel.
- HSL, HSV, Lab, LCH and OKLCH use the conversion formulas in CSS Color 4, including the sRGB transfer function and the D65 to D50 Bradford adaptation for Lab. Values are rounded only for display.
- CMYK is the simple device formula design tools show. It isn't a press proof: real printing needs your printer's color profile.
How shades, harmonies and mixes are made
- Tints, shades and tones mix the color with white, black or mid gray in 10% steps, in sRGB, the way CSS's
color-mix()does by default. - Harmonies (complementary, analogous, triadic and so on) rotate the hue on the HSL color wheel, the convention color wheels and design tools use.
- Paint mixing uses a red-yellow-blue model of pigments based on Gosset and Chen's 2004 paper "Paint Inspired Color Mixing and Compositing for Visualization", which gets painters' results right (blue and yellow make green) where a screen average doesn't. It is still a model, so pages call it an approximation. Light mixing averages the linear-light values, which is what overlapping lamps do.
How contrast is checked
Contrast ratios use WCAG 2.2's relative luminance and contrast ratio definitions. A pair passes level AA for normal text at 4.5:1, AA for large text (24px, or 18.66px bold) at 3:1, and AAA at 7:1 and 4.5:1. Ratios are shown cut to two decimals, never rounded up, so a 4.499 doesn't appear as a passing 4.5.
How pages are checked
Automated tests check our conversions against the RGB values printed in the CSS specification for all 148 named colors, and our contrast figures with known WCAG results (black on white is 21:1). Page text is written and edited by Paul Gunder. Corrections are logged on What changed.