One brand colour is not a palette, but it is enough to build one: a lightness ramp for surfaces and text, a disciplined supporting cast, neutrals with a hint of the brand in them, and semantic colours that pass contrast. A step-by-step construction you can reuse for any starting hue.
Clients and projects rarely hand you a palette; they hand you a logo. From that single colour you must somehow derive page backgrounds, cards, borders, body text, buttons, hover states, a chart that needs five distinguishable series, and an error red that does not clash. Doing this by eye, colour by colour, produces the familiar drift where every component introduces its own new shade.
The systematic approach treats the brand colour as a seed, not a swatch book. You will build: a ramp of the brand hue at controlled lightness steps, a neutral ramp tinted toward the brand, one supporting hue chosen by wheel geometry, and semantic colours chosen by role. Each with contrast checked as you go, all expressible as about sixteen tokens.
Key takeaways
- Build a 9-step lightness ramp of the brand hue in OKLCH; most interface needs live in steps 100–700.
- Tint your neutrals 2–5% toward the brand hue — it is the difference between a palette and a pile of greys plus a logo.
- Choose text colours by measured contrast, not by ramp position: on white you usually need step 700+ of a mid-chroma ramp.
- Add semantic colours (success, warning, error, info) as hues with jobs, then run each through the same ramp-and-contrast process.
Step 1: the brand ramp
Fix the brand colour's hue and chroma, then generate steps by walking OKLCH lightness from about 0.97 down to 0.25. A workable skeleton: steps at L 0.97, 0.93, 0.88, 0.80, 0.70, 0.60, 0.50, 0.40, 0.30 — call them 50 through 900. Reduce chroma slightly at the extremes: very light steps look chalky at full chroma, very dark steps look muddy, so taper chroma to about 70% at the palest step and 80% at the darkest. Keep hue constant; if your tool's hue drifts between steps (a known quirk when converting through RGB), correct it back — a ramp that wanders in hue looks like several unrelated colours.
Assign jobs by measurement, not vibes. Against white: check which step first clears 3:1 (usable for large headings, icons, borders that must be seen) and which clears 4.5:1 (body text, links). Against your darkest step, check the pale steps for dark-mode text. Those four measurements convert a pretty ramp into a working one.
Step 2: neutrals that belong to the brand
Pure greys next to a warm brand colour look like they wandered in from another website. The fix is a whisper of the brand hue in the neutral ramp: same lightness ladder, chroma dropped to about 0.01–0.02 in OKLCH at the brand's hue angle. The steps should be individually unremarkable — nobody should be able to say "that grey is orange" — but side by side against true grey the warmth is obvious, and the interface coheres.
Your neutral ramp does the heavy lifting: page background (lightest step, or darkest in dark mode), card surface (one step in), borders (two to three steps in), secondary text (a step that clears 4.5:1 against the background — measure it), primary text (near the dark end, 7:1 or better if you can). Five assigned roles, all from one ramp, is a design system in miniature.
Step 3: one supporting hue, chosen geometrically
Reach for the wheel, but sparingly. If the brand is warm (orange, red, amber), a cool supporting hue roughly opposite — teal, blue, deep green — gives you links, info states and data-viz contrast without a fight. If the brand is cool, support usually comes from a neighbouring analogous hue (blue supported by violet or teal) plus the neutrals, because a warm opposite can read as an alarm. Whichever you choose, it gets the same treatment: a short ramp (you rarely need more than three steps: light surface tint, mid for graphics, dark for text) and the same contrast checks before any text role is assigned.
Step 4: semantic colours by role, then a dark-mode pass
| Role | Conventional hue | Text-safe use requires |
|---|---|---|
| Success | green (~150°) | a step dark enough for 4.5:1 on its pale tint background |
| Warning | amber (~75°) | dark text on the amber tint — amber with white text almost never passes |
| Error | red (~25°) | similar care; red on white needs a deeper step than instinct suggests |
| Info | blue (~250°) | often doubles as the link colour — then it must pass as text everywhere links appear |
Finally, dark mode is not an inversion; it is a second assignment pass over the same ramps. Surfaces come from the dark end of the neutral ramp, text from the light end, and brand elements usually need a step or two lighter than their light-mode counterparts to hold the same perceived weight against dark surfaces. The ramps you built make this an afternoon's mapping exercise instead of a second design project — which is the entire point of building them.
Mistakes and pitfalls
Eyeballing each component's colour as you build it
Without ramps and tokens, every new component adds a new almost-brand shade, and within a year the site has forty blues. Generate the ramps first; restrict components to tokens; add new colours only by extending a ramp.
Using the raw brand colour for body text
Brand colours are chosen for punch at logo size, not for 4.5:1 at 16 pixels. Most fail as text on white. The ramp exists precisely to give you a same-hue step that passes — use it, and keep the pure brand colour for the jobs it is good at.
Forgetting the chart palette until the first chart
Data visualisation needs four to six hues distinguishable by people with colour-vision deficiency as well as by everyone else — a harder constraint than brand harmony. Derive chart colours from your ramps early, ordered so adjacent series differ in lightness as well as hue.
Common questions
How many tokens should the final palette have?
Around fifteen to twenty covers most sites: nine brand steps (of which you will regularly use six), five neutrals with assigned roles, a supporting trio and four semantic colours with a tint and a text step each. If a token has no assigned job, cut it.
The brand colour is a gradient logo. Where do I start?
Sample both endpoint colours. The more saturated endpoint usually becomes the interactive brand hue; the other often makes an excellent supporting colour. Build the ramp from the primary endpoint and continue as normal.
Should hover states be one ramp step darker?
As a default, yes — a consistent one-step move (roughly 0.05 OKLCH lightness) for hover, another for active, applied mechanically across components. Consistency of the step matters more than its exact size; users read it as one behaviour.
To wrap up
A logo is a seed, not a palette — but with a measured ramp, tinted neutrals, one disciplined supporting hue and role-first semantic colours, it is a sufficient seed. Build those once, name them as tokens, and every future page, email and chart inherits a coherent, accessible scheme instead of improvising one.
Try it yourself
The palette generator takes a single base colour and produces harmonious sets you can copy as CSS variables — a fast first draft of the ramp, ready for the contrast checks this article describes.