How to Use This Colour Palette Generator

Pick a base colour with the colour picker if you want a palette that fits an existing brand shade. Click Generate palette to get five related colours (lighter and darker variants). Click Random palette to get a new set of colours without a base. Each swatch shows the hex code; click a swatch or the Copy text to copy that hex to your clipboard. Use these codes in Figma, Sketch, CSS, or any design or code tool.

Why Colour Palettes Matter in Design

A consistent colour palette keeps your brand recognisable and makes interfaces and marketing materials feel cohesive. Design tools, style guides, and development (CSS, Tailwind, etc.) all rely on a fixed set of hex codes. This generator helps you create harmonious palettes from a base colour or at random, so you can copy hex values straight into your workflow.

Choosing Colours for Web and Brand

For websites and apps, ensure enough contrast between text and background for readability (WCAG guidelines). Use one or two primary colours and a few neutrals. Accent colours work well for buttons and links. Avoid using too many bright colours in one palette. For print, consider how RGB hex translates to print colour spaces if you need exact brand matching.

Frequently Asked Questions

What is a hex colour code? A hex code is a six-character code (for example, #4888f6) that defines a colour in red, green, and blue (RGB) values. It is widely used in CSS and design software.

Can I use these palettes commercially? Yes. The colours generated are not copyrighted. Use them in personal or commercial projects.

How do I get more than five colours? Generate a palette, then use one of the resulting hex codes as a new base colour and generate again to extend your palette.

Why do my colours look different on different screens? Monitors and phones use different colour profiles and brightness. For critical brand colours, test on several devices and consider specifying colours for print separately if needed.