Color Name Finder
Find the closest named CSS/web color from any hex, RGB, or HSL value with live color preview.
Nearby Colors
What is a Color Name Finder?
The Color Name Finder takes any colour you type and tells you the closest standard CSS named colour. Instead of guessing whether a value is closer to "tomato" or "coral", you get an immediate, objective answer with the exact hex, RGB, and HSL values shown beside it.
The tool accepts several input formats: hex codes in #rgb, #rrggbb, or #rrggbbaa form; rgb(r,g,b) and percentage rgb(r%,g%,b%); hsl(h,s%,l%); and any of the CSS colour names themselves. You can also adjust the R, G, and B number fields directly, and the preview swatch updates as the value changes.
Matching works by converting your colour to RGB and computing the Euclidean distance to each of the 147 CSS named colours. The name with the smallest distance wins. When that distance is below 1, the result is marked Exact, meaning your colour is effectively the same as the named one.
Below the main result the tool lists up to eight nearby colours whose distance is within 100, each shown with its name, swatch, and distance score. This is useful when you want a set of alternatives rather than a single answer, such as when choosing a palette or rounding a value to a memorable name.
Key Concepts
- Named colours — the 147 standard CSS colour keywords.
- Euclidean distance — the straight-line distance between two colours in RGB space.
- Exact match — flagged when the computed distance is below 1.
- Nearby colours — up to eight alternatives within a distance of 100.
- Input formats — hex,
rgb(), percentagergb(),hsl(), or a colour name. - Live preview — a swatch that reflects the current colour as you type.
How to Use Color Name Finder
- Enter a color value — Type a hex code, RGB, or HSL value in the input field, or adjust the R, G, B number fields.
- Check the result — The closest named CSS color is displayed with its name, preview, and exact hex, RGB, and HSL values.
- Confirm an exact match — If the distance is below 1, the result is marked Exact, meaning the color is the named color itself.
- Explore nearby colors — View a list of up to eight other close color names, each with its distance score.
- Use Random or Clear — Click Random to try a new color, or Clear to empty the input and start again.
Color Name Reference
| Input or output | Example | Notes |
|---|---|---|
| 3-digit hex | #f00 | Expanded to #ff0000 |
| 6-digit hex | #ff0000 | Standard hex notation |
| 8-digit hex | #ff000080 | Includes alpha; matched on RGB |
| Decimal RGB | rgb(255, 0, 0) | Channels 0–255 |
| Percentage RGB | rgb(100%, 0%, 0%) | Channels as percentages |
| HSL | hsl(0, 100%, 50%) | Hue, saturation, lightness |
| Color name | red | Any CSS keyword |
| Closest name | Red | Nearest of 147 named colors |
| Distance | 0 | Euclidean RGB distance |
| Exact flag | Exact | Shown when distance < 1 |
| Nearby list | up to 8 | Colors within distance 100 |
Worked Examples
- #ff0000 — the exact named red, shown as
Redwith distance 0 and the Exact flag. - #f00 — expanded to #ff0000, so it also resolves to
Redwith distance 0 and Exact. - rgb(255, 0, 0) — the same colour expressed in decimal RGB, again matching
Redexactly. - hsl(0, 100%, 50%) — the same red via HSL, with the tool converting it to RGB before matching.
- #fe0101 — a near-red whose distance to
Redis tiny; if it stays below 1 it is flagged Exact. - #6b7280 — a muted gray whose nearest name is
DimGray; the larger distance means it is not flagged Exact.
Tips and Common Mistakes
- Watch the distance — a small distance means a trustworthy name, while a large one means the match is only approximate.
- Exact means exact — the Exact flag appears only when the distance is below 1, so treat it as the reliable case.
- Alpha is ignored for matching — an 8-digit hex uses only its RGB channels, so the transparency does not change the name.
- RGB distance is not perceptual — the closest name in RGB space may differ slightly from what the eye calls closest, so use the result as a guide.
- Names are not unique — some colours sit between two names, and the tool simply returns the numerically nearest one.
- Check the nearby list — if the top result feels off, the nearby colours often include a more familiar alternative.
Common Use Cases
Naming a colour is a small task, but it comes up surprisingly often. Here are some of the situations where this tool is most useful.
- Naming a brand colour — find the closest CSS name so a colour can be described in words in documentation.
- Choosing a palette — use the nearby list to find related named colours that go together.
- Cross-checking a value — confirm that a hex you were given really is the named colour you expected.
- Simplifying CSS — replace a hex with a readable keyword when an exact match exists.
- Design handoff — give developers a name they can recognise instead of a raw value.
- Learning colour names — build familiarity with the standard CSS palette by exploring real values.
Frequently Asked Questions
How does the color matching work?
The tool calculates Euclidean distance in RGB color space between the input color and each named color in its database. The closest match is returned as the color name.
What color names are included?
The tool uses the 147 standard CSS named colors, covering the full spectrum from basics like red and blue to obscure entries like papayawhip.
Is this tool free?
Yes, it is completely free with no limitations. All processing happens locally in your browser.
What input formats are accepted?
Hex codes (#rgb, #rrggbb, #rrggbbaa), rgb(r,g,b), percentage rgb(r%,g%,b%), hsl(h,s%,l%), and any CSS color name are all accepted.
What does the Exact label mean?
Exact appears when the Euclidean distance between your color and the nearest named color is less than 1, meaning they are effectively the same color.
What are the nearby colors?
The nearby list shows up to eight named colors whose distance from your input is within 100, each displayed with its own swatch and distance score.
Why might the nearest name surprise me?
Matching uses RGB distance, which measures numeric closeness rather than perceived similarity. Two colors that look different to the eye can still be numerically close.
Is my data sent anywhere?
No. The matching runs entirely in your browser, so the colors you enter never leave your device.