Color Palette Generator
Start from your brand colour and generate a palette using classic colour-wheel harmonies or a full range of shades, then copy the HEX codes or CSS variables.
No data needed
How to use
- Enter or pick a base colour.
- Choose a harmony.
- Copy individual colours or the CSS variables.
How it works
Harmonies rotate the hue on the HSL colour wheel while keeping saturation and lightness: complementary is +180°, analogous ±20° and ±40°, triadic +120° and +240°, split-complementary +150° and +210°, tetradic every 90°. Shades keep hue and saturation and vary lightness from 95% to 15%.
Text on each swatch switches between black and white based on the WCAG contrast ratio.
Examples
- Brand shades
- #0d6e63 → eight tints and shades for backgrounds, borders and text.
Common uses
- Branding and UI design
- Presentations and charts
- Web design systems
Privacy & security
This tool does not take any personal data or files. Results are generated on your device. How each tool handles files
Frequently asked questions
Why do some harmonies look unbalanced?
HSL isn't perceptually uniform: yellows look lighter than blues at the same lightness. Adjust individual colours by eye.
Can I extract a palette from a photo?
Yes, use the Image Palette Extractor.
Last updated: