What does a color palette generator do?

It turns one seed color into a complete, harmonious set of colors using rules such as complementary, analogous and triadic relationships. Swatchboard generates twelve palette types instantly and exports them as CSS variables, JSON, SCSS, Tailwind or JavaScript.

How do I make a harmonious color palette?

Start from a base color that already fits your brand, choose a harmony for the contrast you need — complementary for maximum tension, analogous for calm — then adjust the light and dark steps until text separates clearly from surfaces. Verify the pair with the WCAG contrast checker before shipping.

Is Swatchboard free and private?

Yes. Swatchboard is free, runs entirely in your browser and never uploads your colors or images. Palettes you save live in your own localStorage and can be exported as JSON at any time.

Color toolkit

Color palette generator.
One color, an entire system.

Twelve harmonies, variants, gradients, contrast, and tokens, all generated live from one base color. Everything stays in your browser.

Base color: HEX, RGB or HSL

Press space bar to generate random color

Harmonies

12 of 12 palettes · #845EC2

Monochromatic

One hue across a full lightness ramp. · Minimal interfaces · dashboards

Complementary

A hue against its opposite on the wheel. · High-contrast designs

Analogous

Neighbouring hues, calm and cohesive. · Harmonious interfaces

Triadic

Three hues evenly spaced at 120°. · Vibrant brand systems

Split complementary

Base plus the two neighbours of its complement. · Balanced contrast

Tetradic

Two complementary pairs, four hue families. · Complex visual systems

Warm

Reds, oranges and yellows around your tone. · Lifestyle · energy

Cool

Blues, greens and purples around your tone. · Technology · finance

Pastel

Soft tints with reduced saturation. · Friendly · soft products

Dark

Low-lightness shades of your hue family. · Dark-mode products

Neutral

Greys and off-whites tinted with your hue. · Backgrounds · typography

Gradient ramp

Perceptually even OKLCH ramp toward the complement. · Heroes · backgrounds

Light & dark variants

Same hue, stepped lightness

#845EC2

Tints · toward white

Shades · toward black

In interface

Harmony applied to real components

updates live

Palette used

AcmeOverviewReportsSettings

Upgrade

Weekly revenue

Last 7 days · updated 2m ago

Sessions+12.4%

[email protected]

We'll never share your email.

Invoice #2041Paid

Invoice #2042Pending

Invoice #2043Failed

View all invoices

All systems operational: modal surface example

DismissConfirm

Light

AcmeOverviewReportsSettings

Upgrade

Weekly revenue

Last 7 days · updated 2m ago

Sessions+12.4%

[email protected]

We'll never share your email.

Invoice #2041Paid

Invoice #2042Pending

Invoice #2043Failed

View all invoices

All systems operational: modal surface example

DismissConfirm

Dark approximation

Export

Monochromatic · 8 colors

Palette to export

css

:root {
  --color-primary: #774EBC;
  --color-primary-hover: #643EA4;
  --color-primary-active: #523386;
  --color-secondary: #593790;
  --color-accent: #3B2460;
  --color-background: #F4F3F7;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FCFCFD;
  --color-border: #E5E2E9;
  --color-text: #201631;
  --color-muted-text: #716B7B;
  --color-success: #397F5E;
  --color-warning: #B28943;
  --color-error: #BF5855;
  --color-info: #4977AC;
}

All tools

One color, eight tools

PalettesHarmonies from one color GradientLinear, radial, conic ExtractPalette from an image ConvertAll six color models ContrastWCAG & color-blindness BrandSemantic color roles TokensDesign-system tokens SavedYour palette library

Guide

What is a color palette generator?

A color palette generator takes a single starting color and derives a complete set of companion colors — shades, tints, accents and neutral surfaces — from color theory rules instead of guesswork. Enter a base color in HEX, RGB or HSL and Swatchboard builds every harmony type at once: monochromatic, analogous, complementary, split-complementary, triadic, tetradic and more, twelve palette types in total.

Each palette is calculated live in your browser from the base hue, saturation and lightness, so the whole page recolors as you drag the picker or press the spacebar for a random color. Nothing is uploaded, there are no watermarks, and every palette type is free to use without an account.

From a generated palette to production code

Every palette exports as CSS custom properties, JSON, SCSS variables, a Tailwind theme extension or a JavaScript object, so the colors you pick here drop straight into a stylesheet or design system. The light and dark variant sections step the base color toward white and black, and the live interface preview applies the palette to realistic buttons, cards and form fields before you commit to it.

Keep the palettes you like in your local library: bookmark any result, tag it, and filter the collection later. Share links encode the base color and harmony type in the URL, so anyone who opens your link sees the exact palette you were looking at.

Frequently asked questions

What does a color palette generator do?: It turns one seed color into a complete, harmonious set of colors using rules such as complementary, analogous and triadic relationships. Swatchboard generates twelve palette types instantly and exports them as CSS variables, JSON, SCSS, Tailwind or JavaScript.
How do I make a harmonious color palette?: Start from a base color that already fits your brand, choose a harmony for the contrast you need — complementary for maximum tension, analogous for calm — then adjust the light and dark steps until text separates clearly from surfaces. Verify the pair with the WCAG contrast checker before shipping.
Is Swatchboard free and private?: Yes. Swatchboard is free, runs entirely in your browser and never uploads your colors or images. Palettes you save live in your own localStorage and can be exported as JSON at any time.

Color palette generator.One color, an entire system.