$ cd ..
// ~/playground/palette

Palette

Space bar, lock, repeat

Tap space for a new palette. Lock the colours worth keeping and tap again. Pick a harmony rule, or drop in an image and pull the colours out of it. Every colour is worked out in OKLCH, so a step in lightness looks like a step.

Colours from
Colours
5

 

space new palette 1–8 lock a colour z back shift+z forward e edit the selected colour c copy its hex k keep on the shelf

Colour 1 on the wheel

Angle is hue, distance from the centre is chroma. The coloured area is everything a normal (sRGB) screen can show at the selected colour's lightness, so it changes shape as you move the lightness slider. Drag any dot.
Nearby palettes
One small move from where you are. Click one to go there, then look again. Locked colours stay put.
On a page
OverviewReportsSettings Sign in
New
See where the month went

Every account in one place, sorted into categories you choose. How sorting works

Get startedSee a demo
Spent this month
$2,418 12% under
By category, in palette order
Monthly summary by email
you@example.com
Subscribe
Sent on the 1st. Stop any time.
    The palette gets jobs: the lightest colour (the darkest on a dark page) is the background, the loudest of the rest is the primary colour for buttons, and the accent is the one least like it. If a colour can't do its job as it is, its lightness is moved until it can, and the list above says so. The chart uses your colours untouched.
    Tints and shades
    Each colour stretched into eleven steps, light to dark, same hue. You need these the moment a colour goes on a page: a pale step for a background wash, a darker one for hover, the darkest for text. The outlined step is the colour itself. Click a step to copy it. The whole set is under "CSS + scales" below.
    How other eyes see it

    About 1 man in 12 and 1 woman in 200 has some red-green colour blindness. These rows show the full-strength form of each kind, so most people see something between the top row and theirs. If two colours carry different meanings, they should still look different in every row.
    Where you've been
    Every palette from this visit, newest first. Click one to go back to it.
    The shelf
    Kept palettes are saved in this browser.
    Text contrast, every pair
    Each cell is the row's colour as text on the column's colour, with the WCAG contrast ratio. 4.5 passes for body text (AA), 3 for large text, 7 is AAA. Dimmed cells fail.
    Take it with you
    How it picks colours
    • OKLCH describes a colour by lightness, chroma (distance from grey) and hue angle. It was built so equal steps in a number look like equal steps to the eye. In HSL, yellow and blue at "50% lightness" are nowhere near the same brightness. In OKLCH they are.
    • A rule picks the hues: a set of angles on the wheel, measured from a base hue. Triadic is three spokes 120° apart. If you lock a colour, the rule is hung on its hue, so the new colours are in harmony with the one you kept.
    • Kind of colour sets the lightness range and how much of the available chroma to use. The free colours are spread across the lightness range so no two come back alike.
    • Chroma has a ceiling that depends on lightness and hue. A screen can show a very strong blue at low lightness and a very strong yellow at high lightness, and not the other way round. When a colour asks for more than the screen has, the chroma is lowered until it fits. Lightness and hue are left alone.
    • Each tap draws eight palettes and keeps the one whose two closest colours are furthest apart.
    • From an image, the pixels are sorted into about fourteen groups of similar colour (k-means, measured in OKLab). The first palette takes the biggest group, then whichever groups are most unlike the ones already taken. Each tap after that rolls dice with the same leanings.
    • Colour-blind rows use the Machado, Oliveira and Fernandes (2009) model at full strength. It is a simulation of what the eye loses, good for spotting pairs that collapse, and not a substitute for asking someone.
    • Everything is kept inside sRGB. Wider-gamut (P3) screens can show more, and this tool doesn't use it yet.

    $ cd .. → more interactives