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.
01What you will learn
- Build related colors from one starting hue.
- Keep the palette small enough to use deliberately.
- Copy the colors and try them on an editable canvas.
Start with: A base color you like, or an image whose colors you want to study.
02See the technique
What gets in the way
A collection of attractive colors can still have too little lightness contrast for a tiny sprite to read.
The useful change
Give your darkest, middle and lightest colors different jobs, then test them on an actual shape instead of judging the swatches alone.
03Follow the steps
- 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
04Practice in Pikanim
Open a tool, follow the steps with your own asset, and come back when your result is ready.
05Check your result
Compare your own work with these checkpoints. Check each one when your result is ready.
Progress saves in this browser. No account needed.