color

A proportion guideline that gives about 60 percent of a layout to a dominant colour, 30 percent to a secondary, and 10 percent to an accent.

The one saturated colour an interface spends sparingly on the things it wants clicked, so its rarity is what makes it read as important.

The transparency component carried inside a colour value itself, which lets a border or fill blend with whatever surface it lands on instead of assuming one.

The arithmetic that combines a translucent layer with what is beneath it, and the reason two stacked 50 percent layers do not add up to fully opaque.

A palette built from hues that neighbour each other on the wheel, giving a calm scheme with no colour fighting another for attention.

A perceptual contrast algorithm proposed for WCAG 3 that scores a text and background pair as an Lc value and takes font size and weight into account.

A formula for combining a layer's colour with the colour behind it, such as multiply or screen or overlay, instead of simply covering it.

The colour an organisation owns in a customer's memory, carried into a product as the seed for its palette rather than used directly on every surface.

A data palette of distinct hues at roughly equal visual weight, used for groups that have no order so no colour reads as larger than another.

Colourfulness measured in absolute terms rather than as a percentage of the maximum, so a light pastel and a dark ink can be compared on one scale.

The subtractive print colour model: cyan, magenta and yellow inks plus a key black, mixing by absorbing light, with a gamut narrower than any screen's.

A second name pointing at an existing scale so one palette can answer to several meanings, letting yellow serve as both warning and pending without duplication.

The visible stripes that appear across a gradient when a display or file cannot render enough intermediate steps to keep the transition smooth.

The set of colours a space or a display can actually produce, which is why a value that is legal in one notation can be impossible on a given screen.

Nudging an outside colour's hue toward the current scheme so a fixed brand or status colour sits inside a generated palette without looking imported.

A rule for choosing colours by their positions on the wheel, such as complementary or analogous or triadic, so a palette holds together by construction.

The rule for what happens between two colours in a gradient or transition, including which space the blend runs in and which way around the hue wheel it travels.

One hue rendered at a fixed series of lightness steps, numbered so that the same step means the same job in every hue.

A named job in the interface, such as surface or outline or on-primary, that components style themselves against instead of reaching for a palette value.

The declaration that a page or element supports light or dark rendering, which also tells the browser which palette to use for scrollbars and form controls.

A coordinate system for describing colour, where the choice of axes decides whether arithmetic like mixing or stepping a ramp matches what the eye sees.

A colour pinned at a position along a gradient, with an optional hint between two stops that moves the halfway point of the transition off centre.

Whether a colour reads warm (toward red and orange) or cool (toward blue), the axis designers use to bias a neutral grey without changing its lightness.

A complete named set of colour values a product can swap in whole, so light, dark, high contrast and per-tenant branding are the same mechanism.

A named colour decision stored once and referenced everywhere, so retheming is a change to the value rather than an edit at every place it is used.

A circular arrangement of hues that makes relationships between colours geometric, so a scheme becomes a shape drawn across the circle.

A CSS function that blends two colours by a chosen percentage in a chosen colour space, so hover and disabled variants are derived rather than hand-picked.

Two hues sitting opposite each other on the colour wheel, the pairing that produces the strongest contrast and the loudest accent.

A gradient whose colours sweep around a centre point like a clock hand rather than along a line, the shape behind pie charts, colour wheels and progress rings.

A muted companion to an accent, light enough to fill a chip or a card behind ordinary text, so an accent can shade a region without shouting.

A number from 1:1 to 21:1 describing how far apart two colours sit in relative luminance, used to decide whether text on a background is readable.

A CSS keyword meaning the element's own text colour, letting borders, icons and fills inherit whatever colour the surrounding text happens to be.

A second palette built on dark surfaces with light foregrounds, derived from the light one by rebalancing lightness and saturation rather than by inverting it.

Adding fine noise to a gradient or image so the eye averages neighbouring pixels into the missing intermediate colours, hiding the bands.

A data palette built from two sequential scales meeting at a neutral midpoint, used when values run above and below a meaningful zero.

An image rendered in two colours instead of full colour, mapping its shadows to one hue and its highlights to another so photography joins the brand palette.

The older dark theme technique of laying white over a surface at an opacity that rises with elevation, because shadows are nearly invisible on dark backgrounds.

A three-rung text hierarchy, high, medium and disabled, ranked by stepping the opacity of one foreground colour instead of naming a separate colour for each rung.

The moment a page paints in the wrong theme before the stored preference is applied, showing a light flash to a reader who chose dark.

An operating system mode that replaces a page's palette with a small user-chosen set of system colours, overriding almost everything an author specified.

Converting a colour that falls outside a display's range into the nearest one inside it, usually by lowering chroma in OKLCH rather than clipping each channel.

A fill that transitions between two or more colours across a shape, defined by colour stops and by the space the transition is interpolated in.

Material's colour space of hue, chroma and tone, which borrows hue and chroma from CAM16 and lightness from CIELAB so tone alone predicts contrast.

