HEX to Colortone Converter

About the HEX to Colortone Converter

What is HEX to colortone conversion?

A HEX code like #3B82F6 tells a screen exactly which color to paint, but it tells a person almost nothing. A colortone is the human-readable side of that, a named color such as "Cornflower Blue", "Terracotta", or "Sage". Since HEX can describe more than 16 million colors and named colors number in the hundreds, converting HEX to a colortone is a match rather than an exact swap. This tool finds the named colortone that sits closest to your HEX and tells you how close it is.

The matching runs on CIEDE2000, the current industry standard for color difference. Your color and every colortone are converted into CIE Lab space, then compared with a formula that corrects for the quirks of human vision, including the fact that we are far more sensitive to shifts in blue than in yellow. A plain RGB distance would call two colors similar that clearly are not; CIEDE2000 does not. The result is the ΔE score you see on the match.

The library holds 279 colortones, and 139 of those are official CSS color keywords. That matters if you are writing code rather than picking paint, so every match is labeled. A blue "CSS" badge means you can type the name straight into a stylesheet, and the toggle in the input panel restricts matching to those names only.

How to Use This Tool

1. Enter your color. Type a HEX code, paste an rgb() or hsl() value, type a CSS color name, click the swatch for your system picker, or lift a color off your screen with the eyedropper.
2. Read the closest colortone. You get its name, HEX, RGB, and a ΔE score with a plain-English rating from "identical" to "approximate".
3. Restrict it to CSS if you need to. Tick "Only match names you can use in CSS" and the tool ignores every name that is not a valid CSS keyword.
4. Compare the runners-up. The grid at the bottom shows the next closest colortones. Click any one to load it and see its own match.
5. Build variations. The tint, tone, and shade ramps give you lighter, grayer, and darker versions of your color. Click a swatch to make it the new input.

Common Use Cases

• Naming colors in a design system: Turn a raw HEX into a name a team can actually talk about in a spec or a Figma library.
• Writing readable CSS: Find out whether a color is close enough to a CSS keyword to use the keyword instead of the HEX.
• Describing a color to a client or supplier: "Roughly terracotta" travels better over email than #E2725B.
• Identifying a color from a screenshot: Use the eyedropper on any pixel and get a name for what you are looking at.
• Building a palette: Take the matched colortone and generate its tints, tones, and shades for hover states, backgrounds, and borders.

Going the other way? Use the Colortone to HEX converter to look up any named color, or try the HEX to RAL converter for paint and coatings. You can also browse every one of our free color tools.

Frequently Asked Questions

What is a colortone?

A colortone is simply a named color, a human-readable label such as "Emerald", "Mustard", or "Cornflower Blue" attached to a specific HEX value. It is the opposite of a HEX code, which is precise but unreadable. This tool uses a library of 279 colortones covering the CSS color keywords plus widely used design, paint, and print color names.

Is a HEX to colortone conversion exact?

Usually not, and that is expected. There are over 16 million HEX values and only a few hundred established color names, so the tool returns the nearest colortone rather than a perfect match. The ΔE score tells you exactly how close it landed. If you enter a HEX that is on the list, such as #FF7F50, you get an exact hit with ΔE 0.

What does the ΔE (Delta-E) number mean?

ΔE measures how different two colors look to a person, not how different their numbers are. Under 1 means the difference is essentially invisible. Between 1 and 2 you would need to look closely to spot it. Between 2 and 5 the colors are clearly related but distinguishable, and above 10 they read as different colors. We calculate it with CIEDE2000, the most accurate of the published formulas.

Which color names can I use directly in CSS?

139 of the 279 colortones here are official CSS color keywords, and each one is flagged with a CSS badge showing the exact keyword to type, such as rebeccapurple or darkslategray. The rest are common design and paint names with no CSS equivalent, so use their HEX value instead. Tick the CSS-only toggle to hide the non-CSS names entirely.

Can I paste an RGB or HSL value instead of a HEX code?

Yes. The input accepts HEX in three, six, or eight digits, rgb() and rgba(), hsl() and hsla(), and any CSS color name. Paste whichever format you have and the tool normalizes it.

What is the difference between a tint, a tone, and a shade?

They are the three ways to vary a color. A tint is the color mixed with white, so it gets lighter. A shade is the color mixed with black, so it gets darker. A tone is the color mixed with gray, which keeps the lightness roughly steady but drains the intensity. All three ramps are generated for whatever color you enter.

Is this tool free and private?

Completely. Every calculation runs in your browser with JavaScript, so nothing you enter is uploaded or logged, and the tool keeps working offline once the page has loaded.