Color Names — From 'That Weird Blue-Green' to 'Teal' in One Search

You are writing CSS and need a specific shade of blue-green. You type teal — too dark. aquamarine — too light. turquoise — close but slightly off. You end up opening a color picker, finding the hex code, and typing #48C9B0. But what do you name the CSS variable? --muted-teal? --sea-foam? --blue-greenish-thing?

Our color names tool maps hex codes to their closest named color. It turns "that specific shade I can see but cannot name" into a human-readable label — useful for CSS variables, design systems, and communicating with designers who think in names, not hex codes.

The surprising usefulness of named colors

CSS supports 148 named colors — from aliceblue to yellowgreen. Most developers know maybe 20 of them. The rest are obscure but occasionally perfect: gainsboro (a light grey), peru (a warm brown), thistle (a pale purple), cornsilk (a yellowish white).

Using named colors in prototypes has a real advantage: readability. background: papayawhip tells you what color it is without looking up a hex code. background: #FFEFD5 tells you nothing until you preview it. For rapid prototyping where you will refine colors later, named colors are self-documenting.

Design system naming conventions

When building a design system, naming colors by their hex code is a maintenance nightmare. --color-1A2B3C means nothing. --color-primary-600 is better but still abstract. --color-slate-700 is best — it communicates both the hue family (slate = blue-grey) and the shade level (700 = relatively dark).

Our color names tool helps you find the right family name. Input #64748B and it returns "slate" or "storm grey" — now you have a semantic anchor for your design token naming. Combine the family name with a lightness scale (50-950, following Tailwind conventions), and your color system becomes both machine-parseable and human-readable.

Real scenarios where color names matter

Communicating with non-technical stakeholders: "make the button #3B82F6" means nothing to a product manager. "Make the button blue, specifically this shade of blue — it is called 'royal blue'" communicates the intent and gives them a reference they can Google.

Writing documentation: "the error state uses crimson (#DC143C) for critical errors and goldenrod (#DAA520) for warnings." Documentation that only lists hex codes is unreadable. Documentation that pairs names with hex codes is skimmable.

Accessibility audits: "the darkgray text on white background fails WCAG AA." Named colors in audit reports make findings easier to discuss and fix than hex-code-only reports.

For picking colors visually, our color picker extracts hex codes from any pixel on your screen. For checking contrast, see our contrast checker. And for the color picker versus contrast checker comparison, read our guide to when you need each tool.