⌕

Colour Palette Generator

Build harmonious five-colour palettes from a base colour using HSL colour relationships, then copy HEX values or export CSS variables.

Base colourHEX colourType a 6-digit HEX value with or without #.

Harmony

Neighbouring hues for a smooth, related palette.

How to use Colour Palette Generator

1Choose a base colour with the picker or enter a 6-digit HEX value.
2Choose monochromatic, analogous, complementary, split-complementary or triadic harmony.
3Click a swatch to copy it, copy the whole palette, share it or download CSS variables.

•Use analogous or monochromatic palettes when you want a calmer, more unified look.
•Use complementary, split-complementary or triadic palettes when you want more colour contrast.
•The swatch label colour is chosen for readability on that swatch, but final text/background pairs should still be checked for your accessibility target.

Wid9et converts the base colour to HSL, applies the selected hue relationship, then adjusts saturation and lightness for supporting colours.

Yes. You can copy all HEX values or download a CSS file containing five custom properties.

No. Palette generation, copying and CSS export all happen locally in your browser.