Colour Palette Glossary: Every Term Defined

Updated 2026-04-06|SPUNK13 LLC|spunk.bet

Palette tools and design systems use terms interchangeably that mean different things. Here is the vocabulary, with the distinctions that actually change what you produce.

The three properties of a colour

Hue — position on the colour wheel, 0-360 degrees. Red near 0, green near 120, blue near 240. Changing hue changes which colour it is.

Saturation (HSL/HSV) and chroma (LCH/OKLCH) both describe colourfulness, but not identically. Saturation is relative to the maximum possible at that lightness; chroma is absolute. This is why two HSL colours at 100% saturation can look wildly different in intensity while two OKLCH colours at the same chroma look consistent.

Lightness versus brightness/value — lightness (the L in HSL and OKLCH) runs from black to white with the pure colour at the midpoint; value (the V in HSV) runs from black to the pure colour. They are different scales, which is why the same hex looks different in two pickers.

Tint, shade, tone

A tint is the colour mixed with white. A shade is mixed with black. A tone is mixed with grey, which lowers saturation without going all the way light or dark. A ramp or scale is the ordered set of these, conventionally numbered 50 (lightest) to 950 (darkest) with 500 as the base.

Colour spaces and models

sRGB — the default web colour space; hex and rgb() live here. Display P3 — a wider gamut supported by most recent screens, reachable in CSS with color(display-p3 …), giving noticeably more vivid reds and greens. Gamut — the range of colours a space or device can represent; a colour outside the gamut is clipped to the nearest reproducible one, which is why an out-of-gamut OKLCH value can render duller than expected. OKLab / OKLCH — a perceptually uniform space where equal numeric steps look like equal visual steps, which is exactly what HSL fails at.

Contrast and accessibility terms

Contrast ratio — a number from 1:1 to 21:1 derived from the relative luminance of two colours. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (24px regular or 18.66px bold and above) and for the boundaries of interactive components. AAA requires 7:1 and 4.5:1 respectively. Relative luminance is the weighted brightness calculation behind the ratio, weighting green most heavily because human vision does. APCA is a newer contrast model that better matches perception, particularly for light text on dark backgrounds, but WCAG's ratio remains the conformance requirement.

Harmony terms from the colour wheel

Systems vocabulary

Primitive tokens name raw values (--orange-500). Semantic tokens name roles (--color-surface, --color-danger) and point at primitives. Components should only ever reference semantic tokens — that indirection is what makes dark mode and rebranding a change in one file. Alpha is opacity; colour-mix blends two colours in a named space, so color-mix(in oklch, var(--brand) 20%, white) produces a tint that stays on-hue.

Part of the SPUNK13 network

Visit spunk.bet400+ Free ToolsFree Casino
Dev ToolsCasinoMemesPredictionsNFT ArtOrdinalsEbooksAdvertise