Skip to content
XUtilHub

Color Name Finder – What Is the Name of This Color?

Find the name of any color from its HEX, RGB or HSL code. See the closest CSS color names and common names, plus a list of all 148 CSS colors.

  • Free, no sign-up
  • Runs in your browser, nothing uploaded

About the Color Name Finder

Have a color code but no name for it? Enter a HEX, RGB or HSL value or pick a color to find the closest CSS color names and everyday names like navy, sage or burgundy, measured by how similar they look.

Key features

  • Closest names to any color
  • All 148 CSS color names
  • Common names like navy, sage, burgundy
  • HEX, RGB and HSL input
  • Perceptual (OKLab) matching
  • Searchable color list

What color is this?

Designers, developers and shoppers all need to put a name to a color: for a style guide, a product listing, or just to describe it. Enter any code and get the closest names, ranked by how alike they really look.

NameHEXNameHEX
tomato#ff6347steelblue#4682b4
coral#ff7f50slategray#708090
gold#ffd700teal#008080
orchid#da70d6navy#000080
crimson#dc143cindigo#4b0082
rebeccapurple#663399whitesmoke#f5f5f5

Color picker, image color picker and color palette generator.

How to use the Color Name Finder

  1. Enter a color code, use the picker, or start from a preset.
  2. Adjust the options; the preview updates instantly.
  3. Check the result, including contrast and how it looks in context.
  4. Copy the CSS, Tailwind or HEX code, or download it.

Frequently asked questions

How is the closest name found?

Colors are compared in the OKLab color space, which measures how different two colors look to the human eye. The names with the smallest difference are shown first.

How many CSS color names are there?

There are 148 named colors in CSS, including duplicates such as gray and grey, and aqua and cyan. Any of them can be used directly in CSS, for example color: tomato.

What's the difference between a CSS name and a common name?

CSS names such as cornflowerblue work in code. Common names such as burgundy or sage are everyday words for describing a color, but browsers don't understand them.

Why do some names look different from what I expect?

Color names are loose. CSS 'green' (#008000) is quite dark because it comes from old standards, while 'lime' is the pure bright green.

Are these design tools free?

Yes. Every tool is free with no sign-up, and you can use the colors and code in personal and commercial projects.

Do you upload my images?

No. The color blindness simulator and every other tool run entirely in your browser, so your images and colors stay on your device.

Which code formats can I copy?

HEX, RGB and HSL values, plain CSS, CSS variables, SCSS variables, and Tailwind classes or theme config for both Tailwind v3 and v4.

What is a good contrast ratio?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text, icons and borders. AAA asks for 7:1 for normal text.

Last updated:

Related Design tools

Contrast CheckerNEW

Check the contrast ratio between text and background colors against WCAG 2 AA and AAA, with a live preview and one-click fixes that pass.

Color Palette GeneratorNEW

Generate beautiful 5-color palettes: random, analogous, monochrome, complementary, triadic, pastel or earthy. Lock colors, press space, export CSS or PNG.

CSS Gradient GeneratorNEW

Create CSS gradients visually: linear, radial or conic, with up to 8 color stops, angle control and presets. Copy the CSS or Tailwind class.

Box Shadow GeneratorNEW

Create CSS box shadows visually with multiple layers, blur, spread, opacity and inset. Presets for soft, layered, glow and neumorphic shadows.

Color Shades GeneratorNEW

Turn one brand color into a full 50–950 shade scale like Tailwind's. Balanced OKLCH shades, exported for Tailwind v4, v3, CSS variables and SCSS.

Color Blindness SimulatorNEW

Upload an image to see how people with deuteranopia, protanopia, tritanopia and achromatopsia see it. Side by side, scientifically based, no upload.