How many named colors does CSS support?

CSS Color Module Level 4 defines 148 named colors. A handful are spelling aliases that share a hex value, such as gray/grey and aqua/cyan, so the number of distinct colors is slightly lower.

Are CSS named colors reliable across browsers?

Yes. The named color keywords are standardised with exact sRGB hex values, so the same name renders identically in every modern browser. They are a safe shortcut for common colors.

How are the RGB and HSL values calculated?

The tool parses each color's canonical hex value into red, green and blue bytes, then converts those to HSL using the standard hue/saturation/lightness formula. Every format describes the exact same color.

What is rebeccapurple?

rebeccapurple (#663399) was added to the CSS spec in memory of Eric Meyer's daughter Rebecca. It is a fully standard named color you can use like any other.

Should I use named colors in production CSS?

Named colors are convenient for prototypes and common shades, but design systems usually prefer hex or custom properties for precise brand colors. The hex shown here is exactly what each keyword resolves to.

CSS Named Colors — Gera Tools

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Every CSS color keyword in one place

CSS lets you write colors as keywords like tomato, steelblue or rebeccapurple instead of hex codes. This reference lists all of the CSS Color Module Level 4 named colors with a live swatch, the canonical hex value, and the RGB and HSL equivalents computed from it. Search by name or by hex to find the exact keyword you want.

How it works

Each named color has a fixed sRGB hex value defined by the spec. The tool parses that hex into red, green and blue bytes (parseInt(slice, 16)), then converts to HSL with the standard algorithm: it finds the max and min channels to derive lightness, computes saturation from their spread, and computes hue from which channel is dominant. All three forms — hex, rgb() and hsl() — describe the identical color, so you can copy whichever your stylesheet uses.

Tips and notes

Named colors resolve to exact, standardised hex values, so red is always #FF0000 in every browser.
Several names are aliases: gray and grey, aqua and cyan, fuchsia and magenta each share a hex value.
For brand-critical colors, copy the hex and store it in a CSS custom property rather than relying on a keyword.
HSL is handy when you want to tweak a shade: adjust the lightness percentage to lighten or darken while keeping the same hue.