CSS Named Colours — Sortable by Hue, With Contrast

Every CSS colour name with its HEX, RGB, HSL and OKLCH value, sortable by hue and contrast.

To look up a CSS colour name, type part of the name or a hex value to filter the list. Each colour shows its HEX, RGB, HSL or OKLCH value — switchable — along with its contrast against whichever of black or white reads better on it, so you can see at a glance which names can carry text. The list sorts by hue or lightness as well as alphabetically, and the whole grid can be viewed through a colour-vision filter.

Runs in your browser

Formats: HEX, RGB, HSL and OKLCH, switchable
Sorting: Alphabetical, by hue, or by lightness
Accessibility: Contrast on every swatch, plus colour-vision simulation
Privacy: Runs entirely in your browser — nothing is uploaded
Cost: Free, unlimited, no sign-up

Frequently asked questions

Why sort by hue rather than alphabetically?

Because the question is usually comparative — you are looking for the named colour nearest to one you already have, and alphabetical order scatters those across the list. Sorting by hue puts them next to each other. Greys sort to the end, since a colour with no saturation has no meaningful hue angle.

What does the ratio on each swatch mean?

It is the WCAG contrast ratio between that colour and whichever of black or white reads better on it. Under 4.5:1 the colour cannot carry body text in either, which rules it out as a background regardless of how it looks.

Are named colours the same everywhere?

Yes for the 140-odd standard names, which every browser resolves identically — they come from the X11 palette by way of CSS. They are convenient for prototyping, though most design systems move to explicit values because the names cluster oddly and offer no consistent lightness scale.

How to use the css named colours reference

1Enter or paste your filter.
2The result appears immediately — copy or download it.

Embed this tool

Put the working css named colours reference on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Colour ConverterConvert any colour to HEX, RGB, HSL, HSV, CMYK, LAB and native code — with contrast, tints and harmonies.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Cursor Reference & GeneratorHover to try every CSS cursor keyword, and copy the one you want.Glassmorphism CSS GeneratorCreate frosted-glass CSS with backdrop blur, transparency and a subtle border.CSS Gradient GeneratorBuild linear, radial and conic CSS gradients and copy the code.Tailwind Colour Shade GeneratorGenerate a full 50–950 Tailwind colour scale from a single brand colour.

Last updated 1 Aug 2026

More color tools