Color Palette Generator
Pick a base colour and a harmony rule — complementary, triadic, analogous, split-complementary, tetradic, or monochromatic — and get a matching set of colours. Copy any swatch, or all of them, as HEX.
#3ce0f6#3c83f6#523cf6#af3cf6#3ce0f6
HSL(187, 91%, 60%)
#3c83f6
HSL(217, 91%, 60%)
#523cf6
HSL(247, 91%, 60%)
#af3cf6
HSL(277, 91%, 60%)
How to use
- Pick a base colour with the picker or type a HEX value.
- Choose a harmony rule to generate the palette.
- Copy any swatch, or all of them, as HEX.
Frequently asked questions
- Will the generated colours always meet WCAG contrast requirements?
- No. The harmony rules balance hue relationships, not contrast ratios. Check any text-on-background pairing separately before using it.
- What does "monochromatic" generate?
- A set of lightness variations of the same hue and saturation, from darker to lighter.
Privacy
Palettes are generated in your browser and are never sent to a server.
Related tools
- Color Converter
Convert HEX, RGB, and HSL color values instantly. Preview the color and copy CSS-ready codes from a free browser-based color converter.
- Gradient Generator
Build a linear, radial or conic CSS gradient with live preview. Adjust colours, direction and stops, then copy the CSS.
- Box Shadow Generator
Build a CSS box-shadow with live preview. Stack multiple shadow layers, adjust offset, blur, spread and colour, then copy the CSS.