Skip to content
UX Atlas
Plate FND·019 · UI foundationGrid D1 · Rev. 2026-08-14

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.

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2Colour spaces you will actually use
  3. 3Harmony schemes, and when each is useful
  4. 4Choosing a palette for an interface
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Building a palette from scratch.
  • Converting a brand colour into a usable interface ramp.
  • Choosing a colour space for design tokens.
  • Starting a palette from scratch, or rebuilding one that has grown by accretion.

Common mistakes

  • Too many hues.
  • Reasoning about lightness in HSL.
  • Wide-gamut colours shipped without an sRGB fallback.
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.

Choosing a palette for an interface

Do

  • Start from the one colour the product must have, then build everything else around it.
  • Work in a perceptual space, so equal numeric steps look like equal steps.
  • Decide the neutrals before the accents. They cover most of the screen.
  • Check every foreground and background pair you intend to allow.

Do not

  • Pick a harmony scheme first and fit the product to it.
  • Use more than one accent until you can say what the second one means.
  • Build a ramp by adjusting saturation, which moves lightness unpredictably in most spaces.

In practice

  1. i.

    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.

  2. ii.

    The palette that could not express state

    What to reserve

    A brand palette of five colours, all used decoratively, left nothing to say error or success with. Reserving hues for meaning before spending them on decoration is the order that works.

Local chart

FND·019 · Region II · Grid D1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

OKLCHTERM·065 · SHORT DEFINITIONDesign TokensSYS·001 · RELATED CONCEPTBrand Color in InterfacesFND·024 · RELATED CONCEPTColor AccessibilityFND·028 · RELATED CONCEPTColor SystemsFND·026 · RELATED CONCEPTDark ModeFND·027 · RELATED CONCEPTData Visualization ColorFND·029 · RELATED CONCEPTHueFND·020 · RELATED CONCEPTLightnessFND·022 · RELATED CONCEPTNeutralsFND·025 · RELATED CONCEPTSaturationFND·021 · RELATED CONCEPTSemantic ColorFND·023 · RELATED CONCEPT

Sources

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

  1. [1]

    CSS Color Module Level 4

    W3C

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

  2. [2]

    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.