FormatterHQ

Color Name Finder

What colour is #3a7bd5? Enter any value to get a plain-English description and the nearest CSS colour names, ranked by visual similarity.

Loading tool…
Ready.

How to use the Color Name Finder

  1. Type or pick a colour in HEX, RGB, HSL, OKLCH or as a name.
  2. Read the description (for example "dark vivid blue") in the large swatch.
  3. Compare the six closest CSS colour names; each shows your colour and the named colour side by side.
  4. Click a name or a format value to copy it.

Find the name of any color

HEX codes are precise but hard to talk about. "Use #3a7bd5 for links" means little in a meeting; "a steel-blue" does. This color name finder describes any colour in plain words and lists the closest of the 148 named colours defined in CSS, from aliceblue to yellowgreen.

Two kinds of names

  • Description: a generated phrase such as "light grayish teal", built from the colour's lightness, chroma and hue in OKLCH. It is useful in documentation and alt text.
  • Nearest CSS names: real keywords you can use in stylesheets, ranked by CIEDE2000 colour difference (ΔE).

Example: #3a7bd5 is described as a blue and its closest CSS keyword is steelblue. A ΔE under 1 means the colour is effectively identical to the named one, under 3 very close.

When to use named colors

CSS colour keywords are handy for prototypes, teaching and quick debugging (outline: 2px solid tomato). For production design systems, prefer custom properties with your own names, such as --color-brand, because the 148 keywords were never designed as a harmonious palette.

Browse all keywords with the HTML color names list, or convert the value between formats with the color converter.

CSS color names that surprise people

  • darkgray (#A9A9A9) is lighter than gray (#808080), a quirk inherited from the X11 color list.
  • aqua and cyan are the same color (#00FFFF), as are fuchsia and magenta (#FF00FF).
  • Every name containing “gray” also has a “grey” spelling, such as slategrey, which is why the list is longer than the number of distinct colors.
  • rebeccapurple (#663399) was added in memory of Rebecca Meyer, the daughter of CSS expert Eric Meyer.
  • transparent and currentcolor are color keywords, but they are not fixed colors, so the finder never suggests them.

How the matching works

Your colour and every named colour are converted to the CIE Lab colour space, and the difference is measured with the CIEDE2000 formula, which weights differences in lightness, chroma and hue the way human vision perceives them. That is why the finder sometimes prefers a name whose HEX code looks numerically further away: the numbers in HEX do not correspond to how different two colours look. The side-by-side swatches let you confirm the match with your own eyes, and the formats panel gives the same colour as HEX, RGB, HSL, HSV, OKLCH, Lab and CMYK.

Using descriptions for accessibility

When you write alt text or product descriptions, a phrase such as "dark teal" is far more helpful to screen-reader users than a HEX code. The generated description gives you a neutral starting point that you can refine.

Privacy

The tool runs entirely in your browser. Nothing you type or paste is sent to our servers.

Frequently asked questions

How many named colors does CSS have?
CSS Color Module Level 4 defines 148 named colours (plus transparent and currentColor), including duplicates such as gray/grey and aqua/cyan.
Is the closest name an exact match?
Only when the HEX values are identical, which the list labels as an exact match. A ΔE below 1 is labelled indistinguishable and below 3 very close; otherwise it is simply the most similar keyword, so check the side-by-side swatch.
What color formats can I enter?
HEX (3, 4, 6 or 8 digits), rgb(), hsl(), lab(), lch(), oklch() and CSS colour names.
How is the description generated?
The colour is converted to OKLCH; lightness decides words like light or dark, chroma decides grayish or vivid, and the hue angle picks the colour family.

Last updated October 3, 2026

Related tools

Image Average Color Finder Find the average and dominant colour of an image — useful for placeholders, card backgrounds and theme colours. Runs in your browser. Tailwind CSS Color Finder Find the closest Tailwind CSS colour class to any HEX, RGB or HSL colour and browse the full default palette with one-click copy. Color Blindness Simulator See how images and colour palettes look with protanopia, deuteranopia, tritanopia and other colour-vision deficiencies. Color Contrast Checker (WCAG) Check the WCAG 2 contrast ratio of text and background colours for AA and AAA, preview it live and get the closest passing colour. Color Converter Convert any colour to HEX, RGB, RGBA, HSL, HSV and CMYK at once. Accepts CSS names and any notation. Color Mixer Mix two colours at any ratio and generate blend steps in OKLab, RGB, Lab, LCH or HSL, with CSS color-mix() output. Color Palette Generator Generate colour palettes from a base colour with harmony rules (complementary, triadic, analogous…) or at random, lock favourites and export CSS. Tints and Shades Generator Generate tints, shades and tones of any colour plus a 50–950 scale, and export CSS variables, SCSS or a Tailwind theme. Colortone to CMYK Converter Convert a named colour tone (e.g. steelblue, tomato) or any colour to CMYK, with its tints, shades and tones. Colortone to HEX Converter Convert a named colour tone (e.g. steelblue, tomato) or any colour to HEX, with its tints, shades and tones. Colortone to HSV Converter Convert a named colour tone (e.g. steelblue, tomato) or any colour to HSV, with its tints, shades and tones. Colortone to RGB Converter Convert a named colour tone (e.g. steelblue, tomato) or any colour to RGB, with its tints, shades and tones.