Color Palette Generator
Pick a brand or base colour and get matching palettes built on colour theory, ready to use in your website, logo or presentation.
Free · No sign-up · Files stay on your device
How to use Color Palette Generator
- 1Pick a base colour or enter its HEX code.
- 2Browse the generated palettes.
- 3Click a swatch to copy its HEX, or copy all as CSS variables.
Features
- Complementary, analogous, triadic and tetradic
- Split-complementary
- Shades and tints
- Click any swatch to copy
- Export as CSS variables
Colour harmonies
Complementary colours sit opposite on the colour wheel and give strong contrast. Analogous colours sit side by side and feel calm. Triadic colours are evenly spaced for a vibrant but balanced look. Shades and tints are darker and lighter versions of one colour, perfect for UI states.
Frequently asked questions
Which palette is best for a website?
A common recipe is one main colour, its shades and tints for UI, and a complementary colour for buttons and highlights.
Are the colours accessible?
Check text and background pairs with our Color Contrast Checker.
Can I get colours from an image?
Yes. Use the Image Color Picker, which extracts a palette from any photo.
Related tools
Color Contrast CheckerCheck the contrast ratio between text and background colours for WCAG 2 AA and AAA accessibility. Live preview, pass/fail results and HEX input. Free.Image Color PickerPick colors from any image online for free. Click a pixel to get its HEX, RGB and HSL code, and extract the dominant color palette. No upload.CSS Gradient GeneratorCreate beautiful CSS gradients online: linear or radial, any angle, up to 5 colour stops. Live preview and ready-to-copy CSS code. Free.