Skip to content
ToolzKit

Color & Design

Color Palette Generator

Generate complementary, analogous, triadic and other colour schemes from a single seed colour.

Palette

#3c83f6
#f6af3c

CSS custom properties

:root {
  --color-1: #3c83f6;
  --color-2: #f6af3c;
}

About the Color Palette Generator

Pick a seed colour and a colour-theory scheme, and this tool computes a matching palette by rotating hue or adjusting lightness in HSL space. It covers the classic schemes — complementary, analogous, triadic, tetradic, split-complementary and monochromatic — plus a nine-step shades-and-tints ramp for building UI colour scales.

How to use it

  1. 01Enter a seed colour as hex, rgb(), hsl() or a named colour.
  2. 02Choose a scheme from the dropdown.
  3. 03Review the generated swatches, each labelled with its hex value.
  4. 04Copy an individual swatch, copy the whole palette as CSS custom properties, or download it as JSON.

Features

  • Six classic colour-theory schemes plus a 9-step shades/tints ramp.
  • Per-swatch hex display and copy button.
  • One-click copy of the full palette as CSS :root custom properties.
  • JSON download for use in design tools or code.

Practical examples

Brand exploration

Start from a client's primary brand colour and generate a triadic palette to propose accent colours.

UI colour scale

Use the shades/tints ramp to build a 9-step grey-to-black or brand-colour scale for buttons and backgrounds.

Limitations

  • Schemes are computed purely from hue/lightness rotation in HSL space; they do not account for perceptual colour models like CIELAB, so spacing may not look perfectly even to the eye.
  • Monochromatic and ramp modes fix saturation to the seed's saturation, which can produce muted results for very desaturated seeds.

Privacy

All colour calculations happen locally in your browser; no seed colours or palettes are sent anywhere.

Read the full privacy policy for how the site as a whole handles data.

Frequently asked questions

What's the difference between monochromatic and the shades/tints ramp?

Monochromatic gives five evenly spaced lightness variants of the same hue; the ramp gives nine steps intended for a full UI colour scale.

Can I use named colours as the seed?

Yes, any format accepted by the HEX/RGB/HSL converter also works here.

How is the CSS export formatted?

As a :root block with --color-1, --color-2, etc. custom properties, ready to paste into a stylesheet.

Does the JSON download include more than hex values?

Currently it exports an array of hex strings in palette order; use the converter for full RGB/HSL breakdowns of any swatch.