Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Color Theory for Interfaces

The working subset of colour theory for screens: three dimensions, a handful of harmonies, and perceptual colour spaces that behave predictably.

Definition

Colour on screen is described by hue, saturation and lightness, and manipulated through colour spaces. For interface work, perceptually uniform spaces such as OKLCH are more useful than HSL because equal numeric steps produce equal perceptual steps.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Colour spaces you will actually use
  3. Harmony schemes, and when each is useful
  4. In practice
  5. Sources
  6. Continue from here
hueMonochromaticOne hue, several lightness steps. Safest for interfaces.AnalogousNeighbouring hues. Calm, and good for sequential data.ComplementaryOpposite hues. Maximum contrast for one accent.
Hue arranged around the wheel. Harmony schemes are relationships between positions on it, not rules about which colours are allowed.

Colour spaces you will actually use

SpaceGood forLimitation
HEX and RGBInterchange, developer handoffNo perceptual meaning. Cannot be reasoned about.
HSLQuick manipulation, legacy codeLightness is not perceptual. HSL 50 percent lightness is very different for yellow and blue.
OKLCHBuilding palettes and themesWide browser support since 2023, but needs fallbacks for older targets.
LAB and LCHColour science, gradientsSimilar benefits to OKLCH; OKLCH generally behaves better in the blue range.
P3Wide-gamut displaysNeeds an sRGB fallback, and can exceed the gamut of older screens.

Harmony schemes, and when each is useful

  • Monochromatic: one hue at multiple lightness levels. Safest for interfaces, since it cannot clash.
  • Analogous: neighbouring hues. Calm, and useful for sequential data.
  • Complementary: opposite hues. Maximum contrast, which suits an accent against a neutral base.
  • Split complementary: softer than complementary and easier to balance.
  • Triadic: vivid and hard to control in interfaces. Usually too much for product UI.

In practice

Building a ramp in OKLCH

Design systems

Holding hue and chroma steady while stepping lightness produces a ramp where each step feels evenly spaced. The same operation in HSL produces steps that bunch in the middle and wash out at the ends.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  • CSS Color Module Level 4

    W3C

    Defines lab(), lch(), oklab() and oklch() in CSS.

  • A perceptual color space for image processing

    B. Ottosson, 2020

    Introduces Oklab, the basis for OKLCH.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.