Skip to content
ChromaBrew

CSS color names

Find the closest of the 148 CSS named colors to any HEX, RGB or HSL color, measured in OKLab — with the dominant hue named for every color too. Browse, search and copy names or hex straight into your CSS.

Find the closest of the 148 CSS named colors to any hex, RGB or HSL value, measured in OKLab. An exact match lands at distance zero; neighboring keywords are ranked by how close they appear to the eye.

Every color also gets its dominant hue named for it. Browse or search the full list of CSS named colors and copy the name or hex straight into your stylesheet.

Closest named colour

Closest CSS named colour

blueviolet

#8A2BE2 · OKLab distance 0.037

Dominant hue · Violet

Use as seed

Browse all 148 named colours

Click a swatch to see its closest-name card. Showing first 60 of148.

Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.

How to use this tool

  1. Type or pick any colour in HEX, RGB or HSL and the tool finds the closest of the 148 CSS named colours (measured in OKLab) and names its dominant hue.
  2. Copy the name straight into your CSS, or copy the hex and open it in the design system generator as the primary seed.
  3. Browse the full list, search by name, and click any swatch to see its closest-name card.

Frequently asked questions

How many named colors does CSS define?
CSS Color Module Level 4 defines 148 named colors — the SVG keywords from aqua and black to yellowgreen (147 of them), plus rebeccapurple, and aliases like gray/grey and aqua/cyan that share a hex. Every one can be used as-is in any browser.
How is the closest name chosen?
Distances are measured in OKLab, a colour space built to match how humans perceive difference. An exact hex (like #ff6347 → tomato) lands at distance 0; neighbours are ranked by that perceptual distance.
Should I use named colors in production?
They are valid CSS, but only a handful are stable enough to lean on at scale — navy, crimson, tomato, rebeccapurple and a few greys. This tool shows the hex behind every name so you can lock values into tokens instead of magic strings.
Can I turn a named color into a full design system?
Yes — copy the hex, then one click seeds the design system generator, deriving scale, palette, tokens, themes and exports from that color.

Related tools

Related guides

CSS color names runs entirely in your browser — nothing you enter is sent to a server.