The 140 HTML Color Names Every Developer Should Know (and When to Skip Them)

Type color: tomato into a stylesheet and the browser paints #ff6347. No lookup table on your end, no config, no import. The name is the value, because every browser ships the same hard-coded list of named colors and has since the late 1990s. There are around 140 of them (the CSS Color Module Level 3 list, plus a few historical duplicates), and each one resolves to one fixed hex string that never changes between Chrome, Safari, Firefox, or a phone WebView.

That stability is the whole point. tomato is #ff6347 today, was #ff6347 in 2005, and will be #ff6347 on a browser that ships in five years. If you want to look any of them up by name, hex fragment, or hue, the full grid lives at /en/t/html-color-names/. This post is the why behind the list.

Each name maps to one fixed hex

The mapping is one-directional and frozen. A handful of concrete examples:

tomato → #ff6347
dodgerblue → #1e90ff
cornflowerblue → #6495ed
crimson → #dc143c
mediumseagreen → #3cb371
rebeccapurple → #663399

You can write any of these in HTML attributes (<font color="tomato">), CSS (color: tomato), SVG (fill="tomato"), or Canvas (ctx.fillStyle = "tomato"). They all hit the same parser path and resolve to the same 32-bit sRGB integer.

The list also carries quirks worth knowing. aqua and cyan are byte-for-byte the same color (#00ffff) because one came from the old HTML 4 "VGA colors" list and the other from X11, and CSS kept both when it merged the two. Same story for fuchsia and magenta (#ff00ff). And every gray/grey pair is identical: darkgray and darkgrey are both #a9a9a9. Pick one spelling and hold it across the codebase, because nothing in the rendering or the byte size differs.

The surprising names

Some entries read like a paint catalog with a sense of humor. dodgerblue (#1e90ff) is named after the Brooklyn Dodgers' uniform blue. gainsboro (#dcdcdc) is a pale grey named after a Thomas Gainsborough painting. papayawhip, blanchedalmond, lemonchiffon, and mistyrose sound like a dessert menu but each maps to a real pastel hex.

The standout is rebeccapurple (#663399). It was added to the CSS spec in 2014 in memory of Rebecca Meyer, the daughter of CSS pioneer Eric Meyer, who died at age six. The web community proposed it, and the spec editors accepted it — the only named color in the list with a personal story attached. It is also the lone addition from CSS Color Module Level 4; everything else predates it by more than fifteen years.

When named colors actually win

Named colors are not a beginner's crutch. They are the shortest readable path in a specific set of situations:

Quick prototypes and demos. When you are sketching a layout, background: mistyrose reads faster than #ffe4e1 and you do not have to leave the keyboard.
Error and status states. background: mistyrose; border-color: salmon for a warning box communicates intent to the next developer who reads the CSS. A hex pair does not.
Code comments and docs. "The call-to-action is in dodgerblue" survives copy-paste and is unambiguous in a way that #1e90ff is not.
Styled emails and <script>-tag widgets where you have no build pipeline and want something legible.

The readability gain is real. A reviewer scanning a diff understands color: crimson instantly; color: #dc143c needs a mental decode or a hover.

When to reach for hex or tokens instead

Here is where named colors lose, and it is worth being honest about it. In my own work I reach for named colors maybe twice a month — almost always in a throwaway admin page or a bug-repro CodePen — and never inside a real design system. The reasons are concrete. The 140 colors are fixed, so you can rarely land on a brand color exactly; crimson is close to a Pantone red but not your Pantone red. Design systems express tint and shade as scales (red-500, red-600), and named colors simply cannot represent that structure. And the HSL "lightness" baked into the list is not perceptually uniform, so a ramp from lightblue to darkblue comes out lumpy rather than smooth.

So the rule I follow: named colors for prototypes, demos, and status states; hex or design tokens for anything that ships as part of a product's visual identity.

Don't trust a named pair until you check contrast

The biggest trap is assuming any two named colors are readable together. They are not. goldenrod text on a cornsilk card looks plausible and clears only 1.6:1 — far under the 4.5:1 floor WCAG AA requires for body text. Swap the text to saddlebrown and you get 5.2:1, which passes.

The names give you no signal about contrast, so verify before you commit. Drop both hex values into the /en/t/color-contrast-checker/ and read the AA / AA Large / AAA verdict directly. The math is fixed (WCAG 2.1 defines contrast as (L1 + 0.05) / (L2 + 0.05) over relative luminance), so a passing pair stays passing — but you have to run it once.

The short version

The named color list is a historical reference that every browser still honors: about 140 entries, each frozen to one hex value, free to write anywhere a color is accepted. Use them for speed and legibility in prototypes, error states, and docs. Skip them for brand colors and design-system tokens, where fixed names and lumpy lightness work against you. And whatever pair you pick, run it through a contrast check before it touches production text. Browse, sort, and copy the full set at /en/t/html-color-names/.

Made by Toolora · Updated 2026-06-13