Build a palette that holds together
Generate harmonious colors from one hue, or pull the real colors out of an image and use them as your document palette.
You finish with
A working palette loaded into the editor, plus copyable hex and CSS variables.
- 1
Start from one color, or from a picture
Pick a base color and let the harmony rules build the set — or upload an image and extract the colors it actually uses. Extraction is usually the better start when the art direction already exists.
Open the palette generator - 2
Keep it small
Six to ten colors cover almost every asset. Every extra color is another place for inconsistency to creep in, and another swatch you have to remember.
- 3
Copy it in the format you actually use
Copy the hex list for engines and docs, or CSS custom properties straight into a stylesheet — `--pixel-1` through `--pixel-N`, ready to reference.
- 4
Open it in the editor and draw with it
Opening in the editor creates a blank document whose palette is the set you just made, so the first strokes are already on-model.
Open in editor
Next
Clean edges, alpha and palettes
The editor habits that separate an asset from a drawing: hard edges, honest alpha, and a palette you control.
ContinueTools in this guide