What's the difference between triadic and split-complementary?

Triadic is three hues equally spaced (120° apart) — punchy and balanced. Split-complementary takes a base color and the two hues adjacent to its complement (180° ± 30°) — softer than direct complementary because the opposing tension is split between two hues.

Why does the same harmony produce different palettes for different bases?

Harmonies are defined by hue-wheel position relative to the base. Two starting points 90° apart yield palettes that share no colors but the same internal structure (e.g. both triadic). The harmony is the rule; the base is the seed.

Can I generate a palette from a Pantone color?

Yes — start with the Pantone's sRGB approximation (use the Pantone → HEX converter) and feed that HEX in. The result palette is screen-only; for print, run each output HEX back through HEX → Pantone to find the closest spot inks.

How does the palette export to Tailwind?

We emit a `colors` block in Tailwind v3 format with named scales (50–950 for monochromatic, primary/secondary/accent for harmonies). Paste it under `theme.extend.colors` in `tailwind.config.ts`.

Are the palettes saved across sessions?

Currently no — the generator is fully client-side and stateless. Use the Saved Colors panel to pin individual swatches; full palette export goes to your clipboard or codebase.

Color theory

Color Palette Generator

Build harmonious color palettes from any base. Complementary, analogous, triadic, tetradic, split-complementary, and monochromatic harmonies — with WCAG contrast checks and Tailwind / CSS / token export.

Six classical color harmonies in one canvas
Locks any swatch and rebuilds the rest around it
WCAG AA / AAA pair check on every swatch
Export Tailwind config, CSS variables, or design tokens (W3C DTCG)

Direct answer

Pick a base color, choose a harmony (complementary, triadic, analogous…) and the generator returns a balanced palette built on equal hue-wheel relationships in HSL space. Every swatch comes with an accessibility-checked text color and one-click export.

Base color

Harmony

#64ADF2

#6467F2

#A864F2

CSS Variables

:root {
  --color-1: #64ADF2;
  --color-2: #6467F2;
  --color-3: #A864F2;
}

When this saves you time

Real workflows where color palette generator replaces tedious manual work or an in-app subscription tool.

Brand

Seed a brand palette from one hero color

Start with the brand primary, generate triadic + monochromatic, then lock the primary and iterate accents until the palette balances saturation and lightness.

Product

Build a UI palette with accessible pairs

Choose analogous harmony for a calm, single-family UI. Every neutral and accent comes with an AA/AAA contrast report so you ship without manual contrast checks.

Marketing

Design a campaign palette from a stock photo

Use the image color extractor to pull a base, then pipe it into the palette generator with complementary harmony — instant high-contrast layout candidates.

Data viz

Pick categorical chart colors that don't collide

Split-complementary or tetradic gives 4 distinct hues at similar perceived lightness — useful for bar/line charts where adjacent series shouldn't blur together.

Pre-flight a Pantone palette without buying a guide

Generate from a HEX, then click any swatch to see its closest Pantone (PMS) match plus ΔE — useful for early stage brand explorations before printer briefs.

Dark mode

Mirror a light palette into a dark theme

Use monochromatic harmony on a brand color, then invert lightness midpoints — a one-click route to a usable dark mode palette before fine-tuning.

How it works

The methodology — every transformation documented so the output is reproducible.

Pick a base color

Drop in a HEX, RGB, or HSL. The generator normalizes to HSL because hue-wheel harmonies are easiest to compute and reason about in that space.

Select a harmony

Six rules: monochromatic (single hue, varied lightness), analogous (hues within ±30°), complementary (180°), split-complementary (180° ± 30°), triadic (120° apart), tetradic (90° apart).

Rebuild and refine

Every swatch gets re-computed live as you drag the hue. Lock a swatch and the rest re-balance around it — useful when one color is brand-locked.

Audit + export

Per swatch: WCAG AA/AAA scores against black + white, recommended text color, and HEX/RGB/HSL strings. Export the whole palette as Tailwind v3 colors, CSS variables, or W3C DTCG tokens.

Worked examples

Input	Result	Notes
#7A3DFF · Complementary	#7A3DFF, #C2FF3D	Direct opposites on the hue wheel. High contrast — great for CTAs.
#FF6900 · Triadic	#FF6900, #0069FF, #69FF00	Three hues 120° apart. Strong, vibrant, used in playful brands.
#0EA5E9 · Analogous	#0EA5E9, #0EE9C8, #0E72E9	Hues within ±30°. Calm, harmonious — common in product UIs.
#16A34A · Monochromatic	#0F6E33, #16A34A, #4ADE80, #BBF7D0	Single hue, varied lightness/saturation. Good for state ramps (success, info).

Common mistakes to avoid

Treating harmony as a brand decision

Harmonies are starting points, not deliverables. Use them to seed a palette, then adjust manually for context, accessibility, and brand voice.

Ignoring lightness when picking accents

Two hues 180° apart in HSL can still have identical lightness — text on either looks fine. Vary lightness explicitly or accents will not separate visually.

Forgetting that HSL is not perceptual

HSL is convenient but not perceptually uniform — yellow at L=50% looks brighter than blue at L=50%. For perceptually balanced palettes, lean on the lightness preview rather than the L value.

Skipping the contrast audit on accent swatches

An accent that fails 4.5:1 against your text means broken buttons and unreadable labels. Use the AA badge on each swatch as a hard gate.

Frequently Asked Questions

Why HSL is the right space for harmony math

Color harmonies were codified in the 19th century by theorists like Chevreul and Itten, who worked in pigment color wheels. The modern HSL (hue/saturation/lightness) cylinder is a direct descendent: hue is an angle around the wheel, which makes harmonies expressible as simple offsets — 180° for complementary, 120° for triadic, ±30° for analogous. RGB or HEX cannot represent these relationships without trigonometric gymnastics.

The downside: HSL is geometric, not perceptual. Equal lightness values in HSL look very different to the eye — yellow at L=50 feels much brighter than blue at L=50. For perceptually consistent palettes, designers increasingly use OKLCH or LCh, which preserve the angular hue intuition while normalizing perceived lightness. We expose HSL by default for familiarity and run an OKLCH check behind the scenes when surfacing the accessibility ratings.

How many colors should a palette have?

For a brand identity, 1 primary + 1 secondary + 2 accents + 5 neutrals is the working minimum — enough to compose a website, an email, and a deck without ever feeling cramped. For a product UI, expect 5 ramps × 9 stops = 45 tokens once success/warning/error and surface tints are accounted for. The palette generator outputs the seed; you can expand to the full token set with the Design Token Generator.

Going from palette to production

Once a palette feels right, the next step is freezing it as tokens. We support three exports:

CSS variables: a flat :root with one variable per swatch — drop-in for any framework.
Tailwind v3 config: nested under theme.extend.colors with semantic names you choose.
W3C DTCG JSON: design-token format consumed by Style Dictionary, Figma Tokens Studio, and most modern design-system pipelines.

Color theory references we lean on

The generator's rules are conservative and well-documented in Itten’s The Art of Color (1961) and Albers’ Interaction of Color (1963). We do not invent new harmonies — we expose the classical six with modern accessibility and export tooling layered on top.

Color Palette Generator