Color Palette Generator — From Base Color (HEX, HSL, OKLCH)

Guide

About Color Palette Generator

Pick a base color and see complementary, analogous, triadic, tetradic, and monochromatic palettes side-by-side. Each scheme shows 5 swatches — copy any as HEX, HSL, or OKLCH. Use the monochromatic ladder as a Tailwind-style 50-900 scale for design tokens.

Why generate a palette

Color theory says certain hue relationships work harmoniously. Pulling them out of a wheel manually is tedious; a generator gives you the math without your eye second-guessing it.

Scheme	Logic	Use case
Monochromatic	One hue, varying lightness	Tonal scale, design tokens
Analogous	Adjacent hues on the wheel	Soft, harmonious palettes
Complementary	Opposite hues	High contrast, accent pairs
Split-complementary	Base + 2 near-opposites	Less aggressive than complementary
Triadic	Three evenly-spaced hues	Vibrant, balanced
Tetradic	Four hues, two pairs	Charts, illustrations

Common workflows

Generate Tailwind-style tokens from a brand color. Pick OKLCH monochromatic, copy the 11-step ladder, paste into tailwind.config.js under colors.brand.

Pick chart colors. Tetradic gives you 4 maximally-distinguishable colors. Use for series in a line chart.

Build an accent palette. Analogous gives 5 harmonious colors. Use for tags, status badges, category colors.

Audit accessibility. Each swatch shows WCAG contrast. Pair foreground/background pairs that hit AA.

Why OKLCH for palette generation

HSL palettes look uneven because human perception of lightness varies by hue. OKLCH compensates — equal numerical lightness produces equal perceived brightness. The same logic that makes OKLCH great for variants makes it great for full palettes. The default mode here is OKLCH; toggle to HSL if you need to match a legacy tool’s output.

Frequently asked questions

Which scheme should I use?

Monochromatic is the safest for tokens (a tonal ladder of one hue). Analogous for harmonious accents. Complementary for attention-grabbing contrasts. Triadic and tetradic for multi-color illustrations.

Why does my palette feel muddy?

Generating palettes in HSL gives uneven lightness — a "50% lightness" yellow looks much brighter than "50% lightness" blue. Switch to OKLCH mode for perceptually uniform palettes.

Is there a Tailwind preset?

Yes. The 11-step monochromatic ladder (50, 100, 200, ..., 950) maps directly to Tailwind's color naming. Drop into your tailwind.config.

What is "tetradic"?

Four colors evenly spaced around the wheel — two complementary pairs. Great for charts and data visualization where you need maximum distinguishability.

Can I export the palette?

Copy individual swatches, or copy the whole palette as JSON, Tailwind config, or CSS custom properties.

How accessible is the palette?

Each swatch shows its WCAG contrast against white and black. Use the contrast info to assign foreground colors that pass AA when paired with the swatch.

Related tools

Last updated: 2025-01-15