CSS Color Names

How to use it

1. Open the page: all 148 named colors are already listed, each with a swatch, its hex value, its RGB triple and its HSL triple.
2. Type in the search box to filter by name or by hex, for example slate, gold or #708090.
3. Pick a Color family to narrow the list to red, orange, yellow, green, cyan, blue, purple, pink, brown or neutral.
4. Click a swatch to copy its hex value, or use Copy name and Copy hex under the values.
5. The status line shows how many of the 148 colors are currently displayed.

Common use cases

• Finding the CSS name behind a hex value - paste #708090 into the search box and read that it is slategray.
• Picking a named color for a stylesheet - filter a family, compare the swatches, then copy the name straight into your CSS.
• Converting to HSL for theming - each card shows the HSL triple, so a color can be reused with hsl() and adjusted by lightness.
• Checking a design handoff - confirm which named color a mockup refers to before hard-coding a hex value.

Why it stays private

The color table is part of the page itself and the RGB and HSL values are computed in this tab. No lookup service is contacted, so the tool works offline and reveals nothing about what you searched for.

FAQ

Q: Are these all the named colors in CSS? A: These are the 148 named colors of the CSS Color specification, including both spellings of the gray colors, such as gray and grey, and both spellings of darkslategray.

Q: How is the color family decided? A: It comes from the hue of each color. Colors with a saturation below 12 percent are grouped as neutral, and dark colors in the orange hue range are grouped as brown.

Q: Why do two names show the same hex value? A: Some names are genuine aliases: aqua and cyan, fuchsia and magenta, gray and grey all resolve to the same value, and the table lists each one.