Nearest CSS Color Name Finder

Enter any hex or RGB color to find the closest CSS named color. Top 5 matches ranked by perceptual distance in LAB color space.

Try these colors:
Enter a color above to find the nearest CSS color names.
Enter a hex or RGB color to find the nearest CSS color.

Browse All 148 CSS Named Colors

How to Find the Nearest CSS Color Name

  1. Enter a color — type a hex color (#RRGGBB or #RGB), an RGB value (rgb(R, G, B)), or use the color picker.
  2. See the top 5 matches — instantly ranked by perceptual distance in LAB color space, from closest to farthest.
  3. Compare swatches — your input color is shown alongside each match so you can visually judge the similarity.
  4. Copy the color name or hex — click the Copy button on any match to copy it to the clipboard.

Why LAB Color Space?

The CIE L*a*b* (LAB) color space was designed in 1976 to be perceptually uniform — meaning equal numerical distances in LAB space should correspond to roughly equal perceived color differences for human observers. In contrast, Euclidean distance in RGB space is technically simple but does not correlate well with human color perception. Two colors with the same RGB distance can look very different or very similar depending on where they fall in the spectrum.

LAB uses three axes: L* (lightness, 0=black to 100=white), a* (green to red), and b* (blue to yellow). This tool converts all colors to LAB space before calculating distance using the simplified Euclidean formula: ΔE = √((ΔL)² + (Δa)² + (Δb)²). This is known as CIE76 — a simplified version of the full CIEDE2000 formula that is accurate enough for most UI applications. A ΔE of 1.0 is roughly the smallest difference a trained observer can detect under controlled conditions.

CSS Named Colors — Background

CSS named colors have a long history. The original 16 HTML 4 colors (black, white, red, green, blue, yellow, cyan, magenta, and 8 others) came from the CGA palette of early IBM PCs. The 140 additional colors were borrowed from the X11 window system's color database, which was defined in the late 1980s. Some names are famously inconsistent — "green" in CSS (#008000) is not the same as the green primary color (#00FF00, which CSS calls "lime"). The CSS Color Level 4 specification clarifies and adds to this list, and modern browsers support all 148 standard named colors.

Using CSS Named Colors in Practice

CSS named colors are primarily useful for readability and prototyping. Writing color: tomato or background: cornflowerblue is more readable than hex codes during development. However, for production UI systems, design tokens and semantic variable names (like --color-primary) are preferred because they allow theme changes without hunting for every color reference. Named colors are also useful in SVG files, where they keep markup human-readable, and in educational contexts when teaching HTML and CSS to beginners.

When naming custom brand colors, some designers use the nearest CSS color name as a starting point, then adjust. The "DevToolbox emerald" (#10b981) is perceptually closest to mediumseagreen — a standard CSS name — but the exact hex values differ. Knowing the nearest name helps communicate about a color informally and gives you a fallback if the exact custom color cannot be used.

Frequently Asked Questions

CSS Color Level 4 defines 148 named colors (plus 'transparent' and 'currentColor'). These include the 16 original HTML colors, the X11 color set, and a few additions. They range from 'aliceblue' (#F0F8FF) to 'yellowgreen' (#9ACD32). This tool displays and searches all 148 of them.
This tool uses CIE L*a*b* (LAB) color space with the CIE76 Euclidean distance formula. LAB is perceptually uniform — equal ΔE values correspond to roughly equal perceived differences. This is more accurate than RGB Euclidean distance, which doesn't correlate well with human color perception.
CSS color names have uneven coverage of the color wheel — some hue ranges have many options clustered together, others have very few. The tool finds the mathematically nearest color in LAB space, which usually matches visual intuition but can surprise you in sparse regions like certain oranges or teals.
Supported formats: #RRGGBB hex, #RGB shorthand hex, rgb(R, G, B) notation, and plain 6-digit hex without the # prefix. The tool auto-detects the format. Named CSS colors are outputs, not inputs. For color format conversion (hex to HSL, etc.), use a dedicated color converter.
An exact match means your input color is identical to a CSS named color (e.g., #FF0000 = 'red', distance 0). A nearest match means your color is close but not identical — the tool finds which of the 148 named colors has the smallest perceptual distance. Exact matches show a distance of 0.