WebAssetKit

CSS & colour

Color Palette Generator

Start from one colour and get matching colours based on proven colour-wheel relationships, together with a light-to-dark ramp of shades. Or drop in a photo and pull out its dominant colours. Everything copies as HEX, RGB, HSL, CSS variables or JSON.

Loading tool…

Palette

Light-to-dark scale of the first colour

Export

How to use the Color Palette Generator

  1. Pick a base colour (or press “Random”).
  2. Choose a harmony: complementary, analogous, triadic, split-complementary, tetradic or monochromatic.
  3. Click any swatch to copy its value. Switch the format with the buttons.
  4. Export the whole palette as CSS variables or JSON, or use “From image” to extract colours from a picture.

Tips for better results

  • A reliable pattern is one dominant colour, one supporting colour and one accent, used roughly 60 / 30 / 10.
  • Always test text and background pairs. Each swatch shows whether black or white text reads better on it.
  • Use the shade ramp for hover states, borders and backgrounds so everything stays in the same family.

Limitations you should know about

  • Harmonies are calculated in HSL, which is simple and predictable but not perceptually uniform: two colours with the same lightness number can look different in brightness.
  • Image extraction samples a reduced copy of the picture; the result is a guide, not an exact analysis.

Frequently asked questions

What are complementary and analogous colours?

Complementary colours sit opposite each other on the colour wheel and contrast strongly. Analogous colours sit next to each other and blend gently.

Can I get my palette as CSS variables?

Yes. Use the CSS variables export, which produces a :root block you can paste into a stylesheet.

Is the image I use for extraction uploaded?

No. It is analysed in your browser.

Guides that use this tool

Related tools