Skip to content
install

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

tool · one of 51 Pro token file

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

One brand colour becomes eleven steps, with the pairs that can carry text
reads the colour you type, never the page
writes nothing
sends nothing
scale eleven steps, 50 to 950, in OKLCH
contrast WCAG ratio and APCA, every pair
exports Tailwind v4, CSS, Style Dictionary, Figma
plan free to build and read · Pro copies the tokens
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

in the panel · this one is Pro

section#about

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.

section#asked

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 does Pro add?

Copying and saving the token file. The scale, the swatches and the whole contrast matrix are free to build and read.

how to use palette

  1. Open Palette and set the brand colour, by hex or with the picker behind the swatch.
  2. Read the eleven steps, 50 to 950, spaced in OKLCH so equal steps look equal.
  3. Check the matrix for which pairs carry text under both WCAG and APCA.
  4. Pick Tailwind v4, CSS, Style Dictionary or Figma variables and take the tokens.
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

96 of these · no host permissions · three free audits