Color Name Finder: Find Closest Named Color from HEX, RGB
Color name finder online: find the closest named CSS color from any HEX or RGB value, with swatches, preview, and color families.
Updated 2026-08-16
Related Tools
Color Converter: HEX, RGB, HSL, HSV, CMYK & Picker
Gradient Generator: Create CSS Linear & Radial Gradients
WCAG Contrast Checker: Check Color Accessibility Online
Favicon Generator: Website Icon ICO/PNG/SVG Maker Online
HEIC to JPG Converter: iPhone Photos to JPG Online
HEIC to PNG: Convert iPhone HEIC Photos with Transparency
Features
- Find the closest named CSS color for any HEX or RGB value with similarity percentage
- Browse a complete library of 140+ CSS named colors with visual swatches and hex codes
- Search color names by keyword to quickly find the color you are looking for
- Real-time color matching updates as you type or pick a color from the color picker
- View top 8 nearest matches ranked by color distance for more accurate color identification
- Display color preview alongside the matched named color for visual comparison
- See complete color details: HEX, RGB, and HSL values for both input and matched color
- Click on any named color in the gallery to instantly set it as your input color
- Clean tab-based interface: Find tab for color matching, Browse tab for exploring all colors
- Supports both shorthand (#FFF) and full (#FFFFFF) hex color formats
- Copy any color's hex, RGB, or HSL value with a single click for use in your projects
- Works entirely in the browser with no data uploaded to any server
How to Use
- 1Type a hex code (e.g., #FF5733) or RGB value (e.g., rgb(255, 87, 51)) into the input field to find the closest named color
- 2Use the native color picker by clicking the color swatch next to the input field to select a color visually
- 3Read the matched color name and its similarity percentage to see how close the match is
- 4Compare the input color preview against the matched named color swatch to verify the match visually
- 5Scroll through the nearest matches section to see alternative named colors ranked by proximity
- 6Click on any color name in the Browse tab to set it as your active color and view its details
- 7Use the search bar in the Browse tab to filter colors by name: type 'blue' to see all blue shades
- 8Copy color values (HEX, RGB, HSL) to your clipboard for use in CSS, design tools, or code
Frequently Asked Questions
How accurate is the color name matching?
This color name finder uses Euclidean distance in RGB color space to find the closest named CSS color. The similarity percentage shows how close the match is on a scale of 0-100%. While RGB distance is a simple geometric measure, it provides good results for everyday color identification needs.
How many named colors are included?
The tool includes all 148 standard CSS named colors as defined in the CSS Color Module Level 4 specification. These cover the full spectrum from basic colors like Red and Blue to more specific shades like MediumSlateBlue and PaleGoldenrod.
What input formats are supported?
You can input colors as hex codes (#FF5733 or #F53 shorthand) or RGB values (rgb(255, 87, 51)). You can also use the built-in color picker to select a color visually, which will automatically update the input field.
Can I search for colors by name?
Yes, switch to the Browse tab and use the search bar to filter the color library by name. For example, typing 'blue' will show all named colors containing 'Blue' in their name, from LightBlue to MidnightBlue.
Why is my color not matching exactly?
Not all colors have a named CSS equivalent. The tool finds the closest match from 148 named colors. For exact color specification, use the HEX or RGB values directly. The input color preview always shows your exact color.
How can I use the matched color name in my CSS?
All 148 CSS named colors are valid in CSS. You can use the matched name directly in your stylesheets. The Browse tab shows the exact name and hex value for each color.
Can I find a color name from an image?
Not directly: the tool matches colors, not images. To name a color that appears in a picture, sample it first: use the browser DevTools eyedropper on a webpage, or a screenshot tool with a picker, then paste the hex or RGB value here. The color picker in this tool is for selecting colors visually, not for reading them off an image.
Is there an app or browser extension version?
No, this is a web tool, so there is nothing to install. The matching runs entirely in your browser and the page works offline after loading, which covers most quick-reference needs. Bookmark it and it behaves like a local app.
What is the color distance metric used?
The tool uses Euclidean distance in the RGB color space. The distance is calculated as the square root of the sum of squared differences between the red, green, and blue components. This is normalized to give a similarity percentage.
How do designers use this tool?
Designers use it to quickly name colors from a brand palette for documentation, find CSS equivalents of colors used in mockups, or discover alternative shades with similar visual characteristics.
What's the difference between this and a color picker?
A color picker lets you select a color and get its hex/RGB values. This tool goes further by telling you what that color is called in CSS, making it easier to discuss and document colors with your team.
Can I get the HSL value of a color?
Yes, the tool displays HEX, RGB, and HSL values for both your input color and the matched named color. HSL values are useful for understanding the hue, saturation, and lightness characteristics.
My color matched to a name I have never heard of. Why such an obscure match?
The library only contains the 148 standard CSS names, and the matcher picks the geometrically nearest one in RGB space. For colors that sit between familiar names, the nearest entry can look obscure: a pale teal may come back as MediumAquamarine. Check the similarity percentage and the top-8 nearest list for something you recognize; if nothing fits, treat the closest name as a working label, not a verdict.
Other sites give my color fancier names. Who is right?
No single authority names colors. This tool uses the 148 standard CSS names; other sites use X11, XKCD, or Name That Color databases with thousands of entries, and names like 'Cadbury Purple' are marketing labels rather than standards. For documentation, pair the CSS name with the exact hex value: the hex is the only part that is unambiguous.
The similarity is only 60-70%. Can I still trust the match?
As a working label, yes. With only 148 CSS names, most arbitrary colors land between two familiar names: a 60-70% similarity simply means no exact name exists. Check the top-8 nearest list for something you recognize, and always pair the name with the exact hex when it matters. For communication, the hex is the ground truth; the name is shorthand.
I typed a malformed value (missing #, extra spaces). Will it break anything?
No, invalid input is simply ignored or flagged: the matcher only runs on a parseable color, and the input shows a validation hint instead of a result. Nothing is stored or uploaded, so there is nothing to undo. Re-enter the value as #RRGGBB, #RGB, or rgb(r, g, b) and the match appears instantly.