Color Mood Board

What this tool does

A mood board is a quick, visual way to capture the feeling of a colour palette before any real design work begins. This tool builds one for you: you assemble a set of colours, give each a relative weight, and the tool arranges them into a balanced grid of blocks where the heaviest colours take up the most space. An optional title sits above the board. Everything updates live as you add, remove, re-colour or re-weight, so you can tune the composition in real time. When it looks right, one button exports the whole board as a PNG. The point is not just to list colours but to show their relationship — which colour dominates, which are supporting tones, which are sharp accents used sparingly.

Use cases

Mood boards earn their place early in almost any visual project. Brand and identity work uses them to test a colour direction before logos or layouts exist — a board makes it obvious whether a palette feels calm, energetic, warm or corporate. Web and product designers build a board to agree a palette’s hierarchy with a team: the dominant background tone gets a high weight, the call-to-action accent a low one, and the proportions communicate intent better than a swatch list. Interior designers, stylists and illustrators use weighted boards to plan how much of each colour a room or composition should carry. They are also excellent for client presentations and pitches, where a single considered image conveys a mood instantly, and for content creators defining a consistent look across a channel or feed.

How to use it

1. Optionally give the board a title that names the mood or project.
2. Start from the default colours or build your own set.
3. For each colour, pick a shade with the colour picker or type a HEX value — both inputs stay in sync.
4. Drag the weight slider for each colour to set how much board area it should claim.
5. Use Add colour to extend the board and Remove to drop a colour.
6. Watch the board re-flow live; copy any HEX value with its copy button.
7. Click Download as PNG to save the finished board.

Tips

Decide your hierarchy first: most palettes have one or two dominant tones, a couple of supporting colours and one bright accent. Give the dominant colours weights of 6 to 10, supporting tones 3 to 5, and accents 1 to 2 — the board will then read the way the palette is meant to be used. Keep the total number of colours modest; five to eight blocks usually looks more deliberate than a dozen thin slivers. If a colour is hard to read against its neighbours, that contrast is worth noticing now rather than later. Re-order by removing and re-adding colours if you want a different colour to lead a row. The exported PNG is wide and crisp, so it works well as a header image or a full-slide backdrop.

Related techniques

A mood board sits naturally alongside other colour tools. Use a palette generator to discover a harmonious set before weighting it here, and a colour converter when you need a value in a different space. Pantone-style colour cards complement a board nicely: the board shows mood and proportion, while the cards give each colour a formal, labelled spec sheet with HEX, RGB and CMYK. A contrast checker is worth running on any pairing you plan to use for text and background. Together these let you move from a loose idea to a documented, presentation-ready palette without leaving the browser.