Free CSS Color Name Finder

How It Works

1. Enter a color value: type or paste any hex code (#3b82f6), RGB value, HSL, or click the color picker to choose a color visually.
2. Get the color name: the closest named CSS color, Pantone reference, and human-readable name are displayed instantly.
3. Explore nearby colors: see a palette of similar named colors to find the best match or alternative for your design.

Why Use Color Name Finder?

When working with design systems, accessibility documentation, or client communications, having a human-readable name for a color is far more useful than a hex code. "Cornflower Blue" communicates clearly; "#6495ed" does not. This tool bridges the gap between machine color values and human color names, helping designers document palettes, explain color choices, and find standard CSS color names for their hex values.

Features

• Closest CSS color name: finds the nearest named CSS color (from the full 148-color CSS named color list) to any hex or RGB value.
• Multiple input formats: accepts hex (#rrggbb), RGB, HSL, and HSV color values.
• Color picker: use the native color picker for visual selection.
• Nearby colors: shows similar named colors to help you find alternatives.
• Color metadata: displays the color's hue, saturation, lightness, and perceived brightness.

Frequently Asked Questions

How does it find the nearest color name?

The tool calculates the perceptual distance between your color and all named CSS colors using the CIEDE2000 color difference formula, which closely matches how humans perceive color differences. The closest match is returned as the name.

Are these the same as CSS color keywords?

Yes. The tool includes all 148 standard CSS named colors (from the CSS Color Module Level 4 specification) like "rebeccapurple", "dodgerblue", and "tomato". These can be used directly in CSS instead of hex values.

What if my color has no exact name?

Most colors do not have an exact CSS name. The tool returns the perceptually closest named color and shows the color difference (delta E) so you know how close the match is.

From X11 to CSS Color Module Level 4: the long road to «rebeccapurple»

The CSS named colors most people use today are inherited from the X Window System colour list (rgb.txt), which was assembled at MIT for the X11 graphical environment in 1986. The list grew organically over the next decade, packed with whimsical and obscure names like «papayawhip», «peachpuff», and «papayawhip». When Mosaic (1993) and then Netscape Navigator (1994) standardised colour in HTML, they kept a subset of the X11 names. CSS1 (December 1996) formalised just 16 named colours matching the original VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. HTML 4 (1997) added «orange» as a 17th. CSS2.1 (June 2011) kept the 17. CSS3 Color Module (June 2014, finalised 2018) added the rest of the X11 names, bringing the total to 147. In June 2014, the colour «rebeccapurple» (#663399) was added to honour Eric Meyer's daughter Rebecca who had died of brain cancer; she had said purple was her favourite colour. It was added to CSS Color Module Level 4, bringing the total to 148. The hex value #663399 is the only CSS named colour added in memory of a specific person.

CSS colour beyond named colours: oklch, lab, color()

Named colours still cover only one corner of what modern displays can show. CSS Color Module Level 4 (Candidate Recommendation, current draft) introduces a much wider set of colour syntaxes. lab() and lch() let you specify colours in CIE Lab and LCh, which are perceptually uniform colour spaces. oklab() and oklch() (Björn Ottosson, 2020) are improved versions that handle bright saturated colours better; oklch(70% 0.15 240) is a vivid sky blue. color(display-p3 1 0.5 0) gives access to the wider P3 colour gamut that modern iPhones, iPads, and Macs can display, about 25% more saturated than the sRGB that named colours are limited to. Relative colour syntax (oklch(from blue calc(l - 10%) c h)) lets you derive one colour from another. Browser support for all four colour functions reached >90% in 2024. For 2025-era designs, use named colours for prototyping, then port to oklch() for production palettes that work across the colour gamut spectrum.

How «closest colour» is actually computed

The «distance» between two colours is not a single concept. Different formulas give different answers and they each fit different use cases.

• Euclidean distance in sRGB. sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²). Fast, but does not match human perception, two colours that look identical can be far apart in RGB and two colours that look very different can be close. Avoid for «closest name» queries.
• Delta E CIE76. Same Euclidean formula but in CIE Lab space, which is roughly perceptually uniform. Roughly, not exactly. Good first approximation; ΔE ≤ 2.3 is considered «just noticeable» under controlled conditions.
• Delta E CIEDE2000. The current industry standard, published by the CIE in 2001. Adds corrections for lightness, chroma, and hue rotation that better match how humans actually perceive colour differences. ΔE2000 ≤ 1 is imperceptible to most observers; ≤ 5 looks like a similar colour. This tool uses CIEDE2000 for the «closest match».
• Euclidean distance in OKLab. Björn Ottosson's 2020 colour space is designed so plain Euclidean distance approximates ΔE2000 closely. Faster than ΔE2000 and the perceptual quality is similar. Increasingly the default in design tooling.

Where naming colours actually helps

• Design system documentation. «Primary action: Royal Blue (#4169e1)» reads better than just a hex value in design specs and brand guidelines.
• Client communication. «Let's use coral and steel blue» works in a meeting; «#ff7f50 and #4682b4» does not. The names anchor the conversation before you commit to exact values.
• Accessibility audits. When documenting which colours fail WCAG contrast against a background, having human names makes the audit reports usable by non-developers.
• Legacy code translation. Old CSS files often use named colours. When migrating to design tokens or a custom palette, you need to know which exact colours «lightseagreen» and «mediumaquamarine» map to.
• Quick prototypes. Typing background: tomato is faster than picking a hex from a colour wheel. Named colours are surprisingly good defaults for sketching layouts before final colours are chosen.
• Naming brand colours. If your brand red is close to crimson (#dc143c), calling it «Brand Crimson» internally is more memorable than «Red 8».
• Swatch matching. Designers paste a colour sampled from a photograph or screenshot and ask «what colour is this near?» to start a palette from a real-world reference.

Mistakes and surprises with CSS named colours

• gray vs grey. CSS accepts both spellings, but the X11 list originally only had «gray». «grey» was added later. lightgray and lightgrey are aliases, same colour. Stick to one spelling in a codebase.
• «dark» variants are not always darker than the base. darkgray (#a9a9a9) is actually lighter than gray (#808080), a famous historical quirk of the X11 list that CSS inherited. Same trap with darkgrey.
• aqua and cyan are the same colour. Both are #00ffff. CSS includes both as legacy aliases. fuchsia and magenta are also identical (#ff00ff).
• «orange» is a CSS named colour but «pink» variants are different. orange = #ffa500. But there is no single «pink», CSS has pink, lightpink, hotpink, deeppink, palevioletred, all noticeably different.
• «Closest colour» depends on what your brain thinks colour is. Two people sampling the same paint chip can pick different names. CIEDE2000 captures average perception, not yours. Always check the swatches visually rather than trusting just the distance number.
• Named colours are all sRGB. The CSS named colours are defined as 8-bit sRGB triples. On a P3 or BT.2020 display, vivid colours like tomato and fuchsia can look duller than the same hue specified in color(display-p3 ...). For prototypes, fine; for production on modern hardware, port to wide-gamut syntax.
• Named colours alone do not pass accessibility checks. yellow on white is unreadable; red on black is borderline. The named status of a colour says nothing about contrast. Always pair a colour pick with a WCAG contrast check.

More frequently asked questions

Who actually picked the names like «papayawhip» and «peachpuff»?

No single person; the X11 rgb.txt file grew across multiple contributors at MIT and other Unix vendors in the late 1980s. Many names came from Sinclair Paints and other paint catalogues of the era. The naming is informal and inconsistent on purpose, contributors named colours after objects they had on their desk or out their window. There was no central committee. When CSS3 adopted the X11 list wholesale in 2014, all the quirks came with it.

Should I use rebeccapurple in production?

Browser support is universal since 2014, so it works everywhere. It is exactly equivalent to #663399. Use whichever name reads better in your code; «rebeccapurple» is a small but visible tribute on every page that uses it.

What's the difference between CIEDE2000 and the simpler ΔE formulas?

ΔE76 (Euclidean distance in CIE Lab) is fast and gives reasonable answers but underestimates differences in saturated colours and overestimates in dark colours. CIEDE2000 adds five correction terms (for lightness, chroma, hue rotation, and two cross-terms) that fit empirical data on how people actually perceive colour differences. The fix is significant; the same pair of colours can give ΔE76 = 4 and ΔE2000 = 2 (very different perceptual verdict). For «is this colour close enough to that one», use ΔE2000. For batch processing where speed matters, OKLab Euclidean distance is a fast approximation.

Can I add my own custom colour names?

Not as CSS keywords, the named colour list is fixed by the spec. But CSS Custom Properties (variables) give you the same ergonomics: :root { --brand-coral: #ff7f50; } then color: var(--brand-coral). Design tokens are essentially this idea formalised, and modern design systems use them universally.

Is my colour data sent anywhere?

No. All colour conversion and distance calculation runs in your browser. Open the Network tab in DevTools and pick a colour, you will see zero outbound requests. Safe for unreleased brand colours or any internal palette work.