Color Palette Generator
Generate harmonious palettes from one base colour.
Input
This tool runs entirely in your browser. The data you paste or load is never uploaded.
Result
Enter your input, then run the tool.
About this tool
Creates complementary, analogous, triadic, tetradic and monochrome palettes from a base colour, with HEX and HSL values and a contrast column. Copy the whole palette as CSS custom properties.
How to use it
- Pick a base colour.
- Choose a harmony rule.
- Copy individual colours or the CSS variable block.
Frequently asked questions
Which harmony is safest for interfaces?
Analogous palettes are calm and easy to use; triadic adds contrast but needs careful role assignment for text and actions.
Are the generated colours accessible?
Harmony only describes hue relationships. Check text pairs with the contrast checker before shipping.
Keep going
Related tools
Color Contrast Checker
Test text and background colours against WCAG 2.2.
Color Palette Extractor
Pull the dominant colours out of any image.
CSS Gradient Generator
Build linear and radial gradients with copy-ready CSS.
HEX to RGB Converter
Convert HEX colour codes to RGB and HSL.
RGB to HEX Converter
Convert RGB channel values into a HEX code.
RGB to HSL Converter
Convert RGB channels to hue, saturation and lightness.