Color Name Finder
Find the closest CSS named color to any hex value — with distance metrics and top 5 matches
Closest Match
Your Color
#6366f1
Closest CSS Color
mediumslateblue
#7b68ee
Color distance (RGB Euclidean): 24 — Good match
Top 5 Closest CSS Colors
Distance (Δ) is the Euclidean distance in RGB color space. Lower = closer match. Max possible distance ≈ 441.
You have a hex color from a design mockup — #6b7280 — and you want to know what it’s closest to in the CSS named color list. Or you’re doing a code review and want to know whether #4169e1 has a more readable CSS equivalent. This tool answers that question instantly.
Paste or pick any hex color and the tool searches all 148 CSS named colors, returns the closest match, and shows you the top 5 ranked by color distance.
How It Works
The tool calculates the Euclidean distance in RGB color space between your input color and every CSS named color. The formula:
distance = √((r₁-r₂)² + (g₁-g₂)² + (b₁-b₂)²)Where r, g, b are the red, green, and blue channel values (0–255). The maximum possible distance is approximately 441 (black to white). A distance below 10 is a very close match; below 30 is a good match.
This approach is fast, deterministic, and sufficient for most practical use cases. Note that human perception is not perfectly linear in RGB space — if you need perceptually accurate color matching, HSL-based or LAB-based distance metrics are more accurate, but for finding the “named color that looks most like this” the RGB approach works well.
All 148 CSS Named Colors
CSS defines 148 named colors, from aliceblue to yellowgreen. These include:
- Basic colors:
black,white,red,green,blue,yellow,cyan,magenta - Extended colors:
coral,salmon,tomato,crimson,firebrick(all in the red range) - Blues:
navy,midnightblue,royalblue,cornflowerblue,steelblue,dodgerblue,deepskyblue,skyblue - Greens:
darkgreen,forestgreen,seagreen,mediumseagreen,springgreen,lime,limegreen,chartreuse - Neutrals:
white,whitesmoke,gainsboro,lightgray,silver,gray,dimgray,darkgray,black
Some named colors have duplicate hex values — gray and grey are identical, as are cyan and aqua, magenta and fuchsia. The tool deduplicates by hex value so you see unique swatches.
How to Use This Tool
- Pick a color using the color picker or type a hex value (with or without
#). - See the closest match in the side-by-side comparison panel.
- Check the distance — 0 means an exact match, higher numbers mean the colors are further apart.
- Browse the top 5 closest matches to see alternatives.
- Copy the CSS name or hex value for the match you want.
Use Cases
Code readability: Replace magic hex values with semantic CSS names when the color is close enough. royalblue is more readable than #4169e1 in a stylesheet.
Design handoff: When a designer specifies a hex, check if it’s close to a standard CSS named color — this can simplify the CSS and improve readability.
Learning CSS colors: Use this tool as a reference to learn what the 148 CSS named colors actually look like by entering colors you already know.
Accessibility analysis: When checking contrast, it helps to know the common name of colors you’re working with.
Color documentation: Writing docs or comments about a color? The named color provides a human-readable label.
Understanding the Distance Metric
The distance value (shown as Δ in the top 5 list) is the Euclidean distance in RGB space:
| Distance | Meaning |
|---|---|
| 0 | Exact match — this hex IS a CSS named color |
| 1–10 | Nearly identical — visually indistinguishable for most purposes |
| 11–30 | Close match — same hue family, slightly different shade |
| 31–60 | Moderate difference — same hue but noticeable difference |
| 61–100 | Different shade — same color family but clearly lighter/darker |
| 100+ | Approximate match only — pick the closest name for documentation purposes |
Frequently Asked Questions
Does this tool include all CSS named colors?
Yes, all 148 CSS named colors defined in the CSS Color Level 4 specification are included. Note that transparent is not included as it has no hex equivalent.
Why are some named colors the same?
CSS includes both American and British spellings for some colors: gray/grey, darkgray/darkgrey, etc. Additionally, aqua and cyan are identical (#00ffff), as are fuchsia and magenta (#ff00ff). The tool deduplicates by hex so you see the unique colors.
Can I use CSS named colors in Tailwind CSS?
Tailwind uses its own color system, not CSS named colors. You can use CSS named colors as values in @apply directives and in arbitrary values like bg-[royalblue], but Tailwind’s palette colors have different names and a more extensive scale. See the Tailwind Color Converter to find the closest Tailwind color.
Is RGB-based distance perceptually accurate?
Not perfectly. Human vision is more sensitive to green than red, and much more sensitive to both than blue. More advanced metrics like CIELAB ΔE give perceptually uniform distances. For the purpose of finding a “named color label” for documentation, RGB distance is sufficient.
Related Tools
- Color Converter — convert between HEX, RGB, and HSL
- Tint & Shade Generator — generate 10 tints and 10 shades from a base color
- Color Palette Generator — generate full color palettes from a base color
- Tailwind Color Converter — find the closest Tailwind CSS color
- Color Contrast Checker — check WCAG contrast ratios