# 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.

**URL:** https://convertto.tech/t/css-named-colors
**Category:** Color Tools (https://convertto.tech/c/color-tools)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **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

## How to use

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

## FAQ

### 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.

## Related tools

- [Colour Converter](https://convertto.tech/t/color-converter): Convert any colour to HEX, RGB, HSL, HSV, CMYK, LAB and native code — with contrast, tints and harmonies.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Cursor Reference & Generator](https://convertto.tech/t/css-cursor-generator): Hover to try every CSS cursor keyword, and copy the one you want.
- [Glassmorphism CSS Generator](https://convertto.tech/t/glassmorphism-generator): Create frosted-glass CSS with backdrop blur, transparency and a subtle border.
- [CSS Gradient Generator](https://convertto.tech/t/gradient-generator): Build linear, radial and conic CSS gradients and copy the code.
- [Tailwind Colour Shade Generator](https://convertto.tech/t/tailwind-shade-generator): Generate a full 50–950 Tailwind colour scale from a single brand colour.
- [CSS Text Shadow Generator](https://convertto.tech/t/text-shadow-generator): Design text shadows, outlines and glow effects with a live preview.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.