Your working palette
Most colour tools are one-shot: you get an answer, you copy it, you close the tab. The working palette is the opposite — a small list of colours you keep, that every tool on this site reads and writes. Build it once and the scales, the contrast audit and the interface preview all already know about it — and the audit opens into an accessibility studio that says what each colour can be used for, and which step of its own scale fixes what it cannot.
How colours get in
Five ways, and they all write to the same list — so a palette can start from a photograph and finish with a harmony without ever being retyped.
- Image color picker
Click a pixel in a photograph, logo or screenshot and keep the exact value.
- Palette from image
Extract a whole palette from one image, then replace the example with your own.
- Harmony generator
Derive complements, triads and tetrads from a colour you already have.
- Gradient generator
Build a two-stop gradient, and keep either or both stops.
- Color converter
Paste a hex, RGB, HSL or OKLCH value and add it to the palette from there.
What reads it
Five views onto the same colours. Every one of them is derived from the palette, on your device, each time you open it — and only the color system writes to it, because an assignment there is your authorship, not a derivation.
Tonal scales
Each colour becomes a 50–950 tonal scale in OKLCH, gamut-safe, with the WCAG contrast of every step against white and black. Export the whole set as CSS, Tailwind or JSON.
Accessibility studio
Every colour is measured against white and black — as body text, as large text and as a border or focus ring — and where it cannot serve a role, the nearest step of its own scale that fixes it is offered. Every pair in the palette is measured against WCAG 2.2 too, and a failing pair is offered the nearest colour that passes with its hue kept. Nothing changes until you press the button.
Open the accessibility studio with an example palette
Comparing one pair? check the pair on its own instead.
UI preview
The palette is mapped onto the roles a real interface needs — a stage, ink, one colour that means “press me”, the statuses — and painted onto a believable product in light and dark. It shows you where each colour would actually be useful, and how each one measures against the surface it lands on.
Color system
The palette, authored into the twelve semantic roles a product consumes — primary, accent, surface, focus ring and their neighbours — in light and dark, with the state colours (hover, active, selected, disabled) derived and measured. Export the result as design tokens: W3C DTCG JSON, SCSS variables or a named Tailwind theme.
Build the example color system , or go straight to the color system builder if you want to work on the palette already on this device.
The eight steps
The workflow the palette makes possible, from the image it came out of to the stylesheet it ends up in.
- Discover Find colours worth keeping.
- Extract Pull them out of an image.
- Build Assemble one working palette.
- Understand Convert, name and measure them.
- Fix Repair contrast that fails.
- Transform Harmonies, gradients, tonal scales.
- Preview See it on a real interface.
- Export The color system as tokens; CSS, Tailwind, JSON, SVG and PNG.
Where it is stored
In your browser, on your device — not on a server, because there is no server. Four records are written in total, and the palette is one of them: the list of hex values you kept, your light, dark or system appearance choice, and one best score each from the colour memory game and the reflex game. No account, no cookie, no third-party script, and no image, file name, coordinate or sampled colour is ever stored.
A palette can be shared as a plain URL — the colours live in the query string, so a link carries them without anything being sent anywhere.
What it is not
It is not an account and it does not sync: the palette — and the role assignments you make in the color system — live in one browser on one device, so clearing site data clears both, and neither will follow you to a second machine.