Color Name Finder

About Color Name Finder

Finds the CSS colour keywords closest to any colour and describes it in plain words — lightness, how saturated, and the hue family — which is useful for naming variables, writing alt text, or answering 'what colour is that' in a design review.

Closeness is measured in Oklab, where a distance of about 2 is the smallest difference most people can see side by side. So 'indistinguishable' here means what it says, and a match marked 'loose' is only the nearest of 148 keywords, not a claim that it looks the same.

The description is built from OKLCH, so it follows the colour rather than its notation: #3f6dfb, rgb(63 109 251) and oklch(59% 0.21 266) all come back as the same medium vivid blue.

Where it helps

• Matches against all 148 CSS keywords, reporting synonyms such as gray and grey once.
• Uses a perceptual distance, so 'close' agrees with the eye.
• Describes the colour in words from its lightness, chroma and hue.
• Accepts any CSS colour syntax as well as the picker.

Limits

• CSS keywords are an odd, uneven set — lots of greens and greys, few purples — so some colours only get loose matches.
• A description in words is approximate by nature; two people may call the same teal blue or green.

Frequently asked questions

Why isn't there a name for my exact colour?

Only 148 colours have CSS names, out of more than 16 million hex values. The tool reports the nearest ones and how close they are; for design tokens, a name from the role (primary, danger) ages better than one from the hue.

What does the ΔE number mean?

It is the distance between the two colours in Oklab, scaled so that about 2 is a just-noticeable difference. Under 2 is indistinguishable side by side, under 5 very close, under 10 similar.

Can I use the keyword in CSS?

Yes — every name listed is a valid CSS colour value in every browser, so color: royalblue works as written.

Related tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Image Colour Picker — Pick a colour out of a picture and read it back
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it