---
title: Colour
lang: en
status: accepted
version: 1
type: principles/identity-element
layer: principle
depends_on:
  - constitutional/accessibility-is-foundational
propagates_to:
  - data-products/tokens/*
  - communication/*
  - physical/*
last_verified: 2026-08-11
last_updated: 2026-08-11
translation_status: source
translation_source: null
---

# Colour

## Why the palette looks the way it does

The Aleris colour palette is warm-shifted. Even the greys lean towards brown rather than blue. This is a deliberate choice. The brand promise — the present expert — requires everything we do to feel human and present, not institutional. Petrol gives medical credibility without becoming cold corporate blue. Orange is warm and action-oriented without becoming alarming red. Sand is calm and natural — not clinical white.

Three colour families, three roles. The palette communicates before a single letter is written.

---

## The palette

### Petrol — structure and trust

Petrol carries text, headings, navigation, and structural surfaces. It is the colour that says: we know what we are doing.

| Step | HEX | Role |
|------|-----|------|
| petrol-500 | #004851 | Primary text, headings, navigation, header backgrounds |
| petrol-400 | #4F868E | Structure and accents. Large text only, from 18 pt or 14 pt bold. Not for body text — 4.09:1 on white |
| petrol-300 | #7FA9AE | Borders, dividers, decoration. Never text — 2.56:1 on white, 2.19:1 on sand-100. Dividers between list items only in lists of six or more |
| petrol-200 | #ABC7C9 | Borders, inactive states |
| petrol-100 | #D9E1E2 | Tinted backgrounds, highlighted rows, tags |

### Orange

Orange represents the warm, approachable and active side of Aleris.

While Petrol is the informational and rational frame for our brand, Orange is our emotional layer that drives attention and action.

#### Brand orange – making Aleris come alive

The orange gives our brand a vibrant, warm character, and its brightness serves as our highlighting feature. It's decorative as well as functional. Used in its softer tints, it can create calm and soothing spaces. At full brightness, it's an accent that commands attention and drives action.

#### Interactive orange – action and warmth

Interactive orange is used for primary actions in digital interfaces. It marks priority actions that can be taken right now, on primary buttons and controls. The deeper shade of our warm coral brand orange makes it easy to spot, even in the presence of Brand orange.

The ramp holds both roles. The boundary inside it runs two ways: brand against interactive, and print-and-digital against digital-only.

| Step | HEX | Role |
|------|-----|------|
| orange-700 | #B23C0E | Interactive – hover/active on the primary interactive surface (the darker step). Digital only |
| orange-600 | #D14811 | Interactive – primary interactive surface (CTA fill), active states. Digital only |
| orange-500 | #F58C61 | Brand – accent, decorative, print. The brand orange |
| orange-400 | #FAAA8D | Brand – accent tint, backgrounds and surfaces. Print and digital. Never an interactive state |
| orange-300 | #FFBE9F | Brand – light accent backgrounds. Print and digital |
| orange-200 | #FBD1C0 | Brand – soft tint. Print and digital |
| orange-100 | #FDE8DF | Brand – lightest orange tone. Print and digital |

### Sand — the surrounding layer

Sand is the page background. It creates the calm that everything else rests against. White is for cards and surfaces — what is lifted up from the background — and for sections layered on the sand.

| Step | HEX | Role |
|------|-----|------|
| sand-100 | #F2ECE4 | Page background — pages someone reads |
| sand-50 | #FAF8F6 | Page background — surfaces someone works in |
| sand-300 | #E7CEB5 | Mid-sand |
| sand-500 | #D9B48F | Warm amber. Also = warning colour (context decides) |

### Neutral tones

| Name | HEX | Role |
|------|-----|------|
| gray-100 | #D7D2CB | Borders, dividers, inactive elements. Dividers between list items only in lists of six or more |
| gray-300 | #9E9281 | Mid-tone, warm grey |
| gray-500 | #585044 | Dark warm grey. Secondary text |
| White | #FFFFFF | Card, surface and section background. Never the page's own background |

The renumber merged two older names into the scale: *Slate* is now gray-100, and *Sand dark* is now sand-500.

**Physical environment:** the domain's everyday language *"warm white"* and *"light grey"* are material descriptions, not new palette members — they map to sand-50 and gray-100 above. See `workspace/decisions/decision-record-physical-interior-2026-08-06.md` §3.

### Pantone and CMYK

The print values are constant — the same values regardless of printer or substrate. Physical documents how to specify for different materials.

**Primary colours:**

| Colour | Pantone | CMYK | sRGB | HEX |
|------|---------|------|------|-----|
| Petrol | 316 C/U | C98 M48 Y49 K46 | 0, 72, 81 | #004851 |
| Orange | 2024 C/U | C0 M56 Y62 K0 | 245, 140, 97 | #F58C61 |
| Sand | N/A | C6 M7 Y11 K0 | 242, 236, 228 | #F2ECE4 |

**Secondary colours — petrol:**

| Step | Pantone | CMYK | sRGB | HEX |
|------|---------|------|------|-----|
| petrol-400 | 5483 C/U | C70 M31 Y37 K12 | 79, 134, 142 | #4F868E |
| petrol-300 | 5493 C/U | C54 M21 Y30 K3 | 127, 169, 174 | #7FA9AE |
| petrol-200 | 5513 C/U | C38 M12 Y21 K0 | 171, 199, 201 | #ABC7C9 |

**Secondary colours — orange:**

| Step | Pantone | CMYK | sRGB | HEX |
|------|---------|------|------|-----|
| orange-700 | Digital only | Digital only | 178, 60, 14 | #B23C0E |
| orange-600 | Digital only | Digital only | 209, 72, 17 | #D14811 |
| orange-400 | 2022 C/U | C0 M38 Y40 K0 | 250, 170, 141 | #FAAA8D |
| orange-300 | – | *not yet built* | 255, 190, 159 | #FFBE9F |
| orange-200 | – | C0 M24 Y23 K0 | 251, 209, 192 | #FBD1C0 |

**Not every step has print values.** Interactive orange – orange-600 and orange-700 – exists to hold contrast on screen, so it has no print counterpart by design. Where a Pantone cell is empty, no Pantone match exists at that tint. In print, the brand orange is orange-500.

*Two utility notes, drafted by Claude 2026-07-30, correct on sight. The empty Pantone cells above are marked differently from the legacy teal further down this page: teal has a Pantone match that is simply unconfirmed and awaiting a press check, while orange-300 and orange-200 have no match to find. And orange-300's CMYK reads "not yet built" rather than "–", because unlike a Pantone match a CMYK breakdown is derivable from the hex and validated at press: it is a value to produce, not an absence to record. It has not been computed here, because producing a print value is a press decision rather than an arithmetic one.*

**Secondary colours — sand:**

| Step | Pantone | CMYK | sRGB | HEX |
|------|---------|------|------|-----|
| sand-500 | 727 C/U | C0 M18 Y36 K15 | 217, 180, 143 | #D9B48F |
| sand-300 | 2309 C/U | C0 M11 Y22 K9 | 231, 206, 181 | #E7CEB5 |

**Neutral:**

| Colour | Pantone | CMYK | sRGB | HEX |
|------|---------|------|------|-----|
| gray-100 | Warm Gray 1 C/U | C0 M2 Y5 K16 | 215, 210, 203 | #D7D2CB |

### Gradients

Gradients carry vibrancy and character where solid petrol or orange would feel heavy. They belong on background surfaces and in visual elements — and the petrol gradient may also fill display type.

| Gradient | Dark stop | Light stop | Use |
|----------|-----------|------------|------------|
| Petrol | `--color-petrol-500` | `--color-petrol-400` | Linear or radial, max two steps |
| Orange | `--color-orange-500` | `--color-orange-300` | Linear or radial, max two steps |

*(Stops named rather than restated, 2026-09-05, per `constitutional/tokens-are-canonical.md` § 1. They were hex here, which is the shape that rule forbids in a reference table.)*

Rules: low-contrast transitions; avoid in charts where flat colours give better clarity; WCAG contrast against text must be met; never distract or dominate.

#### The petrol gradient on display type

*(Ruled 2026-09-05, Torfinn. Prose below drafted by Claude — the rule is his, the wording is a draft.)*

**The petrol gradient may fill h1 and h2. No other gradient may fill text, and no smaller type may carry one.**

**Why h1 and h2 and not further down.** Two limits, and they are not the same limit. The outer one is measured: a gradient's *lightest* stop is what has to clear contrast, and petrol's light stop is `--color-petrol-400`, which reads 3.49:1 on sand-100, 3.86:1 on sand-50 and 4.09:1 on white. That clears the 3:1 floor WCAG sets for large text and clears nothing below it, so no gradient can ever fill body text, a label, or a caption. WCAG counts anything from 24px as large, which would admit h3 at 27px. **The rule stops at h2 by choice, not by measurement** — a gradient is a device for the one line that carries the page, and it stops meaning that as soon as it appears three times.

**The petrol gradient may be used on icons on white, sand and petrol-100 grounds, and never on an orange-300 or petrol section. No other gradient is used on icons.** An icon is a non-text graphic and needs 3:1 against its ground, and a gradient is only as strong as its lightest stop. `--color-petrol-400` reads 4.09:1 on white, 3.86:1 on sand-50, 3.49:1 on sand-100 and 3.08:1 on petrol-100, and falls to 2.56:1 on orange-300. On a petrol section the dark stop is the weak one, and `--color-petrol-500` on petrol-500 is 1:1. The orange gradient's light stop, `--color-orange-300`, reaches at most 1.60:1 on white and sand.

**In a presentation, the petrol gradient may fill the heading of a title slide or a section slide, and not every slide title.** A slide has no h1, and the deck is the page: the heading that carries it is the one on the slide that opens it or opens a part of it. On every slide of a twenty-slide deck the gradient would appear twenty times, and it stops marking the line that matters as soon as it appears three times.

**No cap on how many things carry a gradient.** Consistency within a surface is a design judgement, not a counted rule; the corpus does not set a number and should not be read as implying one.

**The orange gradient is never text.** Its light stop is `--color-orange-300`, at 1.36:1 on sand-100. It fails the large-text floor by a wide margin on every Aleris ground, so the restriction is arithmetic rather than preference.

**Both stops of a gradient are the foreground.** Read a gradient by its worst stop, never its average and never its darkest — a reading that passes on the first stop and fails on the last has not passed. The same applies to a gradient used as a ground: what sits on it is measured against the stop that gives the least contrast, not against the colour the block appears to be.

---

## Status colours

Status colours communicate state — never decoration. They are used only when something has happened, is happening, or needs attention.

| Status | HEX | Role |
|--------|-----|------|
| Error | #C14444 | Validation errors, destructive actions |
| Warning | #D9B48F | Attention states (= sand-500 – context distinguishes them) |
| Confirmation | #4F866E | Completed, approved. Large text or icon only — 4.23:1 on white, and never carry the state by colour alone |
| Information | #004851 | Informative messages (= petrol — info is neutral brand communication) |

The warning colour shares its HEX value with sand-500. This is deliberate – in a status context it reads as warning, in a background context as warm sand. The ambiguity is resolved by context, not by adding another colour.

---

## Hard rules

**The page is sand, and everything is layered on it.** The page's own background is always sand. A section can be white, light petrol, light orange or, once on a page, petrol — but it is a layer on top of the sand, even when it fills the screen. Cards are white on any section. The difference between ground and layer creates the visual hierarchy that lets the page breathe: sand for the ground, white and the section colours for what sits on it.

**One primary button per surface.** Primary buttons can have two visual designs depending on context. They are either orange on light surfaces or white on dark surfaces. We never have two primary buttons on the same surface, because that forces the user to choose between two equally strong signals. Use secondary buttons or text links for other options.

**Colour never carries meaning alone.** The rule is constitutional – see `constitutional/accessibility-is-foundational.md`. It matters more for this palette than for most, because our colours are all warm: under red-green colour blindness they collapse onto a single yellow-khaki band, and hue stops distinguishing anything. Error red and success green become near-identical, so two states that mean opposite things look the same. Colour blindness is not the only case. Hue is also lost in ordinary reading conditions, for people with full colour vision – a phone in sunlight, a dimmed screen, a greyscale printout, an ageing lens. And colour has to be matched against a legend, which a worried or unwell reader has the least capacity to do. Text and icons carry their meaning with them.

*(**There is no "no dark mode" rule, and one cannot be written.** Respecting a user's local display settings — dark mode, high contrast, dynamic text size — is a legal requirement, the same class of obligation as the WCAG floors elsewhere on this page, not a brand preference to override. A positive rule covering how Aleris presents in dark mode is pending; until it exists, no hard constraint governs this.)*

**Teal is legacy, not retired.** Teal (formerly called "turquoise") is a named palette colour at *legacy tier*. Petrol is the primary in every market, including Norway. Teal is acknowledged as Aleris history and kept in the palette because it remains strongly present in Norway — where the move to petrol has been slow and teal still appears in ways that don't match the current profile. See *Legacy colours* below.

**Cream does not exist.** Replaced by sand-50 (#FAF8F6). Use sand-50 for surfaces someone works in (workspaces, tools) and sand-100 (#F2ECE4) for pages someone reads (landing pages, patient material).

**Never use arbitrary HEX values.** Every colour in the palette has a purpose and a name. Introducing your own shades — "almost petrol", "a slightly lighter orange" — breaks the consistency. The palette *is* the brand. *(The legacy tier below is the one named exception: teal is part of the palette, not an arbitrary colour.)*

---

## Legacy colours

**Teal** (formerly called "turquoise") is the former Aleris primary colour. It is not retired — it sits at a **legacy tier**: petrol is now the primary across every market, and teal is kept in the palette for a transitional period, acknowledged as part of Aleris's visual history.

Teal's *status* is the same everywhere — legacy, not primary. What differs by market is how strongly it lingers in the real world:

| Market | Teal in practice |
|---|---|
| Norway | Strong lingering presence — heavy in physical environments (signage, interiors) and still used in ways that contradict the current profile. The move to petrol has been slow; teal is kept largely to respect this attachment while the transition continues. |
| Sweden | Faint legacy trace; new work uses the core palette. |
| Denmark | Faint legacy trace; new work uses the core palette. |

| Colour | HEX | sRGB | CMYK | Pantone | Tier |
|---|---|---|---|---|---|
| Teal | #00C6B2 | 0, 198, 178 | C100 M0 Y10 K22 *(computed — validate at press)* | *To match at press (unconfirmed; a teal in this range sits near Pantone 326 / 3262 C)* | Legacy |

Handling — **replace on touch.** New work in every market uses petrol, sand, and orange; teal is not specified for new work. Existing teal is replaced with the core palette **when a surface, asset, or template is next updated** — there is no campaign to remove it ahead of that, and in the meantime it is treated as heritage, not scrubbed reactively. Most of what remains is in Norway.

**Physical environment:** *"on touch"* is read narrowly — only the surface actually being renovated counts as touched. Signage is the deliberate exception: the whole signage programme is the unit of touch, not the individual sign, so a single sign replaced spontaneously reuses the existing design rather than introducing petrol in isolation and creating an unplanned mixed style. See `workspace/decisions/decision-record-physical-interior-2026-08-06.md` §4.

---

## Accessibility

WCAG AA requires 4.5:1 contrast for normal text and 3.0:1 for large text (≥18pt or ≥14pt bold) and UI components.

### Strong pairs

| Pair | Contrast | AA text | AA large text |
|-----|----------|---------|--------------|
| petrol-500 on sand-100 | 8.75:1 | ✅ | ✅ |
| petrol-500 on sand-50 | 9.69:1 | ✅ | ✅ |
| petrol-500 on white | 10.27:1 | ✅ | ✅ |
| White on petrol-500 | 10.27:1 | ✅ | ✅ |
| gray-500 on sand-100 | 6.76:1 | ✅ | ✅ |
| gray-500 on white | 7.94:1 | ✅ | ✅ |
| White on orange-600 | 4.52:1 | ✅ | ✅ |
| White on orange-700 | 5.92:1 | ✅ | ✅ |
| petrol-500 on petrol-100 | 7.73:1 | ✅ | ✅ |

petrol-500 on sand or white is the standard pair. It clears every threshold with a good margin.

### Pairs that require judgement

| Pair | Contrast | AA text | AA large text | Guidance |
|-----|----------|---------|--------------|------------|
| petrol-500 on orange-500 | 4.30:1 | ❌ | ✅ | Works for large text and UI components. No longer the recommended button |
| gray-300 on white | 3.05:1 | ❌ | ✅ | Large text only. Not for body text |
| gray-300 on sand-100 | 2.60:1 | ❌ | ❌ | Decoration only |
| petrol-300 on sand-100 | 2.19:1 | ❌ | ❌ | Decoration only |
| Confirmation (#4F866E) on white | 4.23:1 | ❌ | ✅ | Close to AA — always complement with an icon |
| Warning (#D9B48F) on white | 1.93:1 | ❌ | ❌ | Never as a text colour. Use as border or background with petrol text |

### Figure-ground: a fill against its surface

WCAG 1.4.11 requires 3:1 between a component and the surface behind it.

| Pair | Contrast | | 
|-----|----------|---|
| orange-600 on sand-100 | 3.85:1 | ✅ figure-ground fine |
| orange-600 on petrol-500 | 2.27:1 | ❌ never – this is why the primary button inverts on petrol |

### Retired

| Pair | Contrast | |
|-----|----------|---|
| White on orange-500 | 2.38:1 | the production failure this supersede removes |

### The interactive orange

**White text on the interactive orange meets accessibility requirements.** Interactive orange (#D14811) with white text gives 4.52:1. The minimum-size workaround this page previously described is no longer needed, and petrol text on orange is no longer the recommended button.

**An orange fill is never placed on a petrol surface.** Interactive orange on petrol gives 2.27:1, below the 3:1 that WCAG 1.4.11 requires between a component and its background.

**The colour is constant. The treatment follows the surface.** On light surfaces – sand, sand 50, white – the primary button is an interactive orange fill with white text. On petrol it inverts to a white fill with petrol text.

**Both variants darken on hover.** On a light surface the primary button darkens to #B23C0E and white text rises to 5.92:1. The inverted button already sits at the palette's highest contrast, so darkening lowers it: the fill moves to a petrol tint (#D9E1E2) at 7.73:1, a visible change that stays well above the floor. This replaces the earlier rule that hover always lightens, which could not hold – under white text a lighter fill always reduces contrast.

### Why colour cannot carry meaning on its own

Using colour as the only carrier of information fails WCAG 1.4.1. That is a Level A criterion – the lowest conformance bar, below everything else on this page.

For this palette the problem is specific. Every Aleris colour is warm, and warm colours converge under red-green colour blindness. An independent simulation of deuteranopia and protanopia (Machado 2009) puts the whole palette onto a single yellow-khaki band, where hue no longer distinguishes anything. The status pair is the worst case: error red (#C14444) and success green (#4F866E) sit ΔE 76.9 apart in normal vision and ΔE 14.6 apart under protanopia, and success stops reading as green at all. Two states that mean opposite things become near-identical.

Around 8% of men have red-green colour blindness, but the reasons colour fails are wider than that. Hue is also lost in ordinary reading conditions, by people with full colour vision: a phone screen in sunlight, a device dimmed for battery or for night, a page printed or photocopied in greyscale, an older reader whose lens has yellowed. Most of our traffic is mobile, so these are the normal conditions rather than the edge cases. And colour has to be matched against a legend held in memory, which is what a worried, tired or unwell reader has least of.

This is a requirement about difference. Pairing colour with an icon is not enough on its own if the icons do not tell the states apart – seeing that something has a state is not the same as knowing which state it is. Error and success must be distinguishable from each other without colour.

---

## Contextual: how the palette adapts

The palette is constant. The composition is contextual.

A landing page for patients uses sand generously, petrol as the text colour, and orange as an occasional accent. The feel is calm and accessible. A clinical interface for staff compresses the palette — petrol takes more space, sand recedes, information density increases. A printed patient brochure can give sand a dominant role to create the calm the format allows.

Same colours, different composition. What governs the composition is the recipient's emotional mode, the conditions of the channel, and the nature of the content. See *Emotional Mode as a Design Entry Point* and *Constant and Contextual* for the framework.

Baseline (digital), Communication, and Physical document how the composition is applied in their context.

---

## Quick test

Before you make a colour decision:

1. **Is the colour in the palette?** If not — don't use it. Never introduce your own shades.
2. **Are you using the colour in the right role?** Petrol for structure, orange for action, sand for background, status only for state.
3. **Does the combination meet the accessibility requirements?** Check the contrast table above, and check the second carrier – the colour-alone rule is constitutional, see `constitutional/accessibility-is-foundational.md`.

---

*The palette communicates before a single letter is written. Petrol, sand, and orange — in the right composition, in the right context — are Aleris. Swapping them out, mixing in your own shades, or ignoring their roles doesn't make the material more creative. It makes it less recognisable.*