tool · one of 51 24-hour trial, then Pro
Palette
How do I turn one brand colour into a whole scale?
A scale made by lightening and darkening a hex value in RGB drifts in hue and has steps that look uneven. This one is spaced in OKLCH so equal steps look equal, pulls chroma back into sRGB instead of clipping a channel - which is what changes the hue - and prints a contrast matrix underneath, because a scale is only worth exporting once you know which of its pairs can carry text.
Reach it Press ⌘ + K on any tab and type palette. Ctrl + K on Windows and Linux
in the panel · 24-hour trial, then Pro
What this actually is
Starting a design system from a brand colour somebody handed you, adding a second accent to an existing one, or checking which step of a scale is dark enough to put body text on before a designer finds out the hard way.
Asked about this tool
Why is my 500 quieter than the colour I typed?
Because a very saturated brand colour sits outside what sRGB can show at some lightness levels. The step keeps its hue and gives up chroma rather than clipping one channel, which is the change that turns a blue slightly purple.
Why print APCA as well as the WCAG ratio?
The WCAG ratio is what an audit checks today; APCA is the candidate for WCAG 3 and is better at dark backgrounds and thin text. A pair that passes one and fails the other is worth knowing about before it is in a component.
Does it sample colours from the page?
No. The scale is generated from the one colour you give it. To take colours off a live site, the UI tab's Extract and the colour picker are the tools for that.
What comes out of it?
A token file to copy or save, built from the scale, the swatches and the contrast matrix you see in the tool.
how to use palette
- Open Palette and set the brand colour, by hex or with the picker behind the swatch.
- Read the eleven steps, 50 to 950, spaced in OKLCH so equal steps look equal.
- Check the matrix for which pairs carry text under both WCAG and APCA.
- Pick Tailwind v4, CSS, Style Dictionary or Figma variables and take the tokens.
written about at length
101 of these · no host permissions · 24 hours of all of them