Color Palette & Gradient Generator
Generate colour palettes and CSS gradients from any base colour — copy HEX, RGB and CSS in one click, and download the gradient as a PNG. Free, in your browser.
Click any swatch to copy its HEX. Pick a base colour and harmony to regenerate.
About the Color Palette & Gradient Generator
A colour palette generator helps you build a set of colours that work together for a website, brand, slide deck or app. Pick a base colour and this free tool generates a five-colour palette using proven colour-theory harmonies — analogous, monochromatic, complementary, triadic, tetradic and shades — updating instantly as you change the base or the harmony.
Click any swatch to copy its HEX code, or copy the whole palette as a list or as ready-to-use CSS custom properties. A random-colour button gives you a fresh starting point whenever you need inspiration, all computed in your browser with no sign-up.
Switch to the gradient tab to build a CSS gradient from two or three colours. Choose a linear or radial style, set the angle, preview it live, then copy the exact CSS or download the gradient as a 1200×630 PNG — handy for a hero background, social card or Open Graph image. It is a fast, practical companion to our logo maker and favicon generator when you are settling on a brand look.
How to use this tool
- 1On the palette tab, pick a base colour and a harmony (analogous, complementary, triadic and more).
- 2Click any swatch to copy its HEX, or copy the whole palette as a list or CSS variables.
- 3Switch to the gradient tab, choose two or three colours, and set a linear or radial style and angle.
- 4Copy the gradient CSS, or download it as a PNG for a hero background or social card.