A colour written as a hash followed by three, four, six or eight hexadecimal digits, the notation most handoffs still speak even when the source is OKLCH.

The attribute that gives a colour its name, red or teal or violet, expressed as an angle around a colour wheel independent of how light or vivid it is.

Rotating hue deliberately along a ramp, warmer at the light end and cooler at the dark end, so a scale looks alive instead of like one colour fading out.

The convention that hover, active and selected are the next steps along the same scale rather than separate colours, so states are derived from one ramp.

A surface and text pair deliberately flipped against the current theme, so a snackbar or tooltip reads as a foreign object that arrived from outside the page.

A CSS function that takes two colours and returns the one matching the page's current colour scheme, collapsing a theme's light and dark values into one declaration.

How light or dark a colour reads, from black at one end to white at the other, held separately from its hue and its colourfulness.

A soft multi-point blend built from colours placed on a grid and smoothed between them, giving the blurred, cloudlike backgrounds a linear gradient cannot.

A scheme drawn from one hue at many lightness and saturation levels, so hierarchy comes from contrast alone rather than from colour difference.

One of the CSS keywords such as tomato or rebeccapurple that map to fixed sRGB values, a fossil vocabulary still useful for prototypes and debugging.

The greys an interface is mostly made of, ramped from page background to body text, which carry the structure while the accent carries the attention.

A colour notation of lightness, chroma and hue built on Oklab, where changing the hue leaves the perceived lightness alone and equal steps look equal.

A colour defined by what it sits on, such as on-primary or on-surface, so every fill ships with the foreground guaranteed to be readable against it.

How much of what is behind an element shows through it, applied to the whole element and its children at once rather than to a single colour value.

The role that draws boundaries, split into a stronger value for edges that must be seen and a weaker one for dividers that only need to hint at structure.

The property of a colour space where equal numeric distances look like equal visual differences, which is what makes a generated ramp step evenly.

A raw palette value named for what it is, like blue-500, sitting under the semantic layer that names colours for what they do.

CSS notation that builds a new colour from an existing one by naming an origin colour with from and then adjusting individual channels.

The brightness of a colour measured on a 0 to 1 scale after each channel is linearised, which is the input every WCAG contrast calculation actually uses.

How far a colour is from grey on a scale where 100 percent is the pure hue and 0 percent is neutral, as modelled by HSL and its relatives.

A translucent or gradient layer laid over imagery or behind a dialog, dimming what is beneath so text on top clears contrast or so focus moves forward.

The thumb and track colours of a scrollbar, which a page can set explicitly or leave to the declared colour scheme so the browser draws its own dark variant.

The single input colour an algorithm expands into a whole scheme, so a palette becomes something derived from one decision rather than picked swatch by swatch.

The highlight painted behind text a reader has selected, which a page can restyle and thereby break the contrast the operating system had guaranteed.

A colour named for the job it does rather than the colour it is, so that "danger" or "surface" can be repointed without renaming anything that uses it.

A data palette that runs light to dark in one direction, encoding an ordered quantity so that darker always means more.

A colour with black mixed in, darker than the original hue and typically used for pressed states, borders and dark theme surfaces.

The default colour space of the web, the one hex codes and plain rgb() values live in, and the baseline every wider gamut is described relative to.

A translucent sheet of the content colour laid over a control at a fixed opacity per state, so hover, focus and pressed are one rule instead of three palettes.

A colour deliberately excluded from theming because it sits on something that never changes, such as a label over a photo or a fixed brand mark.

The small fixed set of colours a product reserves for outcome, typically success, warning, danger and info, so meaning is consistent wherever it appears.

The colour of a plane that content sits on, defined as a set of stacked levels so a card on a page and a sheet on a card are told apart by value.

A wash of the primary colour blended into a surface in proportion to its elevation, so height reads as a colour shift rather than only as a shadow.

A small block of flat colour shown as a sample, used in pickers and documentation to stand in for a value the reader cannot otherwise see.

A CSS keyword such as Canvas, CanvasText or LinkText that resolves to a colour chosen by the operating system rather than by the page.

A colour with white mixed in, lighter than the original hue and used for faint fills, hover washes and subtle backgrounds.

A grey with a trace of the brand hue mixed in, so backgrounds and borders belong to the palette instead of reading as a separate, colder system.

The light grey and white checker grid a design tool paints behind transparent regions, a convention so universal that the pattern itself now reads as meaning alpha.

A palette of three hues spaced evenly around the colour wheel, vivid by construction and usually applied with one hue dominant.

A dark palette whose background is pure black rather than near black, which switches OLED pixels off entirely but makes elements look like they float in a void.

Apple's treatment where foreground colour is derived from the blurred content behind a material, so labels on a translucent panel shift with whatever they sit over.

Colour beyond what sRGB can express, addressed in CSS through spaces such as display-p3 and rec2020 and shown only on displays that reach that far.