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.

What is the CSS Named Colors?

Searchable CSS color-name reference. Every CSS Color Level 4 named color with its hex code, computed RGB and HSL values, a live swatch and one-click copy. Search by name or hex. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Named Colors — Gera Tools

Name: CSS Named Colors
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

Notable named colors

The basics: black (#000000), white (#ffffff), red (#ff0000), green (#008000), blue (#0000ff). Note that CSS green is #008000, not the #00ff00 lime green — a common surprise. lime is #00ff00.

Useful mid-tones for UI work: slategray (#708090) and lightslategray (#778899) are reliable neutral text colors. gainsboro (#dcdcdc) is a gentle background-divider grey. cornflowerblue (#6495ed) is a classic accessible blue.

The unique ones:

rebeccapurple (#663399) — added to the spec in memory of Eric Meyer’s daughter Rebecca. It is the only named color with a personal story behind it.
transparent — not in the 148-color list but a valid CSS color keyword, resolving to rgba(0,0,0,0).
currentcolor — inherits the element’s color value, useful for SVG fills and icon fills that should match surrounding text.

Alias pairs (same hex, different names):

gray / grey (#808080)
aqua / cyan (#00ffff)
fuchsia / magenta (#ff00ff)

When to use named colors vs hex vs custom properties

Named colors shine in quick prototypes, debugging, and contexts where readability matters (border: 1px solid red catches the eye immediately in a code review). For production stylesheets, most design systems prefer hex or oklch() values stored in CSS custom properties, because keywords give you no flexibility to tweak saturation or brightness without switching to a completely different keyword.

A good pattern is to prototype with named colors, then replace them with custom properties as the design solidifies:

/* Prototype */
.alert { background: lightyellow; border-color: gold; }

/* Production */
:root { --color-alert-bg: #fefce8; --color-alert-border: #eab308; }
.alert { background: var(--color-alert-bg); border-color: var(--color-alert-border); }

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.
css green (#008000) is darker than most people expect — use limegreen or lime if you want a vivid green.