Enter your brand's primary colour and get a complete colour system — primary shades, secondary, accent, neutral, and dark tones — with CSS variables ready to copy.
A strong brand palette needs more than one logo colour. Interfaces, websites and design systems also need lighter tints, darker shades, supporting colours, accents, neutrals and dependable dark tones. This generator starts with a single HEX colour and builds those roles automatically.
The result is designed as a practical starting point rather than a rigid rulebook. Click any swatch to copy its HEX value, then copy the generated CSS variables when you are ready to use the system in a website or app.
Tints and shades of your seed colour for buttons, links, highlights, states and brand-led surfaces.
Supporting hues that broaden the system for panels, illustrations and additional interface roles.
More contrasting colours intended for attention-grabbing moments such as badges, highlights and calls to action.
Low-saturation and deep tones for text, borders, backgrounds, dark mode and high-contrast components.
Start by assigning roles instead of trying to use every colour equally. Your main brand colour should remain recognisable, while the supporting shades solve specific design problems.
Before publishing a website or app, check button labels, body text and navigation using the colour contrast checker.
The generator creates CSS custom properties for every group. That makes the palette easier to reuse consistently across components instead of hard-coding individual HEX values throughout a project.
For example, you can map a primary token to buttons, a neutral token to borders and a dark token to headings. If the brand colour changes later, updating the tokens is much easier than hunting through every stylesheet.
If you are still deciding on the seed colour, use the random colour palette generator, extract inspiration from a photograph with the image palette generator, or read the guide to creating a brand colour palette.
There is no fixed number. Most useful systems contain a core brand colour plus supporting accents and a range of neutral and dark tones for practical interface use.
The seed colour is the starting HEX value used to generate the rest of the system. It is usually your existing primary brand colour or the colour you want the identity to revolve around.
No. Accessibility depends on the exact foreground and background pairing. Test important combinations individually with a contrast checker.
Yes. CSS custom properties are supported by modern browsers and can be placed in :root or scoped to a component or theme.