A retail bank's brand team insists its exact teal sit at the middle step of the palette ramp, but the ramp looks uneven; how do you build consistent brand and extended palettes?

## Brand palette and extended palette A design system's color palette usually has two layers of raw material: | Layer | What it holds | Who cares most | |---|---|---| | **Brand palette** | The hues that carry identity - for a retail bank, its teal and perhaps a deep navy - plus the neutrals | Brand and marketing teams | | **Extended palette** | Supporting hues the interface needs - reds, ambers, greens, blues, purples - each as a full ramp | Product designers and engineers | The extended palette is still raw material. Which red becomes the error color, which green means success and which hues feed charts are decided afterwards in functional roles and data-visualisation palettes. The job here is to make the ramps themselves consistent. ## Why forcing the brand value to the middle breaks the ramp A ramp's steps follow **lightness targets** - for example ten values from nearly white to nearly black. A brand color has a fixed lightness of its own. If the teal is fairly dark but is declared to be the middle step: - the steps between it and black must be squeezed into a short lightness range, so the dark steps look almost identical; - the steps between it and white must be stretched, so the light steps jump; - the teal ramp no longer lines up with the other hues, so step five of teal is much darker than step five of red. The brand team's goal - the exact teal, used as-is - is legitimate. The mistake is equating 'exact' with 'middle'. ## The fix: anchor by lightness 1. **Measure** the brand teal's lightness in a perceptual space such as OKLCH. 2. **Find the nearest step** among the shared lightness targets - perhaps step six or seven, not five. 3. **Anchor** the exact brand value at that step, nudging only that one step's target if it differs slightly. 4. **Generate** the remaining teal steps from the shared targets, with chroma tapering toward the ends. 5. **Show the result** to the brand team in real screens: the exact teal where it matters, with a smooth ramp around it. This turns an argument about aesthetics into a measurement both sides can check. ## Building the extended hues as a family The same shared targets are used for every extended hue, so step numbers mean comparable lightness across the whole palette. A few extra adjustments are common practice: - **Chroma per hue.** Each hue's peak chroma is set so the extended hues feel balanced with each other; some systems keep them a little below the brand hue so the brand still stands out. - **Hue shifting.** Some families look wrong at the extremes if the hue angle is held fixed. Darkening a yellow at a fixed hue tends to read as olive or muddy brown, so dark yellow steps are often shifted toward orange; light blues are sometimes nudged slightly toward cyan. - **Gamut mapping.** Each step's chroma is reduced where the display cannot show it, which affects bright yellows and deep blues most. - **Coverage, not abundance.** Add an extended hue only when the interface has a need for it; each hue is one more ramp to maintain across modes and platforms. ## Screen value versus print value Many brand colors were first defined for print. A print-defined teal may have no exact equivalent on screens, or its published screen conversion may look duller than the printed swatch. A senior answer checks this early: - agree an official **screen value** for the brand color with the brand team; - if the product targets wide-gamut displays, decide whether a more vivid variant is used there with a standard fallback elsewhere; - document which value is canonical for which medium, so the ramp is anchored to the right one. This applies equally to a native mobile app and a web product: both render in screen color spaces and both need the screen value, not the ink recipe. ## What to deliver - A brand ramp anchored at the brand value's true lightness step. - Extended ramps built on the same lightness targets and chroma rules. - A short record of the decisions: targets, per-hue chroma, hue shifts, and which step holds each brand value. - A regeneration process, so adding a hue or adjusting a target rebuilds all ramps consistently instead of being done by hand.