Guide · 5 min read
How to use a moodboard to build a palette
A moodboard is a collection of things that feel right. A palette is a small set of specific values. Getting from one to the other is a reduction, and the mistake is trying to keep everything.
Extract each image separately
Do not collage the board into one picture and extract from that. Averaging fifteen images produces mud, every time, and it weights the result by how much space each image happened to take up in your layout.
Instead run each reference through at three to five colours and put the results side by side. What you are looking for is not the union of them — it is the agreement.
Find what the images agree on
- Extract each image at three or five colours.
- Lay the palettes out together and look for colours that recur. If a warm off-white shows up in nine of twelve references, that is your background, and you did not have to decide it.
- Note which hues appear at all, and at what lightness. A board can be unanimous about hue and split about lightness, which is useful to know.
- Ignore the one-offs for now. They are candidates for an accent, not for the ground.
The colour that appears in most of your references is doing the work. The one that appears in only the image you like best is a trap.
Look for the accidental colour
Sometimes a board is unanimous about something you did not intend. Every reference is slightly warm, or every one has a small area of the same green. That accident is often the most interesting thing on the board, because it is the part of your taste you were not consciously applying. Extraction is good at surfacing it, because the percentages make it visible even when it is small.
Know when the board is finished
If adding another reference does not change the recurring colours, you have enough. If every new image adds a new hue, the board is not converging — it is a collection of things you like rather than a direction, and no amount of extraction will resolve that. Cut it down to the five images you would defend and start again.
Then build properly
Take the agreed colours as your ground and your primary. Take one accent from the one-offs. Then build the neutral ramp and the state colours by hand, and check the pairs for contrast. The board tells you what the thing should feel like; it will not tell you what your error state should be.
Drop an image in. Get the palette.
Pull the colors outKeep reading
How to pull a colour palette from an image
The whole process, start to finish: choosing the image, picking a palette size, fixing a result that came back muddy, and getting the colours into your design file.
How designers choose colours from photography
Why photographs make good palettes and bad ones, what to do about light and white balance, and how to turn an image's colours into a working hierarchy.
HEX vs RGB vs HSL
Three ways of writing the same colour, what each is good for, and why HSL is the one to reach for when you are adjusting a colour rather than recording it.