About the Color Name Finder
Ever had a hex code like #3F51B5 and wondered what to call it? Paste it or use the colour picker and this tool tells you the closest named colour — along with its exact hex value and the next nearest matches — so you can name design tokens, describe colours to clients, or find the standard CSS keyword that approximates a brand colour.
How the colour name is chosen
The finder compares your colour against all 148 named colours defined in the CSS Color specification (the same keywords every browser understands, such as cornflowerblue, tomato, slategray and rebeccapurple). It measures the distance from your colour to each named colour in RGB space and returns the ones with the smallest difference.
Because the match is by nearest distance, you will always get a result even for colours that have no exact keyword. When the distance is zero the hex values are identical and you can safely use the CSS keyword in place of the hex code.
Why colour names matter
- Design systems — naming a palette "Cornflower 500" is more meaningful to a team than "#6495ED".
- Accessibility and documentation — screen readers, style guides and alt text benefit from human-readable colour descriptions.
- CSS shorthand — a named colour is often shorter and clearer in a stylesheet than a hex triplet.
- Client communication — "a slightly darker steel blue" is easier to discuss than raw numbers.
Tips for getting a better match
Named colours cluster heavily around a few hues (there are many greys, blues and pinks, but relatively few oranges and browns), so some inputs will return a match that is visually further away than others. Compare the swatches side by side; if the nearest name is not close enough, the Color Converter can give you the exact HSL or OKLCH values to describe the colour precisely instead. For colour comparisons that better reflect how humans perceive difference, the Color Distance tool calculates Delta E in the LAB colour space.
How to use the Color Name Finder
- 1Enter a colour. Use the visual picker or type a hex code such as #FF7F50 into the text field.
- 2Read the closest match. The nearest CSS named colour appears immediately with its hex code and a swatch for visual comparison.
- 3Check the alternatives. Review the next-closest names if you want a lighter, darker or more saturated option that still has a standard name.
- 4Copy. Copy the hex code or the colour name to use in your CSS, design tool or documentation.
Frequently asked questions
- How many colour names does the finder know?
- All 148 named colours from the CSS Color Module specification, from the basic sixteen (red, blue, gray, etc.) to extended names like lightgoldenrodyellow, mediumaquamarine and rebeccapurple. Because these are standard CSS keywords, every match can be used directly in a stylesheet.
- Can I find a colour name from an image?
- Use the Color Palette Extractor to pull the dominant colours from an image first, then paste the hex value here to get its name.
- Does the tool work with RGB or HSL values?
- The input accepts hex codes. If you have RGB, HSL, LAB or OKLCH values, convert them to hex with the Color Converter tool and paste the result.
- Why is the closest name visually different from my colour?
- Named colours are unevenly spread across the spectrum, so a colour in a sparse region (for example a muted orange-brown) may have no keyword within a small distance. The tool always shows the nearest option and its hex code so you can judge how close the match is.