Color & Design Glossary

The dominant wavelength of a color - what you mean when you call something "red" or "cyan". On a color wheel, hue is the angle (0-360 degrees). Pure hues have no white, black, or grey added.

How vivid or grey a color is. 100% saturation is the purest form of the hue; 0% saturation is grayscale. In OKLCH and LCH, the equivalent property is called chroma and is unbounded (typical values 0 to 0.4).

How light or dark a color is, expressed on a 0-100% (or 0-1) scale. HSL "lightness" is a math construct and not perceptual; OKLCH lightness is perceptually uniform - two colors with the same OKLCH L look equally bright.

The range of colors a device or color space can represent. sRGB has a small gamut, Display P3 about 25% larger, Rec.2020 over 75% of human vision. A color "outside" a gamut is mathematically valid but cannot be displayed; browsers map it to the closest in-gamut color.

The algorithm a browser uses when an authored color falls outside the destination gamut. CSS Color 4 specifies an OKLCH-based mapping that preserves hue and lightness while reducing chroma until the color fits - producing the "perceptually closest" available color.

The non-linear curve used to encode tonal values so dark tones get more bit precision. sRGB uses ~gamma 2.2. As a result, "#808080" decodes to roughly 22% linear light, not 50% - which is why naive gradients have muddy midpoints.

A property of a color space where equal numerical distance corresponds to equal perceived color difference. Lab, LCH, and OKLCH are perceptually uniform (or near-uniform). RGB and HSL are not - which is why ramps and gradients in those spaces feel uneven.

A standardised metric for the visual distance between two colors. ΔE less than 1.0 is invisible to most people; 1-2 is barely perceptible; over 5 is obviously different. CIEDE2000 is the modern formula; older formulas like ΔE76 over-emphasise hue shifts.

Where a color sits on the warm-cool axis. Reds, oranges, yellows read as warm; blues and cyans as cool. Measured technically in Kelvin for light sources (2700K = warm tungsten, 6500K = daylight, 9000K = cool blue).

The default color space of the web, defined by HP and Microsoft in 1996. About 35% of human-visible colors. Every HEX code, every default JPEG, and every CSS color without an explicit space is sRGB. Safe baseline; not the most vivid.

A wider color space adopted by Apple in 2015, about 25% larger than sRGB - mostly extra room in red and green. Supported by every iPhone since the 7 and most modern flagship displays. Authored in CSS via `color(display-p3 r g b)` or via OKLCH chroma values that fall outside sRGB.

The UHD broadcast color space, ~75% of human vision. Almost no consumer display can render the full volume today; OLED TVs reach ~80% coverage. Useful for future-proof masters; current browsers tone-map it down to the destination display.

A perceptually uniform color space introduced by Björn Ottosson in 2020 and shipped in CSS Color 4. Stores Lightness (0-1), Chroma (0-0.4 typical), and Hue (0-360). Equal L values look equally bright across hues, which makes OKLCH the modern best practice for design-system color ramps.

The Cartesian sibling of OKLCH (Lightness, a, b instead of Lightness, Chroma, Hue). Same perceptual basis. OKLab is used internally for blending and gradient interpolation; OKLCH is the human-friendly authoring face.

A 1976 perceptual color space defined by the CIE. Three axes: L (lightness), a (green-red), b (blue-yellow). Industry standard for print and color science; somewhat hue-non-uniform around blue, which is why OKLab was created.

Hue / Saturation / Lightness. A 1978 cylindrical model that is intuitive for tweaking colors but not perceptually uniform - HSL yellow at L=50% looks much brighter than HSL blue at L=50%. Fine for one-off tweaks; not safe for design-system ramps.

A subtractive color model (Cyan, Magenta, Yellow, Key/black) used by printers. Smaller gamut than sRGB; vivid blues and saturated greens lose punch when converted. Always specify CMYK for print deliverables; never assume an RGB-to-CMYK conversion is round-trip clean.

