COLOR TOOLS
Palette Generator●
Find your colours. See them come together.
Hover between colours to add. Use Move to drag, or focus it and use arrow keys. More has copy, add and remove actions.
A place to start
PALETTE VISUALIZER
A palette. In the real world.
Try your colours on a small website or a typographic poster. Assign the roles below to explore different combinations.
form & field●
LESS NOISE. MORE SPACE.
Room for a brighter idea.
A little colour can change the whole feeling. Build something that feels like you.
Find your space ↗01 / A fresh perspective
Good things, simply made.
Considered details. Everyday possibilities.
A STUDY IN COLOUR / VOL. 01
Make room for colour.
Small shifts. New possibilities.
A quick contrast check
WCAG 2.2 AA: 4.5:1 for normal text, 3:1 for large text. These checks cover these colour pairs only, not the accessibility of a whole website. WCAG ↗
Good colours need a little context.
Start with a palette, then test the colours in their actual roles. A striking accent may work beautifully on a card but need a different text colour on a button. The preview uses your exact sRGB colours; harmony does not guarantee readable contrast.
About Oklab and OKLCH ↗Common questions
How are the palettes generated?
Choose a style to guide lightness and chroma, then a harmony to guide hue relationships in OKLCH. Styles regenerate unlocked colours. A locked colour anchors the hue and stays unchanged, even if it falls outside the chosen style. Original mix includes light and dark neutrals. These are starting points, not guarantees of taste or accessibility.
Can I keep my own brand colour?
Yes. Click a HEX value to open its editor, then enter your brand colour. Edited colours are locked automatically. You can add colours between swatches, drag them into a new order, and use Undo to restore any change.
What is the difference between the light and dark previews?
They assign the palette colours to different roles. They do not change the colours themselves. You can also choose each role manually and check the resulting text contrast.
Can I save or share a palette?
Copy a link to keep the exact colours, lock states, style and harmony, copy the HEX list, or download CSS variables and an SVG swatch sheet. Save tool in My workspace saves a shortcut to this tool, not your palette.
Can I extract colours from an image?
Yes. Open Image Color Picker using From image, choose your image, then select Edit palette to return here with its colours. The image is processed locally. A separate full contrast checker is planned; the visualizer includes quick checks for its text and button pairs.