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.
Named color families
The roughly 148 named colors are organised loosely by family. Some highlights:
Reds and pinks: red, crimson, tomato, coral, salmon, hotpink, deeppink, palevioletred
Oranges and yellows: orange, darkorange, gold, yellow, lemonchiffon, khaki, moccasin
Greens: green, limegreen, lime, darkgreen, seagreen, mediumseagreen, springgreen, chartreuse, olive, olivedrab
Blues: blue, royalblue, steelblue, cornflowerblue, dodgerblue, deepskyblue, skyblue, lightblue, navy, midnightblue, teal
Purples and violets: purple, indigo, violet, orchid, plum, mediumpurple, rebeccapurple, mediumorchid
Neutrals and whites: white, ghostwhite, snow, ivory, beige, linen, whitesmoke, gainsboro, silver, gray, dimgray, darkgray
Browns and earth tones: brown, sienna, saddlebrown, maroon, chocolate, peru, tan, burlywood, wheat
Notable facts about the list
Aliases: aqua and cyan are the same color (#00ffff), as are fuchsia and magenta (#ff00ff). The color list also has both gray and grey spellings, along with their dark/light/slate prefixed variants, all mapping to the same values.
The newest keyword: rebeccapurple (#663399) was added to the CSS Color Module Level 4 in 2014 in memory of Rebecca Meyer, the daughter of CSS author Eric Meyer. It is the only named color with a personal story attached to it.
No pure black keyword named “black” was always in CSS — it is the original background color assumption of the early web. black is #000000 and white is #ffffff.
HSL tips: Use the HSL column when you want to create a lighter or darker variant of a named color. Keep the hue and saturation identical and adjust lightness: a steelblue at HSL 207, 44%, 49% darkens to an appealing shade at 35% lightness. Run the adjusted values through any CSS color tool or use hsl() directly.
When to use named colors in code
Named colors are a good fit for quick prototyping, test pages, and data visualizations where readability matters more than exact precision. In production design systems, hex or HSL values tied to design tokens give better control and make it possible to update the whole palette in one place. A common workflow is to use this reference to find the closest named color as a starting point, note its hex, and then adjust from there in your design tool.
Everything — parsing, conversion, and the swatches — runs locally in your browser.