tigtools

Color Palette Generator

Start from one base colour, choose a colour harmony and copy the palette in the format your project uses.

Runs in your browser No sign-up

Palette

  • #3366cc
  • #8c6500

Locked colours stay the same when you change the base colour.

Export as

How to use it

  1. Enter a base colour or pick one. “New random base” picks one for you.
  2. Choose a harmony. “Shades and tints” builds an 11-step scale from very light to very dark.
  3. Lock any colour you want to keep, then keep exploring other base colours.
  4. Choose HEX, CSS custom properties or JSON, set a name, and copy the code.

How it works

Harmonies are found by rotating the hue around the colour wheel: complementary adds the opposite hue (180°), analogous adds neighbours 30° and 60° away on each side, triadic uses three hues 120° apart, tetradic four hues 90° apart, and split-complementary the two hues next to the complement (150° and 210°).

The rotation happens in OKLCH rather than HSL. OKLCH keeps perceived lightness steady, so a yellow and a blue in the same palette look similarly bright instead of the yellow glaring. When a rotated colour would fall outside what sRGB screens can show, its chroma is reduced until it fits, keeping lightness and hue.

The shades-and-tints scale uses fixed OKLCH lightness steps named 50 to 950, similar to the naming used by Tailwind CSS, with chroma reduced near white and black so the lightest tints do not look neon. Harmonies are a starting point: check text and background pairs with a contrast checker before using them for content.

Examples

A brand colour with an accent

Base #3366cc with “Complementary” adds #8c6500, a warm ochre with the same OKLCH lightness. Blue and orange-yellow pairs are a common choice for accents next to a blue brand.

Design tokens for a component library

Choose “Shades and tints”, set the name to “primary” and export CSS variables. You get --primary-50 to --primary-950, ready for backgrounds (50–100), borders (200–300) and text (700–900).

Keeping one colour while exploring

Lock the second colour of a triadic palette, then try different base colours. The locked swatch keeps its HEX value while the others change.

Frequently asked questions

Why do my colours differ from an HSL colour wheel tool?

This tool rotates hue in OKLCH, a perceptual colour space. Its hue angles do not line up exactly with HSL, so the “opposite” of a colour can be a slightly different shade than an HSL tool gives.

Can I use the JSON in Tailwind CSS?

The JSON maps names to HEX values, the same shape Tailwind accepts for a colour in its theme configuration. In Tailwind 4 you can also paste the CSS variables into an @theme block after renaming them to --color-…

Are generated palettes accessible?

Not automatically. A harmony says nothing about contrast between text and background. Check each pair you plan to use with the Contrast Checker.

Privacy

Palettes are generated in your browser. Your colours are not sent anywhere or stored.