CSS named colors poster

Sorting by hue in OKLCH instead of alphabetically puts related colors side by side, so you can see at a glance that crimson sits between the reds and the pinks, or that darkgray is lighter than gray. Near-white tints such as snow and aliceblue and the true grays are grouped at the end from light to dark.

Aliases are kept, since both spellings are valid CSS: aqua and cyan, fuchsia and magenta, and the seven gray and grey pairs. That is why 148 names cover 139 distinct colors. Each swatch on screen links to the color's page with RGB, HSL, OKLCH and contrast ratios.

Pick the paper above the poster and press Print / Save as PDF. The poster scales with the paper, so labels stay at least 7pt on the smallest size and grow on larger ones; site navigation, ads and buttons are hidden in print.

Turn on Background graphics (Chrome, Edge) or Print backgrounds (Firefox, Safari), or the swatches print blank. For a print shop, Download PNG renders the poster on a canvas at print resolution for the paper you picked.

Linking to this page from your docs, wiki or README is the best way to share it: readers always get the current version and the print button. Copy one of these:

<a href="https://www.arielton.com/cheatsheets/css-named-colors">CSS named colors poster (printable)</a> by <a href="https://www.arielton.com/">Arielton Oberek</a>

[CSS named colors poster (printable)](https://www.arielton.com/cheatsheets/css-named-colors) by [Arielton Oberek](https://www.arielton.com/)

If your team wants the same treatment for an internal API, a CLI or a style guide, write to contact@arielton.com.

How many named colors does CSS have?

148 keywords in CSS Color Module Level 4: the 16 HTML 4 basic colors, the extended colors that came from X11, and rebeccapurple, added in 2014. Some are aliases for the same value, so there are 139 distinct colors.

Will the printed colors match my screen?

Not exactly. Printers mix CMYK inks and cannot reach the brightest sRGB colors, so lime, cyan and magenta print duller than they look on screen. Use the poster for names and hex values, and judge critical colors on a calibrated display.

Are CSS color names case-sensitive?

No. LightGoldenrodYellow, lightgoldenrodyellow and LIGHTGOLDENRODYELLOW are the same keyword. The poster prints the lowercase form that the specification lists.

Should I use named colors in production CSS?

They are fine for prototypes, demos and teaching. For a design system, custom properties with hex or oklch() values are easier to keep consistent, since the names follow no scale: darkgray is lighter than gray.