CSS Color Names — coral vs #FF7F50 in Code Review
PR comment: “Please use coral, it’s more readable.” Designer reply: “That’s not our coral.” Both are right. CSS named colors are a shared vocabulary — and a blunt instrument for brand systems.
Names are aliases, not a brand palette
| Name | Hex | Notes |
|---|---|---|
coral | #FF7F50 | Warm orange-pink |
tomato | #FF6347 | More red |
salmon | #FA8072 | Softer |
orange | #FFA500 | Classic web orange |
dodgerblue | #1E90FF | Not “our blue” |
Look up mappings with a color name search when a teammate speaks in names and Figma speaks in hex.
What belongs in the codebase
Docs / demos: color: darkorange; is fine.
Tokens / production:
:root {
/* closest CSS keyword: coral — brand token is slightly darker */
--color-accent: #f5673d;
}Why hex/OKLCH wins in tokens: precise diffs, native apps and email do not share CSS names, design tools export hex/RGB, and invented names like brandBlue are not CSS keywords.
Communication pattern
- Designer: “coral-ish accent from the moodboard”
- Eng: map to nearest named color or exact hex from the file
- Commit the hex; mention the name in a comment if it helps humans
When someone pastes #E85D4C, nearest-name search (“closer to tomato than coral”) speeds standups — still commit #E85D4C. If two names are equally close, document “custom brand red” instead of a misleading keyword.
Email, system colors, and lint
HTML email and many PDF renderers want 6-digit hex. System colors (Canvas, ButtonText) track the OS — do not confuse them with X11 names like rebeccapurple.
Practical lint: allow named colors in markdown examples; disallow them in tokens.css. Prefer OKLCH for new systems if you already use modern color pipelines.
Twenty different named reds (tomato, crimson, indianred…) for the same intent is drift, not readability. Collapse to tokens early. Named colors also do not pass contrast automatically — check pairs after you pick.
Decision guide
| Situation | Use |
|---|---|
| Teaching CSS basics | Named colors |
| Slack color chat | Name + hex |
| Production tokens | Hex / OKLCH |
| Matching a screenshot | Eyedrop hex, optional name for chat |
Agree on a glossary (token name + swatch + hex + optional nearest keyword). Readable PRs matter; precise pixels matter more. Use names to talk; ship numbers to users.
Historic quirks worth knowing
rebeccapurple (#663399) exists as a memorial name — fun in demos, odd in brand tokens. gray / grey are identical; pick one spelling in docs. Some “names” people remember from old paint programs are not CSS keywords; always verify before teaching juniors to type them into production files.
When converting design PDFs that say “use SkyBlue,” confirm whether they meant the CSS keyword (#87CEEB) or a brand spot color with the same English word. The collision is common and expensive.
Accessibility rename trap
Renaming red to tomato does not fix contrast. If a review asks for “friendlier named colors,” separate that from the a11y task. Fix ratios with lighter/darker tokens; use names only as optional comments beside the final values.
Keep a tiny cheatsheet in the design-system repo: ten brand hexes with optional nearest CSS names for chat. That single file prevents half of the “just use coral” review comments without polluting runtime CSS.
OKLCH migration
New design systems increasingly store OKLCH and derive hex for older browsers. Named CSS colors remain a teaching aid — production tokens stay numeric and documented.