Free tool · Colour
One colour in, a whole palette out.
Drop in a single brand colour and get a balanced 60 / 30 / 10 palette — background, secondary, accent, primary and text — ready to paste straight into your design tokens. Click any swatch to copy its hex.
Brand palette generator
Turn one brand colour into a balanced 60 / 30 / 10 palette, ready to paste into your design tokens.
A 60 / 30 / 10 palette built from your colour. Click any swatch to copy its hex.
How the 60 / 30 / 10 rule works
The 60 / 30 / 10 rule is a classic interface and interior-design ratio: roughly 60% of a layout uses a dominant neutral, 30% a supporting secondary, and 10% an accent that draws the eye to the things that matter — buttons, links, highlights. This tool takes your single brand colour and derives a tint-based set that follows that ratio, plus a primary for calls-to-action and a deep text colour mixed from the same hue so everything feels related.
The values are generated entirely in your browser — paste a hex, or pick a preset, and copy any swatch with a click. Nothing is uploaded or saved. Use it to sketch a quick storefront theme, sanity-check a client’s brand colour, or seed a set of CSS custom properties.