About Color Palette Generator
Colour harmony is geometry. Pick a base hue, step a fixed distance around the colour wheel, and the result reads as deliberate rather than accidental. Opposite hues create tension and draw the eye; neighbouring hues sit quietly together. That is the whole idea, and it has been in use since long before anyone had a screen.
What matters is which wheel you step around. Most generators rotate hue in HSL, which produces palettes that are numerically tidy and visually lopsided — a yellow and a blue at the same HSL lightness look nothing alike in brightness. This tool works in OKLCH, a perceptual space where equal numbers look like equal steps, so a triadic palette comes out genuinely balanced.
There is a second, subtler problem that most tools get wrong. Rotating a saturated hue often lands on a colour your screen cannot physically display. The usual fix is to clip each channel back into range, which quietly shifts the hue — so a 'complementary' colour can end up twenty degrees away from the actual complement. This tool reduces saturation instead, keeping the hue exactly where the harmony put it.
How to generate a palette
Choose a base colour
Use the picker, paste a hex value, or press Random until something catches your eye.
Pick a harmony
Complementary for contrast, analogous for calm, monochromatic for a UI scale. Each is described as you select it.
Check the contrast
Every swatch shows its contrast ratio against white and black, so you know immediately which ones can carry text.
Export
Copy the palette as CSS custom properties, a Tailwind colour object, SCSS variables or JSON.
Choosing a harmony
- Complementary — two opposite hues. The strongest contrast available; excellent for a single accent against a dominant colour, exhausting if used in equal amounts.
- Analogous — three to five neighbouring hues. Naturally cohesive and restful, but low contrast, so pair it with a deliberate accent.
- Triadic — three hues evenly spaced. Vivid and balanced, and forgiving: let one dominate and use the others sparingly.
- Split complementary — the complement's two neighbours instead of the complement itself. Nearly the same contrast with much less visual vibration.
- Tetradic — two complementary pairs. The richest option and the hardest to control; one colour must lead.
- Tints and shades — one hue across ten lightness steps. This is what a UI colour scale actually is, and what you want for buttons, borders and backgrounds.
Turning a palette into a usable system
A harmony gives you hues, not a design system. What an interface needs is a scale: one hue at many lightness levels, so the same colour can serve as a background at the light end, a border in the middle and text at the dark end.
Generate the tints-and-shades ramp for your primary hue, then repeat it for a neutral grey and for your semantic colours — success, warning, danger. That set of ramps, not a row of five distinct hues, is what most products are built from.