Skip to main content
Trim Marks

Colour Palette Generator

Tints, shades and harmonies that hold together.

Base colour

Swatches

Tints

Toward white. Chroma is eased off as lightness rises, because a tint that keeps full saturation reads as a different colour rather than a lighter one.

Base

Your starting colour.

Shades

Toward black, holding the hue steady so the family stays recognisable.

Harmony

Hue rotated in OKLCH, so every colour in the set shares the base's lightness instead of one of them jumping out.

Rotating hue in HSL — which is what most palette tools do — produces sets where the yellow is glaringly lighter than the blue, because HSL lightness is not perceptual. Doing it in OKLCH keeps the whole set at one visual weight.

Give it one colour and get a working palette: a tint ramp toward white, a shade ramp toward black, and a harmony set. All of it generated in OKLCH, which is why the harmony colours actually match each other in weight rather than having one that glares and one that vanishes.

01

Why use this tool?

Four harmony types

Complementary, analogous, triadic and split complementary.

Even visual weight

Hue is rotated in OKLCH at constant lightness, so no colour in the set jumps out.

Tint and shade ramps

Five steps each way, with chroma eased off so a tint reads as lighter rather than as a different colour.

Copy anything

Single swatches or the whole ramp.

02

How this colour palette generator works

Tints interpolate toward maximum lightness while easing chroma off as they go. That second part matters: a tint that keeps full saturation stops reading as a lighter version of the colour and starts reading as a different colour altogether. Shades work the same way toward black, with a gentler chroma reduction because dark colours tolerate saturation better.

Harmony sets rotate hue at constant lightness and chroma. In HSL that same rotation produces a set where the yellow glares and the blue disappears, because HSL lightness is a mathematical midpoint rather than a perceptual one. In OKLCH, holding L constant genuinely holds the visual weight, so a triad reads as three colours of equal importance.

The four harmony types are the classical relationships: complementary is the opposite hue, analogous is the two neighbours, triadic is three evenly spaced, and split complementary takes the two hues either side of the opposite. Which one you want is a question about how much tension the design needs.

03

How to use it

  1. Step 1: Pick a base colour

    Usually your brand colour or a starting point you like.

  2. Step 2: Choose a harmony

    Complementary for contrast, analogous for calm, triadic for a full set.

  3. Step 3: Copy the ramp

    The tint and shade ramp is usually the part you want for a design system.

04

Example usage

Building from a brand colour
One hex code in, a full tint and shade ramp out, ready for a design token file.
Finding a secondary
A complementary or split complementary pair when a single brand colour has run out of jobs to do.
Chart series colours
A triad at matched lightness, so no series looks more important than another purely because of its colour.
05

Turning a palette into tokens people can use

A palette becomes useful at the point it stops being a set of colours and becomes a set of decisions. The usual mistake is naming by appearance — blue-500, light-grey — which tells a developer what a colour looks like but not when to reach for it. The moment the brand changes, every one of those names is either wrong or a lie.

The convention that survives contact with a real codebase is two layers. A primitive layer names the raw ramp by hue and step, and a semantic layer maps roles onto it: text-primary, surface-raised, border-subtle, action-default. Components only ever reference the semantic layer. Rebranding then means repointing the semantic names, not auditing every component, and dark mode becomes a second mapping rather than a second palette.

The test of whether a palette is finished is not whether it looks good on the swatch sheet. It is whether a developer, given a new component and no design, can pick the right colours from the names alone. If that requires asking someone, the palette is a collection of colours rather than a system.

06

Frequently asked questions

Why do palette tools give me one colour that looks wrong?

Because they rotate hue in HSL, where lightness is not perceptual. A yellow and a blue at the same HSL lightness are nowhere near the same brightness. Rotating in OKLCH keeps the whole set matched.

What is the difference between a tint and a shade?

A tint is mixed toward white, a shade toward black. A tone is mixed toward grey. The ramps here ease chroma off as they go, because a tint that keeps full saturation reads as a different colour rather than a lighter one.

How many colours does a design system need?

Fewer than people build. One brand colour with a tint and shade ramp, one neutral ramp, and a colour each for success, warning and error covers the overwhelming majority of interfaces.

Should I name colours by hue or by role?

Both, in two layers. Primitives named by hue and step — blue-500 — and semantic names layered on top that describe the job, such as text-primary or border-subtle. Components reference only the semantic layer, which is what makes a rebrand or a dark mode a remapping rather than a rewrite.

How many steps should a tint ramp have?

Nine to eleven is the common answer, and it is driven by the number of jobs rather than by aesthetics: you need distinct values for body text, secondary text, borders, hover states, disabled states and one or two surfaces. Fewer than nine and you start reusing a step for two jobs that need to look different.

Why does my palette look good but my interface look muddy?

Usually because too many colours are doing work at once. A palette is judged as a sheet of swatches with equal area; an interface is mostly one neutral with small amounts of colour used deliberately. If every element is tinted, nothing reads as emphasis. Try restricting colour to what needs attention and letting the neutral ramp carry the rest.

07

Related tools

Browse every tool in Colour Tools.