CSS colour names — all 148 keywords with HEX, RGB and HSL

How to use the CSS colour names reference

1. Leave Filter empty to see all 148 names, or type part of a name such as blue, rose or slate.
2. To find names by value, type a HEX start such as #ff or 00.
3. Choose an Order: Alphabetical, By hue or By lightness.
4. Click a swatch or copy a row from the table. Download the table as css-named-colors.csv for a spreadsheet.

What it does and when to use it

CSS named colours are quick to type and easy to read in code: color: tomato says more than color: #ff6347. This reference lists them all with their exact values, so you can pick one for a prototype, check what a name in someone else’s stylesheet really is, or teach colour in CSS.

Sorting helps you see the set in a new way. Alphabetical order is best for looking up a name. By hue groups the reds, greens and blues together, with greys first. By lightness lines the colours up from dark to light, which is handy when you need a pale background or a deep text colour from the named set.

To go the other way and find the closest name for any colour, use the colour name finder. To mix two named colours in CSS, try the CSS color-mix() generator, and for every notation of one colour use the colour converter.

How it works

The list is the named-colour table from CSS Color Module Level 4. The filter removes spaces from your text and keeps any name that contains it, or any value whose HEX code contains it after a # is added. By hue sorts by HSL hue and then lightness. By lightness sorts by HSL lightness, then hue. HSL values in the table are rounded to one decimal place.

Worked examples

These are the reference’s own results.

Filter “slate”. Showing: 9 named colours, including darkslateblue (#483d8b), slateblue (#6a5acd) and slategray (#708090). Three of the nine are gray and grey spellings of the same value.

Filter “#ff”, order by lightness. Showing: 31 named colours. The list starts with the fully saturated red, orangered, darkorange, orange, gold and yellow, all at 50% HSL lightness, and ends with snow (#fffafa) and white.

The gray family. dimgray #696969, gray #808080, darkgray #a9a9a9, lightgray #d3d3d3. Despite its name, darkgray is the lighter of the middle two.

Limits and tips

• Names do not follow a system; “dark” and “light” prefixes are not even steps.
• HSL lightness is not perceived brightness. Yellow and blue both show 50%, but yellow looks far lighter.
• The list is built into the page and filtered in your browser.