HTML Color Names

The 148 keywords (like red, tomato, or cornflowerblue) are formally defined in the CSS Color Module specification, and the vast majority trace their origin back even further to the X11 windowing system's color name list from the 1980s, which early web browsers adopted directly. rebeccapurple is the one notable modern addition — added to the CSS spec in 2014 as a tribute to Eric Meyer's daughter Rebecca, making it the only named color with a documented personal, non-technical origin story.

Yes — every name in this list is a valid CSS value usable anywhere a color is expected: color: tomato;, background: cornflowerblue;, border: 2px solid rebeccapurple; all work exactly the same as using the equivalent hex code, in every modern browser. Named colors are purely a convenience layer — the browser resolves them to the identical RGB value as typing the hex code directly, so there's no performance or compatibility difference between the two.

The CSS specification deliberately includes both British ('grey') and American ('gray') spellings as aliases for the identical color value, for every name containing that word — gray/grey, darkgray/darkgrey, lightgray/lightgrey, slategray/slategrey, and several more all appear twice in this list pointing to the exact same hex value. This dual-spelling support exists specifically to avoid a common, easy-to-make typo becoming a broken stylesheet.

They are identical — aqua and cyan both resolve to #00FFFF, and fuchsia and magenta both resolve to #FF00FF. This is a historical artifact of the CSS named-color list merging two different naming traditions: aqua and fuchsia came from the original CSS2 color keywords, while cyan and magenta came from the later, much larger X11-derived extended color list — rather than picking one, the specification kept both names as true synonyms.

Each color's HSL (Hue, Saturation, Lightness) values are calculated from its RGB values, and the family classification is based primarily on hue angle — for example, hues roughly between 0-15 and 345-360 degrees are grouped as red, 45-65 as yellow, and so on around the color wheel — with special handling for grayscale colors (very low saturation groups as gray, very high lightness as white, very low lightness as black) and for brown (a genuinely tricky case, since brown is really just dark, moderately saturated orange rather than its own hue range). This is a practical, reasonable heuristic for browsing purposes, not an official or universally agreed-upon categorization — a handful of borderline colors near a boundary could reasonably be grouped differently.

All three describe the exact same color using different notations suited to different tasks. HEX (#RRGGBB) packs red, green, and blue intensity into a compact six-digit code and is the most common format in stylesheets and design tools. RGB (rgb(r, g, b)) spells out the same three values in plain decimal (0-255 each), which is often easier to read and to manipulate programmatically. HSL (hsl(h, s%, l%)) describes color completely differently — as a hue angle around a color wheel, a saturation percentage (how vivid vs. gray), and a lightness percentage (how close to black or white) — which makes it much more intuitive for tasks like 'make this color 20% darker' or 'find a color with the same hue but less saturation,' since you can adjust just one value predictably.

Named colors are genuinely convenient for prototyping, quick demos, learning CSS, or placeholder content, since typing 'tomato' is faster and more memorable than looking up #FF6347. For a production design system, most teams prefer defining their own custom CSS variables or design tokens (like --color-primary or --brand-red-500) tied to hex or HSL values specific to their brand — this gives full control over the exact shade used and keeps the color palette consistent and easy to update from one central place, rather than being limited to whichever named colors happen to be close enough.

Both are valid CSS color keywords, but neither represents an actual fixed color the way the 148 names in this list do — transparent means fully see-through regardless of any RGB value underneath it, and currentColor is a dynamic reference that resolves to whatever the element's own text color currently is, which changes depending on context. Since this tool is specifically about browsing and copying concrete color values, these two context-dependent keywords are intentionally left out.