Color Name Finder

About the Color Name Finder

Give a colour a name. Type a HEX code, an rgb(), hsl() or oklch() value, or pick a colour, and the finder tells you its CSS colour name — the exact one, such as teal or rebeccapurple, or the closest of the 148 names browsers know — and the common names people use for it, such as “sage”, “dusty rose” or “warm blue”, from the xkcd colour survey, in which participants named colours shown on their screens.

It also works the other way round: type a word such as sage, coral or dusty rose to see every colour with that name. A sortable chart lists all 148 CSS named colours with their HEX, RGB and OKLCH values. Closeness is measured in the OKLab colour space, so “closest” means closest to the eye, and everything runs in your browser.

Common uses

• Naming the colours of a design system, a brand guide or a style tile in words people understand.
• Writing alt text or product descriptions that mention a colour.
• Finding the CSS keyword nearest to a HEX value for quick prototypes and demos.
• Turning a colour word from a brief (“make it sage”) into an actual colour to start from.

Where the names come from

• CSS named colours: the 148 keywords of CSS Color 4 (aliceblue to yellowgreen), which every browser understands. Some are the same colour under two names: aqua and cyan, fuchsia and magenta, and the gray/grey spellings.
• Common names: the xkcd colour survey, in which participants typed names for more than five million colours shown on their own screens, in over 222,000 sessions; Randall Munroe published the most common names with the RGB colour each one stands for, under the CC0 public-domain dedication. The finder uses that list (949 names) without its 28 crude names; the survey spells grey with an e.

How the closest name is found

Your colour and every named colour are converted to OKLab, a colour space in which equal distances look about equally different, and the names are ranked by that distance, ΔE OK. CSS Color 4 treats 0.02 as one just-noticeable difference: the finder calls a name exact at 0, almost identical up to 0.02, close up to 0.05 and a loose match beyond that.

Transparency is ignored: a colour with an alpha value is named as if it were opaque. A colour outside sRGB (a vivid oklch() or color(display-p3 …)) is first mapped to the nearest displayable colour.

Searching by name

A word search looks through both lists. Results that are exactly your words come first, then names that contain all of them as whole words (“sage” finds “sage green”), then names where they start a word, then names that contain them anywhere (“turq” finds turquoise). CSS names are written as one word, so “dark blue” also finds darkblue. Both lists are in English and written without accents, so accents in your words are ignored: “rosé” finds the roses.

Limitations

• Colour names are a matter of language and culture: the survey reflects English speakers who took part online, so a name is a common answer, not a standard. CSS names are fixed keywords, some of them odd (darkgray is lighter than gray).
• Names describe colours on a screen. The same HEX value can look different on another screen, in print or under different light.
• The common names cover 921 colours, so a colour can be a loose match to all of them; the distance tells you how good each match is.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.