Colour palette generator

In the perceptual OKLCH colour space. Every step keeps the hue of your colour and only the lightness changes, from 50 (near white) to 950 (near black). Chroma (colourfulness) is kept relative: each step gets the same share of the most colourful value a screen can show at that lightness as your colour has at its own, so a vivid colour stays as vivid as each step allows and a muted colour stays muted throughout. Your own colour is placed unchanged at the step whose lightness is nearest to it, so it is always part of the scale.

By rotating the hue in OKLCH while keeping the lightness: complementary adds 180°, analogous adds and subtracts 30°, triadic adds 120° and 240°, split complementary adds 150° and 210°, tetradic adds 90°, 180° and 270°. Because OKLCH is perceptual, the companions look exactly as light as your colour, which classic HSL rotation does not guarantee. Their chroma aims for your colour's, but an sRGB screen cannot show every hue equally vividly, so where the rotated hue falls outside the gamut the chroma is reduced until it fits (pure red's complement, for example, keeps less than half); the swatch and the JSON export say when that happened and how much chroma survived.

For each swatch the tool picks black or white, whichever gives the higher WCAG 2.x contrast ratio, and shows that ratio. Normal text needs 4.5:1 for AA; large text and UI components need 3:1. To check any other pair, use the Colour contrast checker.

Not on this page. The palette is deterministic: the same colour and harmony always give the same result, so it can be regenerated later or by a script. Image sampling and random palettes with locked swatches are not offered until they work.

The CSS file holds :root custom properties named after your token name, for example --brand-500. The JSON file holds the same values with the harmony offsets, the recommended text colour per swatch, a note of how each set was built (relative chroma for the tonal steps, gamut-mapped chroma for the harmonies) and, per harmony colour, whether its chroma had to be reduced to fit sRGB. The SVG is a swatch sheet with hex labels that opens in any browser or design tool. All three are built on your device; there is no server.

No. The page loads a small script into your browser and every calculation runs on your device. You can check this yourself in the browser's network panel: after the page has loaded there are no upload requests. Closing the tab discards what you entered.

No. These basic tools are free, have no limits set by us and store nothing on our servers.

Nothing you open or type. While the tab is open, the tool pages keep a short list of the steps taken in it, in the tab's session storage: the step (page opened, started, succeeded, first success, used again or failed), the tool's name, the time, how many files were used and, for a failure, an error code; never a file name, the contents of a file or your text. It holds at most the latest 200 steps, and the browser deletes it when the tab closes. The page never sends it. Where a Report a problem button is shown, you can attach the last 20 steps to your report; nothing is attached unless you tick that box. In local storage the page keeps only choices you made: a Light or Dark theme until you choose System again, the language you picked with the EN / 中文 switch if it differs from your browser's language, and this tool in your recently used list if you switched that list on at the tools page.