Developer Color

Search intent: css color names css named colors css color list css color keywords oklch css color spaces web color reference

CSS Color: Named Keywords, Color Spaces, and Modern Color Specification

CSS color has evolved from 16 basic named keywords to a multi-space system spanning oklch, display-p3, and lab. Understanding the full vocabulary of CSS color — and when to use each specification method — is increasingly important for designers and developers working on production web projects.

CSSDeveloperDigital Design

Key points

The 148 CSS named color keywords are historical artifacts — CSS1's 16 colors came from the Windows VGA palette, and CSS3's expansion to 147 came from the Unix X11 system rather than any aesthetic design logic.

oklch is now the recommended color space for building design system color scales because it is perceptually uniform: equal numeric steps produce equal perceived differences, unlike HSL.

rebeccapurple (#663399) is the only CSS named color with a personal story — added in CSS Level 4 in honor of Rebecca Meyer, daughter of CSS advocate Eric Meyer.

The history of CSS named colors

CSS named colors are not a designed system — they are a series of historical accidents layered over three decades of standards evolution. The original 16 colors in CSS Level 1 (1996) were inherited directly from the Windows VGA color palette: a set of colors defined by hardware capability in 1987, not by aesthetic intent. CSS Level 3 (2011) expanded the vocabulary to 147 named keywords by incorporating the X11 color set from Unix workstation systems, which is why the CSS color list includes names like cornflowerblue, papayawhip, and mediumaquamarine that have the feel of an arbitrary paint chip catalog rather than a design specification. CSS Level 4 added one new named color: rebeccapurple (#663399), added in 2014 in honor of Rebecca Meyer, the daughter of CSS standards advocate Eric Meyer who passed away at age six. It is the only named color in CSS with an explicit human story and a deliberate moment of addition.

When to use named colors vs hex vs oklch

Named color keywords are best used in two contexts: rapid prototyping where semantic clarity matters more than precision (writing color: red is faster to read and understand in a prototype than color: #FF0000), and in situations where the named value has direct semantic meaning (using transparent, currentColor, or inherit as functional values rather than chromatic ones). For production design systems, named colors are almost never the right choice because they cannot be systematically varied and their values are fixed. Hex values (and their rgb() equivalents) remain the standard for cross-tool compatibility: hex values move reliably between design tools, code editors, and documentation. oklch() is increasingly the right choice for design system tokens and scale generation because its perceptual uniformity makes programmatic scale generation reliable.

Understanding oklch and perceptual uniformity

The limitation of HSL as a design system color space is that it is not perceptually uniform: a 10% lightness increase in a yellow hue looks very different from a 10% lightness increase in a blue hue, because the eye has different sensitivity to lightness variation across hues. This makes building consistent tonal scales in HSL an exercise in subjective manual adjustment rather than systematic generation. oklch addresses this by defining colors in a space modeled on human perception: equal numeric steps in oklch correspond to equal perceived differences. The L axis is perceptual lightness (same concept as L in Lab), the C axis is chroma (roughly equivalent to saturation but perceptually calibrated), and the H axis is hue angle (0-360 degrees, with the same hue semantics as HSL). A scale generated by stepping L from 10 to 90 in 10-unit increments in oklch will look like equal perceptual steps; the same operation in HSL will not.

Practical color specification for production web

A production web color specification strategy should include: named keywords only for transparent and currentColor; hex values for colors that cross the design-code boundary (design tool exports to code, Figma to CSS, etc.); rgb() or hsl() for colors that need programmatic manipulation in CSS (calc(), color-mix()); and oklch() for design system tokens where perceptual uniformity matters. For wide-gamut displays, wrapping sRGB colors in display-p3 equivalents using @media (color-gamut: p3) provides vivid display on modern hardware while falling back gracefully on sRGB displays. The most common mistake in production color specification is treating hex as a design system format — hex values are a serialization format, not a design system format, and their apparent precision (six hex digits) masks the fact that they carry no information about the perceptual relationships between colors.

Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Packs handle the export and implementation layer.

Browse packs More guides

Related guides

UI Color Systems

Dark Mode Color Design: Semantic Token Systems for Dual-Theme Interfaces

Dark mode is not a color inversion — it is a parallel design system that requires its own palette logic. Semantic token systems, built around functional color roles rather than raw values, are the professional standard for managing dark mode at scale without duplicating design work.

UI Design

Dark Mode Color Design: Beyond Inverting Your Palette

Dark mode done wrong looks like a costume. This guide covers systematic dark mode color — semantic tokens, OLED constraints, saturation shifts, and layered surface elevation.

Motion Design

Color in Motion Design: Timing, Transitions, and Temporal Color Narratives

Motion design introduces a dimension that static design never has to manage: color changing over time. Effective color transition design requires an understanding of timing semantics, saturation trajectories, and how color can carry narrative weight across an animation or sequence.