Skip to main content
Trim Marks

Color Palette Generator

Tints, shades and harmonies that hold together.

Base color

Swatches

Tints

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

Base

Your starting color.

Shades

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

Harmony

Hue rotated in OKLCH, so every color 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 color 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 colors 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 color 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 color.

Copy anything

Single swatches or the whole ramp.

02

How this color 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 color and starts reading as a different color altogether. Shades work the same way toward black, with a gentler chroma reduction because dark colors 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 colors 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 color

    Usually your brand color 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 color
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 color has run out of jobs to do.
Chart series colors
A triad at matched lightness, so no series looks more important than another purely because of its color.
05

Turning a palette into tokens people can use

A palette becomes useful at the point it stops being a set of colors and becomes a set of decisions. The usual mistake is naming by appearance — blue-500, light-gray — which tells a developer what a color 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 colors from the names alone. If that requires asking someone, the palette is a collection of colors rather than a system.

06

Frequently asked questions

Why do palette tools give me one color 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 gray. The ramps here ease chroma off as they go, because a tint that keeps full saturation reads as a different color rather than a lighter one.

How many colors does a design system need?

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

Should I name colors 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 colors 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 color used deliberately. If every element is tinted, nothing reads as emphasis. Try restricting color to what needs attention and letting the neutral ramp carry the rest.

07

Related tools

Browse every tool in Color Tools.