Bhinish Dhiman
How to turn one brand colour into design tokens, 50 to 950
Enter the brand colour in the ramp generator and give the scale a token name. It builds eleven steps, 50 to 950, at fixed OKLCH lightness targets using your colour's hue and chroma, then measures every step against white and black to pick text, large-text, border and surface roles for each theme. Copy roles gives those as CSS custom properties with a dark-scheme block; the code panel gives the raw steps.
The method behind a token ramp (hold the hue, walk the lightness, give jobs to steps by measurement) is set out in How to build an accessible palette from a single brand colour. This guide is the mechanical half: what the ramp and token generator does with the hex you give it, where the result surprises people, and how to get two kinds of token out of it without mixing them up.
A design token is a named value that components reference instead of a raw colour. The tool hands you two kinds. A step token, such as --brand-600, names a position on the ramp. A role token, such as --brand-text, names a job, and in each theme it points at whichever step does that job.
Building the ramp and its roles
- Enter the brand colour. Type it into the “Brand colour” field or use the swatch beside it. The field takes a hex code, and also rgb(), hsl() or oklch() values.
- Name the scale. “Token name” starts as brand. It is lower-cased, and anything other than letters, digits and hyphens becomes a hyphen, so “Ocean Blue” gives
--ocean-blue-500. - Read the strip. Eleven swatches, 50 to 950. The one labelled “yours” is the step whose target lightness is nearest your colour’s.
- Read the Light theme and Dark theme cards. Each lists four roles with the step chosen, what the role is for, and the measured ratio.
- Press Copy roles in the bar at the bottom. It copies the role tokens for both themes as CSS custom properties.
- Copy the steps from the code panel. Choose CSS, Tailwind or JSON above it and press Copy.
- Press Share if a developer needs the same ramp. The link carries the colour and the token name, so it rebuilds exactly this.
The eleven targets are fixed
The tool takes only two things from your colour: its hue and its chroma. Lightness comes from a fixed table, the same for every brand, and chroma is scaled per step so the pale and deep ends stay displayable. Where a step still cannot hold that chroma on screen, it is pulled in further, with hue and lightness left alone.
| Step | OKLCH lightness | Share of your chroma |
|---|---|---|
| 50 | 0.972 | 14% |
| 100 | 0.938 | 26% |
| 200 | 0.878 | 46% |
| 300 | 0.800 | 68% |
| 400 | 0.702 | 88% |
| 500 | 0.608 | 100% |
| 600 | 0.524 | 96% |
| 700 | 0.442 | 84% |
| 800 | 0.362 | 68% |
| 900 | 0.286 | 50% |
| 950 | 0.212 | 36% |
The spacing is not uniform. It is tightest at the pale end, where 0.034 separates 50 from 100, against 0.098 between 300 and 400, so the lightest tints sit much closer together than the mid-tones.
Your exact hex is not in the ramp
This is the surprise. Because lightness comes from the table, your colour appears in the ramp only if its lightness happens to equal a target. Otherwise the step marked “yours” is a neighbour built at the target lightness, often with a different share of your chroma.
The tool opens on #2563eb, which sits at an OKLCH lightness of 54.6%. The nearest target is 600, at 0.524 (0.022 away, against 0.062 for 500), so 600 is marked “yours” and the bar’s button reads “Base is 600”. That step is built at 0.524 with 96% of the chroma, so it is close to #2563eb but not #2563eb.
Pressing that button replaces the colour you entered with the ramp’s own value for the step. Do it only if you mean to adopt the ramp’s version as the brand colour. If the brand hex has to appear in the code exactly, keep it as its own token beside the ramp rather than editing a step.
How a role chooses its step
Each role has a requirement, and the tool walks the ramp from the surface end until a step meets it. On the light card the walk starts at 50 and heads towards 950, measuring each step against white; on the dark card it starts at 950 and heads towards 50, measuring against black. The first step that clears is taken, which means the least extreme step that still passes.
| Role | What the tool says it is for | Needs | Light theme | Dark theme |
|---|---|---|---|---|
| text | Body copy on the page background | 4.5:1 | First step from 50 that clears it on white | First step from 950 that clears it on black |
| text-large | Headings 24px and above | 3:1 | As above, at 3:1 | As above, at 3:1 |
| border | Input borders and other controls that need to be findable | 3:1 | As above, at 3:1 | As above, at 3:1 |
| surface | Tinted background blocks | Nothing | Step 50 | Step 950 |
Two things follow. Text-large and border share a threshold and a search, so they always land on the same step. And the border role lands darker than many people expect. For a neutral ramp, where OKLCH lightness is the cube root of relative luminance, step 500 gives 1.05 ÷ (0.608³ + 0.05) ≈ 3.8:1 on white and step 400 gives 1.05 ÷ (0.702³ + 0.05) ≈ 2.7:1. So a border that shows where an input is, and therefore needs 3:1, sits at 500 or darker on white. A purely decorative divider has no requirement and can be as pale as you like.
If no step on a ramp reached a role’s ratio, Copy roles would write that line as a comment saying so, rather than leaving the role out silently.
Wiring role tokens to step tokens
Copy roles writes hex values, a :root block for the light theme and a second block inside a prefers-color-scheme: dark media query. The code panel writes the step tokens: CSS gives --brand-50 to --brand-950, Tailwind gives a colors object in hex for a JavaScript config, and JSON nests the eleven steps under the token name.
To keep the two in step when the brand colour changes, paste the step tokens, then point each role at the step its card named instead of at a copied hex:
:root {
--brand-text: var(--brand-600); /* the step the Light theme card chose */
}If your site switches theme with a class or attribute rather than the system setting, move the dark block under that selector.
Use the code panel rather than the Export button in the bottom bar for steps. Export is shared across the colour tools and names colours by position, brand-1 to brand-11, not by step.
Other ways to do it
There is no built-in method on macOS, Windows or iPhone for building a token ramp, and no command-line route among those these guides vouch for. By hand, the earlier guide’s method works with any colour picker that shows OKLCH and a contrast checker to measure each step against each ground.
Checking that nothing is sent
There is no file involved, and the colour and token name are kept after the # in the address bar, which browsers do not send to the server. With DevTools open on the Network panel, change the brand colour a few times and watch: nothing that goes out carries it.
Open the ramp and token generator with your brand hex and read the two role cards before the swatches. If you work in Tailwind v4, the Tailwind colours tool builds the same eleven steps and exports them as an @theme block.