Color Palette Generator

What this tool does

Color Palette Generator turns a single base colour into a full set of swatches using classic colour-wheel relationships, computed in OKLCH so the hues stay true and the lightness steps feel even. Switch between complementary, analogous, triadic, split-complementary, monochrome and shade/tint schemes to see different moods from the same starting colour, then copy the result as CSS custom properties, a Tailwind colours object or a plain hex array.

Picking a handful of colours that actually work together is harder than it looks: two colours that each look fine alone can clash once placed side by side. Colour theory solves this with a small set of reliable relationships read straight off the colour wheel, and this generator applies six of the most useful ones to whatever base colour you already have.

Every scheme is computed in OKLCH rather than plain HSL, so rotating the hue keeps the same perceived lightness and intensity instead of producing one washed-out swatch and one overly bright one. The shade and tint scheme instead blends your colour toward white or black in OKLab, which keeps the result looking like a natural variant of the original rather than a different colour entirely.

How to use Color Palette Generator

1. Type a colour into Base colour, paste any CSS colour syntax, or use the native picker.
2. Choose a scheme: Complementary, Analogous, Triadic, Split-complementary, Monochrome or Shades & tints.
3. Press Random base colour if you want inspiration from a fresh starting point.
4. Review the generated swatches; each one shows its hex code and can be copied individually.
5. Pick an export Format — CSS variables, a Tailwind colours object or a JSON array.
6. Copy or download the generated snippet and paste it straight into your project.

Tips for better results

• Analogous schemes read as calm and cohesive, which suits backgrounds and large surfaces more than call-to-action buttons.
• Complementary pairs give the strongest contrast of hue, so reserve the second colour for small accents rather than large areas.
• Monochrome palettes are the safest choice when you already have a brand colour and only need supporting tones.
• Run the resulting swatches through a contrast checker before using any of them as text on a background colour.

Common use cases

• Sketching a colour direction for a new website or app before committing to a full design system.
• Finding an accent colour that pairs well with an existing brand colour.
• Generating a quick Tailwind colours object for a prototype without hand-picking every shade.
• Exploring how the same base colour feels under different classic colour-wheel relationships.

Common mistakes to avoid

• Using every swatch from a Triadic or Complementary scheme at equal weight; one colour should usually dominate and the rest should be accents.
• Assuming a generated palette is automatically accessible; check contrast separately before pairing text and background colours.
• Picking the base colour from a glossy rendering or photo rather than its true flat value, which skews every derived swatch.