Palette Generator

Lightness carries it, hue only decorates

Five colours at the same lightness read as flat, however far apart the hues are. The reason is that the eye sorts a scene by brightness before it sorts it by colour — luminance is what defines edges, depth and hierarchy, and hue is what comes after that has been settled. A palette with a wide spread of lightness looks designed even when the hues are dull; a palette of vivid hues at one lightness looks like a colour wheel that has been rotated.

The practical version of this is to decide the lightness of each role before choosing any hue. Something has to be the darkest thing on the page and something the lightest, and the pair that matters most — text on its background — has to be far enough apart on that axis to read. Once those positions are fixed, the hues can be moved around them more or less freely, which is what makes a brand colour change a smaller job than it sounds.

Nine steps, and what each one is for

A ramp is a tool rather than a decoration, and it works because each step has a job waiting for it. Nine is the honest minimum: fewer than that and two adjacent steps stop being visibly different, more and you are maintaining colours nobody can tell apart.

50, 100   page backgrounds, tinted panels, hover fills
      200, 300  borders, dividers, input outlines
      400, 500  the mid range — icons, muted text, chart fills
      600, 700  interactive fills: buttons, links, the accent itself
      800, 900  headings and body text on a light surface

      Each step is worth roughly one visible change. Two steps
      apart reads as a different colour; one step apart reads as
      the same colour in slightly different light, which is what
      hover states are for.

The scale exists so those decisions are made once. A team that has a ramp reaches for 600 for a button and stops thinking; a team without one re-decides the button on every screen, and ends up with four blues that are nearly but not quite the same. The ramp is not about having more colours — it is about not having the same argument repeatedly.

The greys carry the interface

Everything that is not a brand moment is a grey: text, borders, dividers, input outlines, hover fills, table stripes, disabled states, the surfaces things sit on. That is most of the pixels on most screens, and it is the part of a palette that gets skipped, because a neutral ramp is not interesting to choose. The habit of reaching for the brand hue at low opacity instead produces something that looks almost right: a page where every element is faintly tinted, and nothing is ever quite neutral enough to get out of the way.

The gap between a surface and a raised surface is a small-number problem worth its own decision. A card that differs from the page behind it by a couple of percent of lightness has no edge and reads as a printing error; one that differs by too much bands, and the page looks like it is made of stacked paper. Somewhere in the middle there is a step that reads as raised without being loud, and it is usually nearer the small end than people expect.

Disabled states are the other one that goes wrong, and always in the same direction. A disabled control is meant to be visibly out of service while staying legible, and the usual treatment — fading the whole thing to a low opacity — takes text that was already at the contrast floor and drops it below. A disabled button nobody can read is a broken button, whatever the exemption in the guidelines says.

Name a colour by its job

A token called blue-600 describes the value. A token called --accent describes the role, and the difference shows up the first time the brand changes: every call site that says blue-600 is now a lie, and every one that says --accent gets a different value. The name is the part of a palette that outlives the colours, so it is worth getting right before there are four hundred references to it.

Roles also make the failures visible. A palette organised by role has a slot for the muted text on a dark surface and a slot for the accent on a tinted panel, so a missing one is obvious — there is nowhere to put the value, which is the moment to notice that the pair has never been checked. Organised by hue, the same gap is invisible until someone needs it. Every text-on-surface pair here is worth passing through the Contrast Checker before it reaches a review, since a muted grey that clears the threshold on the page background will not clear it on a card.