Closest CSS named color finder for any HEX or RGB value
This tool finds the closest CSS named color for any HEX, RGB or HSL value. You enter a color and get the nearest keyword, a perceptual distance score (ΔE), five ranked alternatives and one-click copy buttons. Below the finder you can browse all 148 CSS color keywords. 66Colorful is free, runs in the browser and needs no signup.
People use it to replace a long code such as #3366CC with a readable keyword, to name colors in documentation, or to check whether a brand color is already a built-in CSS name.
How to find the closest CSS named color
You can get a match in a few seconds by typing or picking a color. The result updates as soon as the value is valid.
- Type a value into the Your color field, or click the color swatch to open the picker. Accepted formats are HEX (
#1b6b45or#1b6), a bare RGB triple (27, 107, 69),rgb(),hsl()or a color keyword. - Press Enter to apply a typed value. HEX values update live as you type.
- Check the two halves of the preview: your color on the left, the keyword on the right.
- Read the keyword name, its HEX and RGB values, and the ΔE badge that tells you how close the match is.
- Click the keyword, HEX or RGB button to copy it, or copy the ready-made CSS line.
- Click Random color to try a random value, or use Share link to copy a link that restores your color.
When two keywords share one value, such as aqua and cyan, the result adds a "Same value" line so you know both names are valid.
What does the ΔE score mean for a CSS color match?
The ΔE score measures how different your color looks from the matched keyword. A score of 0 means an exact match, and higher numbers mean a bigger visible difference. The tool uses CIEDE2000, a formula that models human color perception, so the ranking follows what your eyes see rather than raw number differences. You can read more about the idea on Wikipedia's color difference page.
The badge next to the keyword turns the score into a plain label:
| ΔE score | Label shown | What it means for your design |
|---|---|---|
| 0 | Exact keyword | Your color is a CSS keyword. Use the name freely. |
| Under 1 | Virtually identical | Most people cannot see the difference. |
| 1 to under 2 | Very close | Safe to swap in for most interface work. |
| 2 to under 5 | Close | Similar at a glance, visible side by side. |
| 5 to under 10 | Noticeably different | Keep your HEX if the exact shade matters. |
| 10 or more | Approximate | The keyword is only a rough neighbor. |
The five ranked alternatives under the result carry the same score and label, so you can pick the second or third closest name if it suits your naming better.
Worked example: from HEX code to CSS color name
Take the blue #3366CC, which is rgb(51, 102, 204). The nearest keyword is royalblue, which is #4169E1 or rgb(65, 105, 225). The ΔE is roughly 3.7, so the label reads "close".
The next candidates, slateblue and steelblue, score above 10. That gap tells you royalblue is the clear winner and the other names are weak options.
A second case: the orange #FF6B35 lands closest to coral (#FF7F50) at a ΔE of about 4.3, with tomato further away at about 5.9. By contrast, #1E90FF returns dodgerblue at 0, an exact keyword.
color: royalblue; /* #4169E1, ΔE 3.69 from #3366CC */The tool gives you this comment-annotated line so the original value stays in your code for later.
What are CSS named colors and how many exist?
CSS named colors are predefined keywords such as tomato or navy that browsers map to fixed sRGB values. The CSS Color Module Level 4 defines 148 of them, and MDN Web Docs documents how to use them in any property that accepts a color.
The 148 keywords represent only 139 distinct colors. Seven "grey" spellings (such as darkgrey and slategrey) are aliases of the "gray" keywords, and aqua and cyan as well as fuchsia and magenta each share one value.
The list also includes rebeccapurple (#663399), added in Level 4. Keywords are case-insensitive in CSS, so Tomato and tomato work the same.
How aliases are handled in the match
When two keywords share a value, the finder ranks only one of them and shows a "Same value" line naming the other. That keeps the five alternatives from filling up with duplicates. The matching uses the same sRGB values the CSS specification lists.
Browse, filter and export the 148 CSS color keywords
Under the finder, the full keyword reference lets you scan every name as a swatch card. These controls help you narrow the list:
- Search keywords or HEX: type a name like
slateor a value like#ff6347. - Hue family: filter by All, Red, Orange, Yellow, Green, Cyan, Blue, Purple, Pink or Neutral.
- Sort keywords by: Name (A to Z), Hue or Lightness (light to dark).
- Include the 7 grey spellings: untick it to hide the aliases.
- Show WCAG text contrast on swatches: adds contrast information to each card, handy when you plan to put text on a keyword color.
- Format tabs: switch cards between Keyword, HEX, RGB and HSL. Click a card to copy that format, or Shift+click to copy the HEX.
The quick actions bar adds Copy keyword, Copy HEX and Copy list, which copies the visible keywords as "keyword: HEX" lines. Export CSS downloads the visible keywords as custom properties, and Export JSON downloads them as a keyword-to-HEX object. Filters apply to exports, so you can export only the blues, for example.
When should you use a CSS color name instead of HEX?
Use a keyword when readability matters more than a precise shade. Names suit prototypes, teaching material, quick debugging, email snippets and code comments, where color: tomato is easier to read than a six-digit code.
Stick with HEX, RGB or HSL for brand colors and design systems. The 139 distinct keyword colors cover a tiny fraction of the 16.7 million colors that 8-bit sRGB can show, so most brand colors will not match exactly. If you need the numeric form of a keyword, use the HEX to RGB converter, and for a comparison of the two notations read HEX vs RGB.
CSS named color tips and common mistakes
- Do not assume a close match is safe. A ΔE above 5 is visible. If your brand blue becomes a different blue after "simplifying" to a keyword, keep the HEX and use the keyword as a label only.
- Check text contrast after swapping. A small color shift can change a pass into a fail. Run the pair through the contrast checker against the WCAG 2.2 contrast minimum of 4.5:1 for normal text.
- Remember keywords have no transparency. Names like
navyare fully opaque. For see-through colors, usergb()orhsl()with an alpha value. - Do not rely on the name's meaning.
lightgoldenrodyellowandpalegoldenrodare different, andgrayis darker thandarkgray. Check the swatch, not the word. - Pick one spelling. Both
grayandgreywork, so choose one and keep it consistent across your project.
Why a match can look off on your screen
Monitors differ in brightness and calibration, so two close colors may look closer or further apart on another display. The ΔE score is calculated from the numeric values, not from what your particular screen shows. Judge borderline matches on the device your audience uses.
Where to go after you find a CSS color name
If you want a name for a color that is not one of the 148 keywords, the color name finder describes any HEX in plain language. To convert a value between notations, use the color converter, and to turn a chosen color into variables for a project, try the design token exporter. You can also explore named colors with their HEX, RGB and HSL values in the color library.