Color Name Finder — Get Color Name from Hex RGB
Find the closest CSS named color for any hex or RGB value. Instantly match your color to the nearest standard web color name. 100% client-side — your data stays private.
What is a CSS named color? A CSS named color is a keyword the CSS specification maps to one fixed
sRGB value — tomato is exactly #FF6347 and steelblue is
#4682B4. CSS Color Module Level 4 lists 148 such keywords, which collapse to 141 distinct names once
the gray/grey spelling pairs are merged and to 139 distinct colors. Any value in between has no name, so this tool
reports the closest one and how far away it is.
How to Use the Color Name Finder
-
Enter a color — Use the swatch picker, type a hex value such as
#3B82F6, or fill in the R, G and B fields. Hex and RGB stay in sync, so editing one updates the other. - Read the closest name — The result card shows the nearest CSS keyword above the hex value you entered, with a swatch of your color beside it. The keyword is the label; the hex remains your actual value.
- Check the distance number — This is the straight-line distance between the two colors in RGB space. Zero means your value is that named color; the theoretical maximum, black against white, is about 442.
- Copy the format you need — HEX, RGB and HSL are generated for the color you entered, not for the matched name, so copying never silently changes your value.
- Decide whether to use the name — A small distance means the keyword is a safe substitute. A large one means it is only the nearest of 139 — keep your hex value and use the name as a label in comments or documentation.
How the Nearest Color Match Is Calculated
Every CSS keyword is stored as a red, green and blue triple, and your input is converted to the same form. The tool then treats each color as a point in a three-dimensional cube whose axes are R, G and B, each running 0 to 255, and measures the straight-line distance between your point and each of the 141 named points:
d = √((R₁ − R₂)² + (G₁ − G₂)² + (B₁ − B₂)²)The smallest distance wins. Because the cube is 255 units on a side, the largest distance possible is √(255² × 3), about 441.7 — the gap between black and white. A distance of 0 means your value is an exact keyword match. Results are cached per RGB triple, so dragging the picker re-scans the list without recomputing anything it has already seen. All of this happens in JavaScript on this page; no color you enter is transmitted anywhere.
Why RGB Distance Is Not Perceptual Distance
This is the honest limitation of the method. RGB space is not perceptually uniform: a distance of 20 in the green channel looks like a much bigger change than a distance of 20 in blue, because human vision is far more sensitive to green. The consequence is that the mathematically closest keyword is occasionally not the one you would pick by eye, especially among dark colors and desaturated browns, where the named set is sparse.
Color science handles this with CIELAB, a space designed so that equal numeric steps look like equal perceptual steps, and with the Delta E family of difference formulas (CIE76, CIE94 and CIEDE2000) built on top of it. Those give better matches but need a full conversion through the XYZ space for every comparison. Plain RGB distance is used here because it is transparent and predictable: you can verify any result with a calculator, and the distance number tells you directly how much you are giving up.
The 16 Basic Color Keywords
These sixteen names came from HTML 4.01 and CSS Level 1 and are the ones every rendering engine has supported the longest. They are also the coarsest: six of them sit on the extreme corners of the RGB cube, which is why they win matches for strongly saturated inputs.
| Name | Hex | RGB |
|---|---|---|
black | #000000 | 0, 0, 0 |
silver | #C0C0C0 | 192, 192, 192 |
gray | #808080 | 128, 128, 128 |
white | #FFFFFF | 255, 255, 255 |
maroon | #800000 | 128, 0, 0 |
red | #FF0000 | 255, 0, 0 |
purple | #800080 | 128, 0, 128 |
fuchsia | #FF00FF | 255, 0, 255 |
green | #008000 | 0, 128, 0 |
lime | #00FF00 | 0, 255, 0 |
olive | #808000 | 128, 128, 0 |
yellow | #FFFF00 | 255, 255, 0 |
navy | #000080 | 0, 0, 128 |
blue | #0000FF | 0, 0, 255 |
teal | #008080 | 0, 128, 128 |
aqua | #00FFFF | 0, 255, 255 |
Keywords That Share a Color
Several keywords are aliases for identical values, which is why 148 keywords describe only 139 colors. When one of these wins a match, the tool reports a single spelling; the alternatives below are equally valid CSS.
| Reported name | Equivalent keyword | Value |
|---|---|---|
aqua | cyan | #00FFFF |
fuchsia | magenta | #FF00FF |
gray | grey | #808080 |
darkgray | darkgrey | #A9A9A9 |
dimgray | dimgrey | #696969 |
lightgray | lightgrey | #D3D3D3 |
slategray | slategrey | #708090 |
darkslategray | darkslategrey | #2F4F4F |
lightslategray | lightslategrey | #778899 |
When a Name Beats a Hex Code
Named colors are not a compatibility risk — every keyword in Level 4 is supported across current browsers, and the
values are fixed by the specification rather than interpreted. The real question is whether the name communicates
better than the number. In a prototype, a demo, a code example or a chart legend, tomato is easier to
read and remember than #FF6347, and reviewers can picture it without opening a swatch.
In production design work the answer usually flips. The named set was never designed as a palette: it grew out of
the X11 color list, so the names are inconsistent (darkgray is lighter than gray), the
coverage is uneven, and there is no systematic tint or shade relationship between them. A design system wants
values you control, expressed as custom properties or tokens. Use this tool then as a naming aid — find that your
brand blue lands near steelblue and you have a human label for the token, while the hex stays
authoritative.
One name is worth knowing on its own: rebeccapurple (#663399) was added to the specification in 2014 in
memory of Rebecca Meyer, the daughter of CSS author Eric Meyer. It is the only keyword added since the X11 set and
the only one with a documented origin story.
Frequently Asked Questions
They are keywords you can write anywhere CSS accepts a color, such as red, tomato, mediumseagreen or rebeccapurple. Each one maps to one fixed sRGB value defined in the CSS Color Module Level 4 specification, so the rendered result is identical in every conforming browser. They accept no alpha channel — for transparency you need rgba(), #RRGGBBAA or the color-mix() function.
It converts your input to RGB and measures the straight-line (Euclidean) distance to each of the 141 named colors in three-dimensional RGB space, then reports the smallest. The formula is the ordinary distance between two points: the square root of the summed squared differences of the red, green and blue channels. The result is exact arithmetic, not an estimate.
CSS Color Module Level 4 defines 148 keywords. Seven of those are British-spelling duplicates — grey, darkgrey, dimgrey, lightgrey, slategrey, darkslategrey and lightslategrey — leaving 141 distinct names. Two further pairs share values (aqua with cyan, fuchsia with magenta), so the keywords describe 139 unique colors in total.
Because RGB distance is not perceptual distance. The eye is far more sensitive to green than to blue, so two colors that are numerically equidistant can look very different. Matches are weakest for dark colors and muted browns, where the named set has few entries. Color science solves this with CIELAB and the Delta E formulas, but those need a full conversion for every comparison; the distance figure shown here tells you when to be skeptical.
It is the RGB-space distance between your color and the matched keyword, on a scale where 0 is an exact match and roughly 442 is the maximum possible (black against white). Small single-digit values mean the keyword is visually interchangeable with your color on most displays. Large values mean nothing in the named set is genuinely close, and the result should be read as the nearest category rather than a match.
Both are valid and produce identical output; pick one and stay consistent. The gray spellings came first and are what most style guides, linters and design tools emit, which is why this tool always reports them. If your codebase already standardizes on grey, substituting the alias is safe — they are the same keyword to the parser.
No. The keyword table is part of the page, and the conversion, distance search and HEX/RGB/HSL output all run in JavaScript in your browser. Nothing is uploaded, stored or logged, and the tool keeps working with the network disconnected.
Yes — type the keyword's hex into the input and the distance will read 0, confirming the exact value. The reference tables above cover the sixteen basic keywords and the aliased pairs. For converting between HEX, RGB, HSL and other notations in either direction, the Color Converter is the more direct tool.
Use Cases
Naming Design Tokens
Give a brand hex a human label — discovering it sits beside steelblue makes the token name obvious to everyone reading the palette file.
Writing Readable Code Examples
Documentation and tutorials read better with tomato than #FF6347. Check that the keyword you reach for is genuinely close to the color you meant.
Describing a Color in a Bug Report
"The border renders near gainsboro instead of silver" is far easier to triage than two hex strings a reviewer has to picture.
Auditing an Inherited Stylesheet
Paste each stray hex from a legacy sheet to see which ones cluster around the same keyword, then collapse the near-duplicates into a single variable.
Matching a Color from a Screenshot
Sample a pixel from an image, drop the value in here, and get both a name to search for and the distance that tells you how exact the match is.