How many CSS named colors are there?

CSS Color Level 4 defines 148 named colors including 'transparent'. This tool shows the 140 most commonly used opaque named colors, matching the set supported by all major browsers.

How do I copy a color value?

Click any swatch to copy its HEX value (e.g. #FF6347) to your clipboard and open the detail panel, which also shows the RGB and HSL representations.

How does the hue filter work?

Colors are grouped into 10 hue families based on their HSL hue angle and lightness. Clicking a hue pill filters the grid to show only colors in that family. Click 'All' to show every color again.

What does sorting by hue do?

Sorting by hue arranges colors in rainbow order (red → orange → yellow → green → blue → purple) so visually similar colors appear together, making it easy to pick harmonious shades.

Design 無料サインアップ不要

CSS Named Colors Grid

Browse all 140 CSS named colors as swatches, filter by hue, sort by name or lightness

ツールを読み込み中…

このツールについて

Explore all 140 CSS named colors in one place. Every color is shown as a labeled swatch with its name, HEX value, and RGB values. Use the search box to filter by name (e.g. 'blue' or 'dark'), or click a hue category pill — Red, Orange, Yellow, Green, Blue, Purple, Brown, Gray, White, or Black — to see only colors in that family. Sort the grid by name (A–Z), hue angle, lightness (light to dark), or saturation. Click any swatch to copy its HEX value to the clipboard and see the full color details panel showing HEX, RGB, HSL, and the CSS keyword name.

使い方

1 Browse the full grid of 140 named color swatches.
2 Type in the search box to filter colors by name.
3 Click a hue category pill (Red, Blue, etc.) to filter by color family.
4 Use the Sort selector to order by name, hue, lightness, or saturation.
5 Click any swatch to copy its HEX value and see full color details.
6 Use the detail panel to view HEX, RGB, and HSL representations.

The CSS named colors, all in one place

CSS lets you write a color two ways: as a code like #FF6347, or as a keyword like tomato. The keyword set is a fixed list baked into every browser — 140 opaque colors in this grid — that map to exact hex values. tomato always means #FF6347, everywhere, forever. This tool shows the whole list as swatches with names and hex codes, and lets you search, filter by color family, sort, and click to copy. It is a reference you can scan visually instead of memorising hex codes.

How the tool understands each color

Every swatch starts life as just a name and a hex value, but the tool enriches it by converting the hex into other color models so it can sort and group intelligently:

RGB — the raw red, green, and blue bytes (0–255) pulled straight from the hex pairs.
HSL — hue (the color's angle on the wheel, 0–360°), saturation (how vivid), and lightness (how bright). This is computed from RGB and is what makes meaningful sorting possible.

The hue angle is the key. Sorting by hue arranges colors in rainbow order — red, orange, yellow, green, teal, blue, purple, pink — so visually related shades sit together. Sorting by lightness runs dark to light; sorting by saturation runs vivid to muted. Click any swatch and the detail panel shows all three representations (HEX, RGB, HSL) at once, each individually copyable.

How colors are grouped into families

The hue filter pills (Red, Orange, Yellow, Green, Teal, Blue, Purple, Pink, Brown, Gray, White, Black) work by classifying each color from its HSL values, not by guessing from the name. The logic, in order:

Very light colors (lightness ≥ 97%) are White; very dark ones (≤ 12%) are Black.
Nearly colorless ones (saturation under 12%) fall into Gray (or White/Black at the extremes).
Brown is a special case: a dark, muted orange. The tool catches it by name (sienna, chocolate, peru, tan, burlywood, saddlebrown, sandybrown, anything containing "brown") because pure hue math would otherwise file these under orange.
Everything else is bucketed by hue angle: red wraps around 0°/360°, orange to 45°, yellow to 70°, green to 155°, teal to 195°, blue to 255°, purple to 290°, pink to 345°.

This is why tomato (a warm orange-red) lands in Red while chocolate (the same hue but dark) lands in Brown — lightness, not just hue, decides the family.

A worked example

Suppose you want a soft, muted green for a background. Click the Green pill to filter to greens only, then set Sort: Lightness to push the palest shades to the top. honeydew (#F0FFF0, nearly white) appears first, followed by palegreen and lightgreen, with darkgreen at the bottom. Click palegreen — the tool copies #98FB98 to your clipboard and opens the panel showing rgb(152,251,152) and its HSL. One scan, one click, and the value is ready to paste into your stylesheet.

Why use a named color at all

Readability. color: rebeccapurple tells the next developer more than #663399 does.
Speed for prototypes. When you just need "a blue" to test a layout, blue is faster than picking a hex.
A reliable starting point. Named colors are a fixed palette; grab one as a base, then fine-tune the hex in the detail panel's values.

Things to watch out for

Aliases are duplicates. aqua and cyan are both #00FFFF; gray and grey (and their dark-/light- variants) are identical pairs. The list includes both spellings because both are valid CSS.
"Light" and "dark" prefixes are not consistent. lightgreen is not simply green lightened — the named colors were chosen by hand decades ago, so judge by the swatch, not the name.
Named colors are limited. 140 colors cannot cover every brand shade. Use the grid to find the nearest match, then nudge the copied hex.
Search matches the name only. Typing blue finds every color with "blue" in its name; it does not find bluish colors named otherwise (like navy or teal). Use the hue pill for that.

Privacy

The entire color list and every conversion (hex to RGB to HSL) run in your browser. Nothing is fetched or uploaded; copying a value writes to your local clipboard only. The grid works fully offline.