Add the requested inputs
Use the labelled fields in the workspace above. If example values are provided, try them first or replace them with your own.
Data & file tools · Free online tool
Colour palette generator
Create a browser preview and CSS variables from a base colour, palette size and colour mode. Generate a quick set of related colour starting points for interfaces, charts, illustrations or brand exploration.
3 guest runs per rolling 24 hours10 with a free accountPrivate inputsMobile-friendly
Colour palette generator workspace
Runs locally in your browser
Palette colours are deterministic from the base colour and selected relationship. Check contrast for any text and background pairing.
Result
Palette summary—
Palette preview
CSS custom properties
Also useful
Out on 31 October? See what time it gets dark on Halloween 2026 in 12 UK cities.
Planning dates? Check the UK bank holiday dates for England, Wales, Scotland and Northern Ireland or add working days to a date.
Use it with confidence
How to use the colour palette generator.
Calculate and review
Use the main action when needed. The base colour is converted to HSL and varied by the selected hue relationship and count before swatches and CSS variables are rendered.
Try a worked example
Choose a base hex colour and a complementary or analogous mode to produce named CSS custom properties.
Check the assumptions
Generated relationships do not guarantee visual harmony, brand suitability or accessible contrast; test each foreground and background pairing separately.
Helpful answers
Colour palette generator FAQs.
Is the colour palette generator free?
Yes. Guests receive 3 runs per rolling 24 hours, verified free accounts receive 10, and Premium subscribers receive unlimited normal use.
Does UtilHub upload or save my inputs?
No. This tool runs in your browser and UtilHub does not receive or store the values you enter. Your browser or device may still retain normal local history or form data.
How does this colour palette generator work?
The base colour is converted to HSL and varied by the selected hue relationship and count before swatches and CSS variables are rendered.
What should I check before using the result?
Generated relationships do not guarantee visual harmony, brand suitability or accessible contrast; test each foreground and background pairing separately.