How many named colors are there in CSS?

CSS defines 148 color keywords, but only 139 distinct colors: aqua and cyan paint the same pixels, so do fuchsia and magenta, and every 'grey' spelling (grey, darkgrey, dimgrey, lightgrey, slategrey, darkslategrey, lightslategrey) is an alias of its 'gray' twin. This reference has one page per distinct color and lists the aliases on it.

What is the difference between a hex code, RGB and HSL?

They are three notations for the same color. A hex code like #add8e6 is the red, green and blue channels written in base 16; rgb(173, 216, 230) is the same three channels in decimal; hsl(195, 53%, 79%) describes the color by hue angle, saturation and lightness instead. Browsers treat them identically. HSL is the one to reason in when you want a lighter, darker or opposite version of a color, because you change one number.

Is it gray or grey in CSS?

Both. CSS accepts gray and grey, and the same pair of spellings for darkgray, dimgray, lightgray, slategray, darkslategray and lightslategray. They resolve to identical values.

Should I use color names or hex codes in a stylesheet?

Named colors are fine for prototypes and demos, but a real interface should name colors by their job — background, surface, text, primary, accent — and define each once as a CSS custom property. A keyword like steelblue tells you the hue; a token like --color-primary tells you where it is used, and it survives a rebrand. The palette generator builds that eight-role set from any color on these pages.

Design reference

CSS color names with hex, RGB and HSL codes

CSS understands 148 color keywords — 139 distinct colors once the aliases are folded in. Every one is below, grouped by hue the way the specification's own table groups them. Open a color for its hex, RGB and HSL notations, the colors that pair with it on the wheel, five tints and five shades, WCAG contrast against white and black, and a complete eight-role interface palette built from it.

Reds

From the soft corals and salmons to crimson, firebrick and dark red — the warmest, highest-arousal hues in the set. Red is spoken for: it means error, danger and destructive actions in almost every interface, so a red brand color needs its status colors chosen with care. Crimson and firebrick read as serious; the salmons and corals are gentle enough for surfaces and tags.

Pinks

Pale pinks through hot pink, deep pink and the violet-reds — red pushed toward magenta and lightened. Pinks carry warmth without red's alarm, which makes hot pink and deep pink strong accent colors for consumer and creative products. The pale pinks work as tinted surfaces; the violet-reds are dark enough to carry text on white.

Oranges

Coral, tomato, orange red, dark orange and orange — the five most saturated warm hues in the keyword set. Orange is the classic accent for a blue or teal interface: it is the complement, and it reads as an object rather than a surface. Keep it to buttons, badges and single highlights; as a background it competes with everything on top of it.

Yellows

Gold and yellow, then a long run of pale creams — lemon chiffon, papaya whip, moccasin, peach puff — and the two khakis. Pure yellow fails contrast against white for text at every size, so it belongs on dark surfaces or as a fill with dark text. The creams are excellent warm page backgrounds; the khakis are muted enough for borders and tags.

Purples

Lavender and thistle up to the vivid orchids and violets, then indigo, purple and the slate blues. Purple is the hue most SaaS products have settled on for a primary — it is distinct from the blues of links and the reds and greens of status. The slate blues and indigo make dependable primaries; the light lavenders make tinted surfaces that still read as brand.

Greens

Neon chartreuse and lime through the sea greens, forest green and olive, down to teal and dark cyan. Green means success and 'on' — reserve one green for that job before you use another as a brand color. Sea green, forest green and teal are calm enough to lead a palette; the neon greens are for dark-mode accents and little else.

Blues

Cyan and the turquoises, the sky and steel blues, then royal blue, blue, navy and midnight blue. Blue is the default interface color for a reason: it sits comfortably behind content, it has a wide usable lightness range for hover and pressed states, and its complement (orange) leaves red and green free for status. Most of the good primaries in this set are here.

Browns

Cornsilk, bisque and wheat through tan, peru and chocolate, to saddle brown, sienna, brown and maroon. Browns are muted oranges, and they behave like neutrals with warmth: the light ones make paper-like page backgrounds, the mid tones make borders and muted text, and the dark ones can carry body text. Brands that want to feel crafted or organic lean on this family.

Whites

White and its sixteen near-whites, each tinted a few percent toward a hue — snow, ivory, honeydew, alice blue, linen, misty rose. The near-whites are page backgrounds. A canvas at ivory or alice blue instead of pure white is the difference between a page that feels designed and one that feels blank — and it is exactly what a tinted `background` role does in a semantic palette.

Grays

Gainsboro and light gray through silver, gray and dim gray to the slate grays and black. Grays are text, borders and disabled states. The slate grays are the useful ones: a whisper of blue keeps them from looking like dirt against a colored primary. A semantic palette tints its grays toward the brand hue for the same reason.

Hex, RGB, HSL and named colors

A hex code is the red, green and blue channels written in base 16; rgb() is the same three channels in decimal; hsl() describes the color by hue angle, saturation and lightness. HSL is the notation to think in when you need a related color: the complement is the hue plus 180°, a tint is the same hue with more lightness, a muted version has less saturation. Every color page here shows all three notations and derives its matching colors exactly that way. For the reasoning behind the wheel relationships, read the guides to complementary and triadic schemes, or the overview of every type of color scheme.

How many named colors are there in CSS?: CSS defines 148 color keywords, but only 139 distinct colors: aqua and cyan paint the same pixels, so do fuchsia and magenta, and every 'grey' spelling (grey, darkgrey, dimgrey, lightgrey, slategrey, darkslategrey, lightslategrey) is an alias of its 'gray' twin. This reference has one page per distinct color and lists the aliases on it.
What is the difference between a hex code, RGB and HSL?: They are three notations for the same color. A hex code like #add8e6 is the red, green and blue channels written in base 16; rgb(173, 216, 230) is the same three channels in decimal; hsl(195, 53%, 79%) describes the color by hue angle, saturation and lightness instead. Browsers treat them identically. HSL is the one to reason in when you want a lighter, darker or opposite version of a color, because you change one number.
Is it gray or grey in CSS?: Both. CSS accepts gray and grey, and the same pair of spellings for darkgray, dimgray, lightgray, slategray, darkslategray and lightslategray. They resolve to identical values.
Should I use color names or hex codes in a stylesheet?: Named colors are fine for prototypes and demos, but a real interface should name colors by their job — background, surface, text, primary, accent — and define each once as a CSS custom property. A keyword like steelblue tells you the hue; a token like --color-primary tells you where it is used, and it survives a rebrand. The palette generator builds that eight-role set from any color on these pages.

From one color to a whole interface

A named color is a hue; an interface needs eight roles — primary, secondary, accent, background, surface, text, muted and border. The palette generator builds that set from any seed with a harmony rule, and the theme generator turns it into a Tailwind v4 stylesheet with the dark mode derived and contrast-checked. The semantic palette guide explains the roles.

Open the palette generator