What does each harmony rule produce?

Complementary pairs your base with the hue directly opposite (180°). Analogous walks neighbouring hues in 30° steps. Triadic spaces three colours 120° apart; square spaces four 90° apart; tetradic uses two complementary pairs (a rectangle on the wheel). Split-complementary takes the two hues either side of the complement. Monochromatic keeps one hue and steps through lightness for a tonal set. All rotations happen in HSL, then convert to hex/RGB for display.

How are the 50→950 ramps generated?

Each scheme colour is converted to HSL, then an 11-step ramp (50 through 950) is built by holding the hue, walking lightness down a fixed contrast-friendly curve, and easing saturation off at the very light and very dark ends so the scale never goes muddy or washed out. Because it derives from your colour, two different blues yield two genuinely different ramps — giving you ready-made shades for backgrounds, borders, hovers and text.

What exactly does the accessibility matrix check?

For every colour in the scheme it computes the WCAG contrast ratio of that colour used as text against three surfaces: pure white, pure black, and the scheme background (the lightest swatch). Each cell is graded AAA (≥7:1), AA (≥4.5:1), AA Large (≥3:1 — large text or UI components), or Fail. That tells you at a glance which colours are safe for body copy, which only work at large sizes, and which should never carry text.

Which export formats are available?

Six. CSS custom properties emit every colour and its full 50→950 ramp under :root. Tailwind v4 @theme emits the same ramps as --color-* tokens. Tailwind v3 gives you a module.exports config with each colour as a shade object. SCSS emits $variables per step. JSON gives you the structured scheme (hex, rgb, hsl and ramps) for programmatic use. And SVG renders a printable swatch sheet with each colour, its hex label, and a mini ramp strip.

How many colours does a scheme contain?

Fixed-relationship harmonies return the number the relationship defines: complementary returns two, triadic and split-complementary three, tetradic and square four. Analogous and monochromatic are variable — use the Colours stepper to pick anywhere from two to eight. Every colour, regardless of count, gets its own full tint/shade ramp.

Can I reproduce or share an exact scheme?

Yes. The base colour, harmony rule, colour count, and selected export format are all encoded in the page URL as you work, so copying the share link reproduces the exact same scheme — ramps, preview and matrix included. You can bookmark a configuration or paste it into a ticket for design handoff.

Color Scheme Generator

Pick a base colour and a harmony rule and the tool builds a full scheme where every colour ships its own perceptual 50→950 tint/shade ramp. A live mock UI applies the palette in context, a WCAG accessibility matrix grades each colour on white, black, and the scheme background, and you can export to CSS variables, Tailwind v4 @theme, Tailwind v3, SCSS, JSON, or an SVG swatch sheet.

About this ToolHow it works, benefits & use cases

Most palette tools hand you five flat swatches and leave you to figure out the rest. This one builds a whole usable scheme. Pick a base colour and a harmony rule — complementary, analogous, triadic, tetradic, split-complementary, square, or monochromatic — and the tool rotates your hue around the colour wheel, then gives every resulting colour its own perceptual 50→950 tint/shade ramp, so you get backgrounds, borders, hover states and text shades for free. A live mock UI (header bar, card, button and badge) applies the palette in context as you edit, with text colours auto-chosen for legibility. A WCAG accessibility matrix grades each colour as text against white, black, and the scheme background, so you instantly know which swatches are safe for body copy, fine print, or only large labels. Every swatch is click-to-copy, and you can export the full scheme — including the ramps — as CSS custom properties, Tailwind v4 @theme, a Tailwind v3 config, SCSS, JSON, or an SVG swatch sheet. Base colour, harmony, count and format all live in the URL, so any scheme is one link away.

How to Use

1Set a base colour with the picker or by typing a hex value, or click "Random base" for a fresh starting hue.
2Choose a harmony rule — complementary, analogous, triadic, tetradic, square, split-complementary, or monochromatic.
3For analogous and monochromatic schemes, set how many colours you want with the Colours stepper.
4Watch the live mock UI apply the palette, click any swatch to copy its hex, and scan the per-colour tint/shade ramps.
5Read the accessibility matrix to see which colours pass WCAG AA/AAA as text on white, black, and the background.
6Pick an export format and copy or download the scheme; share the URL to hand the exact palette to a teammate.

Key Benefits

Seven harmony rules grounded in colour-wheel theory
Every colour ships a perceptual 50→950 tint/shade ramp, not just a single hue
Live mock UI applies the palette to a header, card, button and badge in real time
WCAG accessibility matrix grades each colour on white, black, and the scheme background
Click-to-copy swatches with HEX values
Six export formats including Tailwind v4 @theme and an SVG swatch sheet
Shareable URL captures base colour, harmony, count, and export format

Common Use Cases

Building a complete brand palette — with shades — around a single primary hue
Finding a complementary or split-complementary accent and its supporting tints
Generating an analogous range for layered backgrounds and subtle UI surfaces
Checking which scheme colours are actually legible as text before shipping
Exporting a Tailwind v4 @theme or v3 config with full ramps for a new project
Dropping an SVG swatch sheet into a spec or handoff doc

Live preview

DashboardNew

Monthly overview

Your palette applied to a real card, header bar, button and badge so you can judge it in context.

Swatches

Every colour passes WCAG AA on at least one surface

Colour	White	Black	Background
Base	3.6AA Large	5.8AA	1.9Fail
Complement	1.9Fail	11.1AAA	1.0Fail

Background = lightest swatch (#f6af3c). Ratios are the colour used as text.

Scheme output

CSS variables · 2 colours × 50→950 ramps

:root {
  --base-50: #f5f8fc;
  --base-100: #e7effb;
  --base-200: #c6d9f9;
  --base-300: #92b9f7;
  --base-400: #5090f7;
  --base-500: #2474f5;
  --base-600: #0b5fe7;
  --base-700: #0b50bf;
  --base-800: #0d4296;
  --base-900: #0e3574;
  --base-950: #0b2349;
  --complement-50: #fcf9f5;
  --complement-100: #fbf3e7;
  --complement-200: #f9e5c6;
  --complement-300: #f7d092;
  --complement-400: #f7b750;
  --complement-500: #f5a524;
  --complement-600: #e7930b;
  --complement-700: #bf7a0b;
  --complement-800: #96620d;
  --complement-900: #744d0e;
  --complement-950: #49310b;
}

Base & harmony

Base color

Harmony

Base hue + its opposite (180°).

Tint & shade ramps

Base

Complement

Export format

A scheme, not just five swatches

A harmony rule rotates your base hue around the colour wheel — complementary grabs the opposite hue, triadic spaces three 120° apart, and so on. But a usable palette needs more than the pure hues: every colour here ships a perceptual 50→950 tint/shade ramp, so you get backgrounds, borders, hover states, and text shades for free.

Why the accessibility matrix matters

A pretty colour is useless as text if it can't be read. The matrix grades each colour against white, black, and the scheme background using the WCAG contrast formula, so you instantly see which swatches are safe for body text (AA), small print (AAA), or only large UI labels.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Color Scheme Generator

How to Use

Key Benefits

Common Use Cases

Swatches

Base & harmony

Tint & shade ramps

Export format

A scheme, not just five swatches

Why the accessibility matrix matters

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Color Scheme Generator