Start with color area
Identify which colors occupy the largest surfaces in your references. A small bright object should not become the dominant color simply because it attracts attention.
Mood board palette builder
Choose five colors, assign each one a job, and test how the palette behaves as a system rather than a row of unrelated swatches.
CanvasSurfacePrimaryAccentInk
Color-role lab
Edit the role, then judge it inside the live composition. Equal swatches alone cannot show hierarchy or readable combinations.
Calm structure, one decisive accent
Supporting surface and readable body text
Contrast matrix
Each cell reports the contrast ratio for the row color against the column color. AA indicates at least 4.5 to 1 for normal text.
Assign roles before adding more colors
Each swatch should have a purpose such as canvas, surface, primary action, accent, or ink. The preview flags weak text contrast, but final accessibility depends on font size, weight, context, and states.
Use the complete mood board palette method to choose color area, assign roles, and validate the result outside the browser.
Color decisions this tool can support
- Reducing a broad inspiration board to a usable five-role palette
- Checking whether text and action colors remain distinguishable
- Exporting reproducible hex values for a design record
Give every swatch a defined role
A mood board palette works best when every color has a role. The palette builder lets you define canvas, surface, primary, accent, and ink colors, then view them in a practical composition instead of judging equal swatches in isolation.
Move from sampling to a usable palette
Assign a role to every swatch
Use the canvas and surface colors for large fields, primary for the main action or signal, accent for limited emphasis, and ink for essential text.
Test combinations in context
Check text and controls against the exact background where they will appear. The tool reports contrast concerns, but final decisions also depend on size, weight, state, material, and viewing conditions.
Validate outside the browser
Compare digital colors on relevant screens. For interiors, print, packaging, or fashion, use physical samples in the intended material, finish, and light before approval.
Questions that need more than a hex value
How many colors should a mood board use?
There is no universal count. Five roles are a useful starting point, but keep fewer when several colors perform the same job and add more only for a distinct need such as status communication.
Can I sample colors directly from a photograph?
Yes, as a starting point. Adjust the sample for compression, contrast, material, production, and the area it will occupy before treating it as a specification.
Why can the same hex color look different elsewhere?
Screens, brightness, surrounding colors, print processes, materials, finishes, and lighting all affect perception. Record the value, then validate it in the final context.
What this workspace produces
Five named color roles, image extraction, harmony generation, a contrast matrix, CSS variables, JSON, and PNG exports.
- Five editable and lockable color roles
- Harmony generation and local image color extraction
- Full contrast matrix
- Copyable values and CSS variables
- JSON and PNG palette exports
- Private browser saving