AIColors

顏色命名

顏色名稱查找器

貼上任意顏色，從約 300 個 CSS 與設計常用顏色名中找到最接近的名稱。

Lower ΔE means a closer perceptual match in OKLab.

Closest name

blueviolet

0.037 ΔE

#8A2BE2

CSS named color

Nearby matches

How to find the closest color name

1

Paste any color

Use HEX, RGB, HSL, HSV, CMYK, OKLab, OKLCH, or a CSS keyword. The shared parser converts it to RGB before matching.

2

Read the closest match

The large card shows the best name, its reference HEX, and a ΔE score. Smaller scores mean a closer visual match.

3

Compare nearby options

Use the nearby list when the top name is technically close but the project vocabulary wants a different family label.

Perceptual matching

What closest means in this tool

A naive color-name finder might subtract red, green, and blue channels directly. That is simple, but RGB channel distance does not match visual distance. Ten points of blue can matter more in one part of the gamut than ten points of red in another. This is why RGB nearest-neighbor tools sometimes call a muted purple "gray" or a soft green "beige".

This finder converts your input and every dictionary entry to OKLab, then computes ΔE as the distance between the two points. OKLab was designed so numeric distance tracks perceived difference more closely than RGB. It is still not a full human naming model, but it gives better practical results for product designers, front-end developers, and brand teams.

The dictionary is intentionally a first-shipping set of about 300 names. It includes all 147 CSS color keywords and a curated extension of common design terms such as cream, charcoal, periwinkle, sage, blush, terracotta, saffron, and wine. That keeps the bundle small while covering the words people actually use in design reviews.

Why naming colors matters

Color names are a collaboration layer. A designer can say "#C9A9A6", but a stakeholder remembers "dusty rose". A token named `surface-muted-rose` is easier to review than a raw value hidden in a component. A bug report that says "the sage badge is too light" is easier to triage than one that quotes three RGB channels.

Naming also helps design systems mature. Early projects often start with exact colors and no semantic structure. As the system grows, teams need aliases for brand, status, chart, category, and surface roles. A nearest-name lookup can suggest a shared vocabulary, then the exact HEX remains the source of truth in code.

The key is to avoid confusing names with precision. Names are labels. Values are specifications. Use this tool to pick a label that people understand, then copy the HEX into your tokens, CSS variables, Figma styles, or implementation notes.

Frequently asked questions

How accurate are the names?
The result is a nearest-name lookup, not an official naming authority. The dictionary combines all CSS named colors with a curated set of common design names, then ranks matches by OKLab distance. The top result is usually the name that most people would accept visually, but names are cultural and contextual.
Why is my HEX not in the dictionary?
Most HEX values do not have unique names. There are more than sixteen million 24-bit RGB colors, while useful design vocabularies contain hundreds or thousands of labels. The tool gives the closest named anchor so you can communicate the color without pretending every tiny channel difference has a separate name.
What is ΔE?
Delta E is a distance score between two colors. This tool uses Euclidean distance in OKLab, so lower numbers mean the colors are perceptually closer. A value near zero is nearly exact. Higher values mean the suggested name is only a broad family match.
Are CSS named colors enough?
CSS named colors are useful because they work directly in code, but the list is small and historically uneven. It includes names like papayawhip and omits common design words like cream, charcoal, blush, and sage. The extended dictionary gives more natural labels while still marking CSS keywords.
Can I use these names in code?
Only the CSS named colors can be used directly as CSS keywords. For all other names, copy the HEX value or create a design token such as color-sage-500. The non-CSS names are communication labels, not browser syntax.
Why does the closest name look slightly different?
A name points to one reference color, but real projects often use nearby variants. For example, many teams say "sage" for a broad family of muted greens. If the ΔE score is high, treat the result as a family label and keep the exact HEX in your specs.
Does it support transparency?
The parser accepts common color formats, but the matching step compares opaque RGB colors. If you paste rgba() or hsla(), the alpha channel is ignored. For translucent UI colors, first composite the color over its actual background, then name the resulting visible color.
How is this different from the CSS Color Names page?
The CSS Color Names page is a reference for the 147 standardized browser keywords. Color Name Finder is an input-driven nearest-neighbor lookup over a larger dictionary, with perceptual distance and nearby alternatives. Use the reference when you need valid CSS keywords, and this tool when you need a human-readable name.

Related color tools

Color Converter

Convert the same input into every production color format.

CSS Color Names

Browse the 147 browser-supported named colors.

Tailwind Colors

Compare names against a practical utility palette.