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 plate
Reach for this when
- Assigning semantic meaning to colour.
- Localising a product.
- Building a chart palette.
Common mistakes
- Assuming colour meanings are universal.
- Distinguishing categories by hue alone.
- Too many hues in one interface.
- Assuming a hue association from your own market is universal, then building meaning on it.
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.
Hue associations that do not travel
Each of these is a convention somewhere and the opposite somewhere else, which is why meaning has to be labelled as well as coloured.
| Hue | Common reading | Where it differs |
|---|---|---|
| Red | Danger, loss, stop | Prosperity and gain in parts of East Asia |
| Green | Success, growth, go | Gain in most markets, loss in some financial contexts |
| White | Clean, neutral, empty | Mourning in several cultures |
| Purple | Premium, creative | Mourning in parts of Latin America |
| Yellow | Caution, energy | Low contrast on white regardless of meaning |
In practice
- i.
Financial market colour reversal
InternationalisationProducts 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.
- ii.
Green down, red up
Market conventionStock movement colours are reversed in several East Asian markets. A trading interface that hard-codes green for gains is not merely unfamiliar there, it communicates the opposite of the truth.
Local chart
FND·020 · Region II · Grid C2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
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.
- Localisation (l10n)TERM·136 · Term
Related concept
Connected closely enough to change how you apply this.
- Use of ColorA11Y·010 · Accessibility
- Color AccessibilityFND·028 · UI foundation
- Color Theory for InterfacesFND·019 · UI foundation
- Data Visualization ColorFND·029 · UI foundation
- SaturationFND·021 · UI foundation
- Semantic ColorFND·023 · UI foundation
- InternationalizationWRT·006 · UX writing