How many named colors does CSS define?

The CSS Color Module defines about 148 named colors, though several are duplicates that differ only in spelling, such as gray and grey or cyan and aqua. This reference lists them all with their exact values.

Are color names case-sensitive in CSS?

No. CSS color keywords are case-insensitive, so RebeccaPurple, rebeccapurple, and REBECCAPURPLE all produce the same color. The names are shown here in lowercase by convention.

What is the difference between RGB and HSL?

RGB describes a color by its red, green, and blue components from 0 to 255. HSL describes the same color by hue, saturation, and lightness, which is often more intuitive for adjusting brightness or finding related shades.

Which named colors are duplicates?

aqua and cyan are identical, as are fuchsia and magenta. Several gray colors have grey spellings that map to the same value. The only modern addition is rebeccapurple, added in memory of Eric Meyer's daughter.

Should I use color names or hex codes in production?

Both are valid CSS. Names are readable for common colors, but hex, RGB, or HSL give you precise control over any shade. This tool lets you copy whichever representation fits your workflow.

CSS Color Name Reference

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 named color in one place

CSS lets you write colors as keywords like tomato, navy, or rebeccapurple instead of hex codes. There are around 148 of them, each mapping to an exact value. This reference shows a live swatch for every named color alongside its hex, RGB, and HSL representations, so you can pick the right one and copy the format you need.

How it works

Each named color has a fixed hexadecimal value defined by the CSS Color Module. The tool parses that hex into its RGB components (red, green, and blue, each from 0 to 255) and then converts those into HSL (hue from 0 to 360, saturation and lightness as percentages) using the standard conversion: it finds the maximum and minimum of the normalised channels to compute lightness, derives saturation from their spread, and computes hue from which channel is largest. The swatch is rendered directly from the hex so you see the true color.

Tips and notes

HSL is handy when you want to find a lighter or darker version of a color — just raise or lower the lightness while keeping hue and saturation fixed. Watch out for the duplicate names: aqua equals cyan, fuchsia equals magenta, and every gray has a grey twin. The newest keyword is rebeccapurple (#663399). Search by name to browse a family like the blues, or paste a hex to see whether it matches a named color. Everything — parsing, conversion, and the swatches — runs locally in your browser.