How these pages use color
Every example in this section follows the same rules, and the pages explain why as they go:
- Every color is a token. Colors are custom properties named by their role, such as
--surface,--accentor--danger, defined inoklch(). Hex appears only for comparison. - Every pair states its contrast. Each demo labels its text and background with their contrast ratio, so the number sits next to the look.
- Color never carries meaning alone. Every state also has text, an icon, a shape or a pattern.
- The reader's settings win. Demos follow the reader's light or dark preference, their contrast preference and forced colors, and never fight them.
- Newer color ships as an enhancement. Each newer function sits behind a fallback that works everywhere, with its support status.
- Platform only. The demos use no color libraries; outside tools are linked for exploring.
The CSS in these pages follows the CSS section's house style.
The pages
- 01Why color matters
Color as interface: identity, hierarchy, state and mood, and the one channel the author cannot guarantee reaches the reader.
- 02How color works
Light and the eye, models and spaces, gamut, perceptual lightness, and a short history of web color, from sixteen names and the web-safe palette to
oklch(). - 03Color in CSS
Every notation, where color applies,
currentColor, out-of-gamut colors, and turning a designer's hex into tokens. - 04Deriving color
color-mix(), relative colors,contrast-color(), gradient interpolation, and a whole set of states from one token. - 05Choosing and pairing
Harmony, proportion, tonal scales, roles over values, neutrals, status colors and palettes for data.
- 06Light and dark
color-scheme,prefers-color-scheme,light-dark(), a three-state toggle, and designing a dark palette on purpose. - 07Displays and environments
Wide gamut and HDR as enhancements, images that carry their own color, the room, grayscale and print.
- 08Color for people
Contrast measured, never color alone, color vision, low vision, forced colors, contrast preferences and focus you can see.
- 09Color across cultures
Meaning that is learned, conventions that flip, how language divides color, and signal colors as locale data.
Films
A narrated film goes with these pages.
- A Colorful History of the Web (12 min), beside page 02: one blue written six ways, from six hex digits in 1995 through the web-safe palette, color names and
hsl()tooklch().
Asking the platform
Ask the browser what it can do and what the reader wants; never guess from the browser's name. Each question has a CSS answer and, where a script needs to know, a JavaScript one. The page that teaches each is in the last column.
| Question | CSS | JavaScript | Support, October 2026 | Taught in |
|---|---|---|---|---|
Can it parse oklch()? | @supports (color: oklch(0% 0 0)) | CSS.supports("color", "oklch(0% 0 0)") | Widely available | 03, Color in CSS |
| Relative colors? | @supports (color: oklch(from red l c h)) | the same pattern | Newly available, September 2024 | 04, Deriving color |
contrast-color()? | @supports (color: contrast-color(red)) | the same pattern | Newly available, April 2026 | 04, Deriving color |
| Light or dark preference? | @media (prefers-color-scheme: dark) | matchMedia() with a change listener | Widely available | 06, Light and dark |
| Does the server need the scheme first? | none | the Sec-CH-Prefers-Color-Scheme request header, opted in with Accept-CH | Chromium only | 06, Light and dark |
| A wide-gamut or HDR screen? | @media (color-gamut: p3), (dynamic-range: high) | matchMedia() | Widely available; Firefox always reports sRGB | 07, Displays and environments |
| More or less contrast? Forced colors? | @media (prefers-contrast: more), (forced-colors: active) | matchMedia() | Widely available | 08, Color for people |
| Less transparency? | @media (prefers-reduced-transparency: reduce) | matchMedia() | Chromium only | 08, Color for people |
| Let the reader pick a color? | <input type="color"> | the EyeDropper API, where present | The input in every browser; EyeDropper in desktop Chromium only | 03, Color in CSS |
Color taught elsewhere
Other sections introduce tools these pages build on:
- Color functions in brief, custom properties as tokens, and
@propertyin the CSS Values page. - Responsive design:
@supportsand media features. - Internationalization in CSS:
:lang(), used here for colors that mean different things in different markets. - Type for people: contrast as a problem of type.