A row of swatches hides the questions that matter. Put your colours to work and see how they balance, what is readable and what takes over.
A heading that sets the tone
Supporting text sits a step back from the heading, and it should still be easy to read.
Get startedRead more
Pass: Is the text readable?
Yes. The darkest and lightest colours give 13.8:1, which is enough for body text.
Pass: Does the accent dominate?
No. There are enough quiet colours for an accent to stand out.
Pass: Do any colours collapse into each other?
No. Every colour stays clearly separate.
Pass: Does the palette feel flat?
No. There is a clear range from light to dark, which gives the layout structure.
Pass: Does the palette feel balanced?
Yes. Strong and quiet colours are mixed, so some can lead and others can support.
Check: Does a dark version still work?
Partly. When reversed, the main colour loses contrast, so it would need a lighter version on dark backgrounds.
Use it after extracting or building a palette, before spending time on real designs. Switching between scenes is a quick way to see which roles a palette can and cannot fill.
These are simple flat scenes, not realistic renderings. Proportion and contrast read well here, but materials, texture, lighting and photography do not exist in a block of flat colour. For anything physical, test a real sample.
Your colours are assigned to roles by measured lightness and chroma: the lightest or darkest becomes the background, the strongest becomes the main colour, and text is whichever reaches the best contrast. Each answer below the preview comes from a stated measurement, such as a WCAG contrast ratio or a CIEDE2000 distance between neighbours.