CSS color names — all 148 named colours with hex and RGB

How to use the CSS colour names table

1. Type in Filter: part of a name (slate, blue, rebecca) or a full hex code (#ffd700). Matching is case-insensitive.
2. Scan the table of Name, Hex and RGB. The swatches below it show the matching colours.
3. Copy the value you need, or save the filtered list as css-colors.csv.

What it does and when to use it

Named colours are handy for quick prototypes, demos, debugging outlines (outline: 2px solid red) and teaching. They are also common in older stylesheets and SVG files, where you may need the exact hex value before you change a colour. Going the other way, a hex search tells you whether a value you found in a design has a keyword name.

Apart from the grey spellings, two pairs share a value: aqua and cyan are both #00ffff, and fuchsia and magenta are both #ff00ff. rebeccapurple (#663399) is the only name added in CSS Color Level 4.

To convert a value to HSL or other formats, use the colour converter. To check that text in a named colour is readable on its background, use the colour contrast checker. For the nearest name to any colour, not just exact matches, try colour name finder.

How it works

The list of 148 names and hex codes ships with the tool. The rgb() column is computed from the hex: each pair of hex digits is read as a number from 0 to 255. The filter splits your text on spaces and keeps rows where every word appears in the name, hex or rgb() text. It all runs in your browser, with no network calls.

Worked examples

Filter rebecca:

Showing: 1 of 148 colours
rebeccapurple | #663399 | rgb(102, 51, 153)

Filter #ffd700 finds the name for a hex code:

gold | #ffd700 | rgb(255, 215, 0)

Filter slate returns Showing: 9 of 148 colours: the slate blues and both spellings of the slate greys, from darkslategray (#2f4f4f) to lightslategray (#778899).

Limits and tips

• Names are not a design system. They were fixed decades ago and are not evenly spaced in lightness or hue. Use them for quick work, and use your own tokens in production.
• Searching part of an rgb() value is loose. Words are matched separately, so rgb(255, 0 also matches every row that contains a 0 anywhere. Search by hex instead.
• No alpha. Every named colour is fully opaque. Add transparency with a value like rgb(255 215 0 / 50%).