Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Hue

The attribute that names a colour, and the one that carries cultural and semantic meaning.

Definition

Hue is the position of a colour around the colour wheel, expressed in degrees. It is what makes something read as red, green or blue, independent of how light or saturated it is.

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

On this page
  1. Definition
  2. Hue carries meaning that is not universal
  3. Working with hue in a system
  4. In practice
  5. Continue from here

Hue carries meaning that is not universal

Red as danger and green as safe are widespread in Western contexts but not global. In several East Asian financial markets, red indicates a rising price and green a falling one, which is the opposite of the Western convention. Colour associations with mourning, luck and celebration also vary considerably.

The practical consequence is that hue can carry meaning within a product only if the meaning is also stated in text or icon. That requirement already exists for accessibility reasons, and it solves the localisation problem at the same time.

Working with hue in a system

  • Keep the number of distinct hues small. Each one is a meaning users must learn.
  • Hues at similar lightness are hard to distinguish for people with colour vision deficiency, so vary lightness as well as hue.
  • Perceived lightness varies by hue at identical numeric values. Yellow reads lighter than blue at the same HSL lightness, which is why perceptual spaces matter.
  • Hue shifts slightly across a ramp can look more natural, but they must be deliberate and documented.

In practice

Financial market colour reversal

Internationalisation

Products serving both Western and East Asian markets either localise the up and down colours or use direction and sign as the primary signal, with colour as reinforcement.

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.