Named Color Finder

What are CSS named colors?

CSS ships with a fixed list of 148 named colors — human-readable keywords like tomato, slateblue, rebeccapurple and gainsboro — that you can use anywhere a color value is expected. Instead of writing #ff6347, you can write tomato and the browser knows exactly which color you mean.

These names trace back to the early web and the X11 color palette, and they were standardized into CSS. They are convenient, readable and consistent across every browser. The catch is that there are only 148 of them, so most colors you actually use — a brand blue, a specific gray from a design file, a tint pulled from a photo — do not have an exact name. They fall between the named colors.

That is exactly the gap this tool fills. Paste any color and it tells you the closest CSS name, so you always have a readable label even for a color that is not officially named.

How the finder works

Type or pick a color and the tool does three things instantly:

1. Parses your input from HEX, RGB or HSL into a single internal color.
2. Converts everything to CIE Lab, a color space built to model human vision, then measures the perceptual distance (called deltaE) between your color and each of the 148 named colors.
3. Ranks the nearest five, showing each one as a swatch with its name, hex code, a match percentage and the exact deltaE distance.

The closest name is highlighted as the best match, and you can copy any name or hex with one click. There is also a full, searchable reference of every CSS named color below the results — click any swatch to load it as your input.

How to use it

1. Enter a color in the text field — #4f7cdb, rgb(79, 124, 219) or hsl(220, 65%, 58%) all work — or open the color picker.
2. Read the closest matches. The top result is the nearest CSS name; the next four give you good alternatives if the first does not fit your context.
3. Check the score. A high match percentage (and low deltaE) means the name is a near-perfect stand-in; a lower score warns you that no named color is truly close.
4. Copy what you need. Grab the name for documentation and tokens, or the hex for code — and if you need the value in another format entirely, the color converter turns it into RGB, HSL or HSV.
5. Browse the reference. Expand the full list to scan all 148 colors and click any to inspect it.

Everything runs in your browser, so it is instant and private — nothing about your colors is uploaded.

Why "closest name" is genuinely useful

A color name is not just decoration. There are several moments where having the right one saves real time.

• Design handoff. When a designer says "use the steel-blue from the header," a name is far less error-prone than reciting a six-digit hex. The finder turns any color from a mockup into a name everyone can say out loud.
• Naming design tokens. When you build a token system, you need readable, memorable identifiers. Knowing that your brand color is closest to royalblue or mediumseagreen gives you a sensible, non-arbitrary starting point for a token name, and once you've anchored that base color the color palette generator can build a full scheme around it.
• Code review and documentation. border: 1px solid silver reads more clearly in a diff or a style guide than another anonymous hex. The finder confirms whether a value is close enough to a name to use it directly.
• Quick sanity checks. When you inherit a stylesheet full of hex codes, mapping them to the nearest names makes the palette instantly legible.

Why Lab distance beats RGB distance

It is tempting to find the "closest" color by measuring the straight-line distance between two RGB triples. It is simple, but it gives bad answers, because RGB distance does not match how we see.

In RGB, the same numeric gap can look tiny in one part of the spectrum and huge in another. Greens are a notorious example: the eye is extremely sensitive to green, so two greens that are close in RGB can look obviously different, while two dark blues that are far apart in RGB can look nearly identical. A naive RGB match will happily pick a name that is numerically near but visually wrong.

The CIE Lab color space was designed to fix this. It is perceptually uniform, meaning a given distance in Lab corresponds roughly to the same perceived difference no matter where you are in the space. The distance metric, deltaE, was built specifically to answer "how different do these two colors look to a person?" As a rough guide, a deltaE under 1 is imperceptible, under 2–3 is hard to spot, and larger values are clearly different. By matching in Lab, this tool returns the name that actually looks closest, not just the one that is mathematically nearest in RGB.

The full CSS named color reference

The list of 148 names spans the obvious primaries (red, green, blue) and a long tail of evocative names — papayawhip, lightgoldenrodyellow, mediumspringgreen, darkslategray. A few quirks are worth knowing:

• Some names are aliases for the exact same color: aqua and cyan are both #00ffff, and fuchsia and magenta are both #ff00ff.
• Both gray and grey spellings are accepted in CSS for the gray family (gray, darkgray, dimgray, and so on).
• rebeccapurple (#663399) is the newest addition, added to the spec in memory of Eric Meyer's daughter.

Expand the reference in the tool to see every name with its swatch and hex, and click any color to make it your input and explore its neighbors.

One clean hub, not a scattered mess

Most "color name" lookups are buried on ad-heavy pages that either dump a giant static table on you or do a crude RGB match and call it a day. This finder does the perceptual math properly, shows you the top five with honest match scores, and lets you copy a name or hex in one click — with a deep-linkable URL so you can bookmark or share any specific color. No sign-up, no watermark, no upload, and the reference and results live on the same page so you never have to hop between sites.