sRGB written in hexadecimal: `#rrggbb`, optionally `#rrggbbaa` for alpha. Compact, universally supported, but tells you nothing about how the color will look next to others. Best for storage, not for design-system math.

Web Content Accessibility Guidelines, the W3C standard for accessible web content. The current production version is WCAG 2.1; 2.2 is the latest published; WCAG 3 is in draft and introduces APCA. Required by law in most jurisdictions (ADA, EAA, AODA).

A relative-luminance ratio between two colors, expressed N:1 from 1:1 (no contrast) to 21:1 (pure black on pure white). Body text needs 4.5:1, large text and graphics need 3:1, AAA needs 7:1. Same number regardless of foreground polarity.

Accessible Perceptual Contrast Algorithm. The candidate replacement for WCAG 2.1 contrast in WCAG 3. Returns an Lc value (-108 to +106) that accounts for background polarity, font weight, and font size - matching how humans actually perceive readability.

WCAG conformance levels. AA is the legal default for most public-sector and commercial sites: 4.5:1 body text, 3:1 large text. AAA is enhanced contrast: 7:1 body, 4.5:1 large. Pursuing AAA on every screen is impractical; AA is the realistic baseline.

Reduced ability to distinguish certain hues. The common forms are deuteranopia (green-weak, ~6% of men), protanopia (red-weak), and tritanopia (blue-weak, rare). Designs should never rely on color alone to convey meaning.

A schema.org property that marks parts of a page suitable for voice readouts (Google Assistant, AI Overviews). Authored as a SpeakableSpecification with CSS selectors that point at the answer-bearing markup.

A CSS keyword that resolves to the element's computed `color` value. Lets a single SVG icon, border, or focus ring inherit the surrounding text color - the most useful one-line theming primitive in CSS.

A CSS Color 5 function that blends two colors at a given ratio in a chosen color space. Replaces SCSS lighten/darken at runtime: `color-mix(in oklch, var(--brand), white 20%)`. Native in every modern browser since 2023.

A browser API that snapshots the page before and after a DOM change and cross-fades between them automatically. Pairs perfectly with theme toggles - one line of JS turns a flickering swap into a cinematic transition.

A CSS feature that lets a component respond to its container's size or style instead of the viewport. Combined with custom properties, container style queries enable components that retune their colors based on the surface they land on.

A user-defined CSS property prefixed with `--`, accessed via `var(--name)`. Cascades like any other property and updates at runtime - the foundation of every modern theming and design-token system.

Named, atomic design decisions (colors, spacing, typography) authored once and consumed by every platform. The W3C DTCG draft is the emerging interchange format. Two-tier systems separate primitive tokens (raw values) from semantic tokens (named roles).

The W3C Design Tokens Community Group format - JSON with `$type`, `$value`, and reference syntax via `{path.to.token}`. Read by Figma Variables, Tokens Studio, Style Dictionary, Specify, Supernova. The de-facto interchange format for tokens.

Amazon's open-source build tool for design tokens. Reads a token source file (DTCG JSON or its own format) and emits CSS, Tailwind, iOS, Android, and other platform-specific outputs. Pipeline of choice for cross-platform token systems.

Google's design system since 2021. Built around dynamic color: a single source color generates key, secondary, tertiary, neutral, and neutral-variant tonal palettes via the HCT color space. ColorUI implements the Material 3 algorithm at /material.

A second theme that inverts the lightness axis while preserving brand intent. Best-practice mirrors swap neutral lightness, slightly desaturate brand colors, lighten elevated surfaces (instead of darkening shadows), and re-audit contrast top to bottom.

The algorithm behind most palette-from-image extractors. Pick K initial color centers; assign every pixel to the nearest; recompute each center as the mean of its pixels; repeat until centers stop moving. Run in OKLCH for perceptually clean results.

A two-color image effect: pixel luminance maps to a gradient between a dark and light tone. Originated in offset printing; popularised on the web by Spotify's artist pages. ColorUI ships a duotone generator at /duotone.