HTML カラーネーム リファレンス

Where named colors come from

When you write color: tomato or background: rebeccapurple in CSS, you're using a named color — a human-readable keyword that the browser maps to a fixed hex value. There are about 140 of these standardized in the CSS Color specification, and they trace back to the X Window System color list from the 1980s, which is why the set includes oddities like papayawhip, gainsboro, and burlywood. They are case-insensitive, render identically across every modern browser, and need no #. This reference shows each one as a swatch with its name, HEX, and RGB, grouped by color family so you can browse by feel rather than by code.

How the swatches are organized

The colors are sorted into families — Pink, Red, Orange, Yellow, Purple, Green, Blue, White, Gray, and Brown — and you can filter to any single family or view all at once. Beyond that you can sort three ways, and the difference matters when you're building a palette:

Sort by hue and the whole grid arranges itself like a rainbow; sort by lightness and you get a smooth dark-to-bright gradient, which is the fastest way to find a slightly lighter or darker neighbor of a color you like.

A detail worth knowing: duplicate colors

Some named colors are identical under the hood. aqua and cyan are both #00FFFF; fuchsia and magenta are both #FF00FF. They look the same to the browser — the two names are pure synonyms. So if a brand guide says "cyan" but your CSS already uses "aqua," there is no visual difference to reconcile. The list also includes rebeccapurple (#663399), a color added to the spec in memory of web developer Eric Meyer's daughter; it's the newest named color and a small piece of web history.

How the HSL values are computed

To sort by hue and lightness, the tool converts each stored hex to HSL. Take tomato = #FF6347: that's R=255, G=99, B=71. Scaling to 0–1, the brightest channel is red (1.0) and the darkest is blue (~0.28), so lightness — the average of the two extremes — is about 64%. The hue is derived from which channel is the max and the gaps between channels, landing tomato at roughly 9° (a red-orange). This is also how the tool decides whether to print a swatch's caption in dark or light text: if computed lightness is above ~55% it uses dark text for contrast, otherwise white.

Practical tips

• Click to copy. Every swatch has Name, HEX, and RGB copy buttons, so you can grab exactly the format your code needs.
• Use the search box for fuzzy recall. Type "sea" to surface SeaGreen, LightSeaGreen, DarkSeaGreen, and SeaShell at once when you can't remember the full name.
• Build a monochrome scale fast. Filter to one family and sort by lightness to get a ready-made set of tints and shades for borders, hovers, and backgrounds.
• Prefer named colors for readability, hex for precision. color: navy is self-documenting in a stylesheet; reach for hex or HSL when you need a value that isn't in the 140.

Common mistakes

• Assuming "gray" and "grey" both work. CSS standardized the American spelling for most grays (gray, darkgray, lightgray), though a few "grey" variants are also valid — when in doubt, copy the exact name from the swatch.
• Expecting named colors to cover everything. 140 colors is a small palette; brand and UI work usually needs custom hex or HSL values the keyword list can't express.
• Confusing green with lime. CSS green is the muted #008000, while pure bright green is lime (#00FF00) — a frequent surprise.

Runs entirely in your browser

The full color list is built into the page and all filtering, sorting, conversion, and copying happen locally in JavaScript. Nothing you search or copy is sent anywhere, and the reference works offline once the page has loaded.