What Is the Name of That Color? A Field Guide to CSS Color Naming

CSS has 148 named colors. "Tomato" is one of them. "Rebecca" is one of them (a purple, named after the daughter of a web pioneer). "Papayawhip" is one of them. "Burlywood" is one of them. The named colors are a mix of the obvious (red, blue, green), the standard (gray, lightgray, darkgray), the specific (firebrick, seagreen, slateblue), and the whimsical (mistyrose, peachpuff, lavenderblush). This post covers what they are, when to use them, when not to use them, and how to find the right name for a color you can see.

The four ways to write a color in CSS

CSS gives you four syntaxes for the same color. They are interchangeable — a color is a color regardless of how you write it.

HEX (six-digit notation)

The most common. Six hex digits, two each for red, green, blue. #FF6347 is tomato. The shorthand (three-digit) is also allowed: #F64 is the same color as #FF6644. The shorthand only works when each pair of digits is the same character.

Pros: precise, compact, universally supported. Cons: not human-readable (you cannot look at #FF6347 and know it is orange-red), no way to express transparency without switching syntax.

RGB (and RGBA)

Three numbers from 0 to 255, one each for red, green, blue. rgb(255, 99, 71) is tomato. The fourth parameter (alpha, 0-1) is optional: rgba(255, 99, 71, 0.5) is 50% transparent tomato.

Pros: precise, supports transparency. Cons: not human-readable, no perceptual relationship between the numbers and the color.

HSL (and HSLA)

Three numbers: hue (0-360, the position on the color wheel), saturation (0-100%, the intensity), lightness (0-100%, the brightness). hsl(9, 100%, 64%) is tomato. Hue 0 is red, hue 60 is yellow, hue 120 is green, hue 240 is blue, hue 300 is magenta. The fourth parameter (alpha) is optional.

Pros: human-readable — you can predict what the color looks like from the numbers. Easy to create variations (same hue, different lightness) without picking a new color. Cons: the human-readability degrades when you go outside the standard "saturated color" range; very light or very dark colors can be ambiguous in HSL.

Named colors

148 names that map to specific colors. tomato, coral, salmon, rebeccapurple, and so on. The full list is in the CSS specification and is universally supported in every browser.

Pros: human-readable, memorable, useful for prototypes and documentation. Cons: only 148 of them, which is a tiny fraction of the colors humans can perceive. Cannot be used to express a specific brand color unless the brand happens to match a name.

When to use which

For real design work, the breakdown:

• HEX. Default for colors that need to match a brand spec or a designer-supplied palette. Precise, universally understood, easy to copy from a color picker.
• HSL. Default for colors you are choosing yourself or for design tokens. The human-readable form makes variations obvious: hsl(220, 80%, 50%) and hsl(220, 80%, 60%) are clearly the same hue, different lightness.
• RGB / RGBA. Default when you need transparency, or when the color is being computed (e.g. rgba(255 * opacity, ...)).
• Named colors. Prototypes, documentation, demo code, and the occasional flourish. Useful in places where the exact color does not matter but a human-readable name helps. Avoid for production colors that need to match a specific brand.

The HEX to RGB and RGB to HEX tools convert between the formats. The Color Picker lets you choose a color visually and gives all four syntaxes. The Color Name Finder takes a HEX value and returns the closest CSS named color.

Why "tomato" looks the way it does

The CSS named colors are a mix of art history, science, and whimsy. Some of the more interesting ones:

• tomato (#FF6347) — A red-orange, the color of a ripe tomato. The name is more memorable than the HEX.
• rebeccapurple (#663399) — A purple named after Rebecca Alison Meyer, the daughter of web pioneer Eric Meyer. She died of brain cancer at age 6 in 2014, and the color was added to the CSS specification in her memory. It is one of the few CSS named colors with a personal story behind it.
• papayawhip (#FFEFD5) — A pale orange, named for the inside of a papaya.
• burlywood (#DEB887) — A tan-brown, named for the color of unfinished wood.
• firebrick (#B22222) — A dark red, named for the color of fired brick.
• seagreen (#2E8B57) — A medium green, somewhere between sea and forest.
• aliceblue (#F0F8FF) — A very pale blue, named for Alice Roosevelt Longworth.

The 148 named colors are not evenly distributed across the color space. There are far more reds and oranges than purples, and the named greens cluster around specific shades that humans find pleasant. The 148 were chosen for a mix of utility and memorability, not for spectral coverage.

The 12 most useful named colors

For most design work, you will end up using the same dozen or so named colors over and over. The most useful list, in rough order of frequency:

• white (#FFFFFF) and black (#000000) — The two anchor colors. The most common foreground and background in any design.
• gray (#808080), lightgray (#D3D3D3), darkgray (#A9A9A9), silver (#C0C0C0), gainsboro (#DCDCDC) — The gray family. For borders, dividers, secondary text, disabled states.
• red (#FF0000), green (#008000), blue (#0000FF), yellow (#FFFF00) — The four primary colors. Used for traffic-light states (error, success, info, warning) and accent colors.
• transparent — Not a color but a special keyword. Renders the element with no fill, allowing the parent's background to show through. Useful for borders, outlines, and hover states.
• currentColor — Not a color but a special keyword. Refers to the element's color property, which is the inherited text color. Useful for SVG icons and borders that should match the text color.

The other 130+ named colors are mostly used for prototypes, documentation, or specific aesthetic effects. The 12 above cover 90% of real usage.

How to find the name of a color you can see

The common need: you see a color somewhere (a screenshot, a photograph, a competitor's site) and you want to know what it is called. The workflow:

1. Pick the color from the image. The Image Color Picker drops an image and lets you click any pixel to get its HEX value.
2. Look up the closest CSS named color. The Color Name Finder takes a HEX value and returns the closest CSS named color, with the exact distance in RGB space.
3. Use the HEX for precise work, the name for documentation. "The button background is #FF6347 (tomato)" reads better than "The button background is #FF6347" alone.

The whole process runs in the browser. The image and the HEX stay on your device; the lookup is local. Nothing is uploaded, nothing is logged.

Why named colors are not enough for real design

148 colors sounds like a lot, but the design space is much larger. A modern UI might use 50+ distinct shades of a single color (light backgrounds, hover states, focus rings, dividers, error states, success states, primary buttons, secondary buttons, disabled states). The named colors do not have the resolution to cover all of these.

The solution: a design token system, where colors are defined as variables and used by name. The names are project-specific ("color-bg-subtle", "color-text-primary", "color-accent-hover"), not CSS named colors. The values are HEX or HSL. The combination gives you the human-readability of named colors with the precision of HEX.

For a single project, the token list is in the CSS or in the design tool (Figma, Sketch, Adobe XD). For a multi-project design system, the tokens are part of the library and can be reused across projects.

Accessibility: the contrast check

A color name does not tell you whether the color is readable against its background. The accessibility check is the contrast ratio, defined by the WCAG (Web Content Accessibility Guidelines). The minimum is 4.5:1 for body text, 3:1 for large text, 3:1 for UI components.

The Contrast Checker takes a foreground and background color and shows the ratio plus a pass/fail for WCAG AA and AAA. The most common failure: a "subtle" gray text on a white background that looks elegant but does not pass the contrast minimum. The fix is usually to darken the gray until the ratio is 4.5:1 or better.

Named colors are not exempt from this check. "Lightgray" on "white" is a 1.5:1 contrast — invisible to many users. The color name does not make the color accessible; the contrast ratio does.

The CSS named colors cheat sheet

The full list of 148 named colors is in the CSS specification; here are the categories that are most useful:

• The grays (10): white, snow, honeydew, mintcream, azure, aliceblue, ghostwhite, whitesmoke, beige, linen, lightyellow, lightcyan, lavender, mistyrose, seashell, cornsilk, oldlace, ivory, floralwhite, antiquewhite, papayawhip, blanchedalmond, bisque, peachpuff, navajowhite, moccasin, wheat, burlywood, tan, khaki, palegoldenrod, lightgoldenrodyellow.
• The reds (15): indianred, lightcoral, salmon, lightsalmon, coral, tomato, orangered, red, crimson, firebrick, darkred, maroon, brown, darkred, mistyrose, peachpuff, papayawhip.
• The oranges (8): orangered, tomato, coral, lightsalmon, salmon, sandybrown, peru, chocolate, saddlebrown, sienna.
• The yellows (8): gold, yellow, lightyellow, palegoldenrod, khaki, darkkhaki, goldenrod, darkgoldenrod, peru.
• The greens (20): yellowgreen, greenyellow, chartreuse, lawngreen, lime, limegreen, palegreen, lightgreen, mediumspringgreen, springgreen, mediumseagreen, seagreen, forestgreen, green, darkgreen, darkolivegreen, olivedrab, olive, darkseagreen.
• The cyans and teals (8): mediumaquamarine, aqua, cyan, lightcyan, paleturquoise, aquamarine, turquoise, mediumturquoise, darkturquoise, lightseagreen, cadetblue, darkcyan, teal.
• The blues (20): lightsteelblue, powderblue, lightblue, lightskyblue, skyblue, deepskyblue, dodgerblue, cornflowerblue, steelblue, royalblue, blue, mediumblue, darkblue, navy, midnightblue, slateblue, mediumslateblue, darkslateblue, blueviolet, indigo.
• The purples and magentas (15): lavender, thistle, plum, violet, orchid, fuchsia, magenta, mediumorchid, mediumpurple, blueviolet, darkviolet, darkorchid, darkmagenta, purple, rebeccapurple, indigo, slateblue, mediumslateblue.
• The browns (10): saddlebrown, sienna, chocolate, peru, rosybrown, sandybrown, burlywood, tan, navajowhite, wheat.

The full 148 are listed in the CSS Color Module Level 4 specification. The categories above are the most-used groups; the rest are mostly redundant with one of these.

How to use the Color Name Finder

1. Open the Color Name Finder.
2. Type a HEX value (e.g. #FF6347) or pick a color from the swatches.
3. The tool returns the closest CSS named color, the exact RGB distance, and a list of nearby named colors sorted by distance.

The lookup is local. The HEX and the named-color result stay in your browser; nothing is uploaded. For most uses, this is the right tool for finding the right name for a color you have.

When to reach for named colors in production

Despite their charm, named colors are not a production default. The right time to use them is:

• Prototypes. "background: tomato" is faster to write than "background: #FF6347" and conveys the intent just as well.
• Documentation. "The button is tomato" reads better than "The button is #FF6347" when you are explaining a design.
• Demo and example code. Named colors make the example readable without losing meaning.
• The specific named colors that match a brand. Some brand palettes happen to match named colors. Most do not.

For production design tokens, use a custom system. The named colors are a starting point, not a destination.