Brand Colour Palette Generator

How to use it

1. Enter your base colour as a HEX code, or pick it with the colour picker.
2. Choose a harmony. The overview shows every harmony for your colour, so you can compare them at a glance.
3. Optionally switch the hue wheel to OKLCH to keep every colour at the same perceived lightness.
4. Lock the swatches you like, then press Shuffle to try variations of the others. Locked colours never change.
5. Copy any value, or export the whole palette as CSS variables, Tailwind config, JSON or a PNG swatch sheet.

How the palettes are calculated

• Harmonies rotate your colour's hue: complementary +180°, analogous ±30°, triadic +120° and +240°, split-complementary +150° and +210°, tetradic (rectangle) +60°, +180° and +240°.
• On the HSL wheel, saturation and HSL lightness are kept. On the OKLCH wheel, perceived lightness and chroma are kept, so the colours look equally light. HSL can make yellows look much lighter than blues at the same “lightness”.
• Tints and shades are calculated in OKLCH, a perceptual colour space. The 50–950 scale's lightness is evenly spaced from 0.97 to 0.23, and your colour replaces the step closest to its own lightness. Chroma eases off towards the lightest and darkest steps.
• Colours that fall outside what screens can show (the sRGB gamut) are brought back in by lowering chroma while keeping lightness and hue, as CSS Color 4 recommends.
• Contrast ratios use the WCAG 2.x formula. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1.
• Shuffle uses a seeded random generator, so each shuffle is repeatable and a saved palette comes back exactly as it was. Variations nudge hue by up to ±15°, OKLCH lightness by up to ±0.1 and chroma by −25% to +15%.