Palette Maker
Press Space for a new palette and lock the colours you want to keep, as the palette sites do; or start from one colour and build its harmonies, or a Tailwind-style scale from 50 to 950 with your colour kept exactly at its step. Drop a photo and its main colours are found, with the share of the picture each one covers.
What it does
- Two to ten colours; Space for a new set; locks, and a new colour never a near copy of a kept one.
- Harmonies from a base colour: analogous, monochromatic, complementary, split complementary, triadic, tetradic and square.
- A 50 to 950 scale shaped like Tailwind’s own, your colour unchanged at the step it belongs to.
- The main colours of a picture, found by clustering, with each one’s share.
- Any swatch edited with a CSS colour, reordered by dragging or with the keyboard; fifty steps of undo and redo.
- The palette as someone with protanopia, deuteranopia, tritanopia or no colour vision sees it, and black or white text for each swatch.
- Export as CSS variables, a Tailwind 4 @theme block, a Tailwind 3 config, SCSS, JSON, a list, SVG swatches or a PNG.
- Colours written in HEX, RGB, HSL or OKLCH.
How to use it
- Press Space, paste a base colour, or drop a photo.
- Lock what you like, and edit or reorder the rest.
- Check the colour-vision views and the text colour each swatch needs.
- Export in the format your project uses.
What it does not do
- ASE and PDF export: a binary Adobe format few ask for, and a PDF library is a lot to load for a page of swatches.
- Sharing by link and saved collections: there are no accounts here to keep them in.
Questions
How is the scale built?
In OKLCH, with lightness steps shaped like Tailwind’s own. Your colour sits unchanged at the step whose lightness it matches, and the others are drawn around it.
Why does the photo’s palette differ from another tool’s?
The colours here are found by k-means clustering in OKLab, on a copy of the picture scaled to 256 pixels. Tools that count exact pixel values or cluster in RGB weigh colours differently.
What does the colour-vision view show?
The palette as someone with each kind of colour-vision deficiency sees it, by the Machado 2009 model. Two swatches that merge there are two nobody should have to tell apart.
Which export is for Tailwind 4?
The @theme block: paste it into your CSS and each colour becomes a utility class.
Everything here runs in your browser. Nothing you type, paste or open is uploaded, and there is no account and no queue. How that works.
All toolsAbout utilbrewPrivacy