Which palette scheme should I use for a brand?

Analogous schemes (3 colors within 60° of each other) feel cohesive — good for a confident, single-tone brand. Triadic and complementary feel energetic — good for kid-friendly or playful brands. Monochromatic is the safest for B2B and enterprise.

Does it pick from OKLCH or HSL?

OKLCH by default — produces palettes where each color has equal perceived saturation and brightness, looking professionally balanced. HSL mode available for SCSS-friendly output.

Can I export to Tailwind?

Yes — copy as a tailwind.config.js theme.colors snippet, with each palette color as a named token. Or as a 50–950 step ramp via the Tailwind Palette Generator.

harmonies · live · local

Build harmonised color palettes

Q: Is anything sent to a server?

No — palette math runs locally.

Pick a base color and a harmony rule — monochromatic, complementary, triadic, tetradic, analogous or split-complementary — and copy any swatch instantly.

Color Palette Generator

Base

#3b82f6

anchor

Scheme

triadic

harmony

Colors

swatches

Status

ready

live

input · color

Base color

Harmony

output · preview

#3b82f6

#f63b82

#82f63b

Quick Start

How to build a harmonised palette

Color harmony picks visually pleasing combinations using fixed hue offsets on the color wheel. Pick a base and a rule — the math handles the rest.

01
Pick a base
Use your brand color or any HEX you like.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
baseOKLCHCSS Color 4perceptuallive
base · color#3b82f6 · sRGB
```
hue 217
```
loaded · normalisedOKLCH · ready
02
Choose a scheme
Triadic for vibrant trios, analogous for calm gradients, complementary for high contrast.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
schemehex · rgb · hslP3gamut-mappedlive
rule · optionstriadic · live
```
+0°, +120°, +240°
```
options applied · livelive
03
Inspect the swatches
Each color is the base rotated on the HSL hue wheel — same saturation and lightness.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
swatchesWCAG 2.2APCAAA · AAAcontrast
out · converted3 colors · ready
```
#3b82f6  #82f63b  #f63b82
```
converted · liveWCAG-aware
04
Copy or download
Click a swatch to copy its HEX, or download the list as text.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedexported · done
```
saved
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to use a harmonised palette

Visual harmony with zero guesswork.

Marketing pages

Hero gradients and CTAs that feel intentional. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Design systems

Seed brand secondary and accent from a single primary. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Data viz

Generate categorical colors that don't clash. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Code themes

Quickly draft an editor palette from one accent. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Logo work

Find complementary accents for a brand mark. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Slides & decks

Pull a consistent palette for any presentation. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Which scheme should I pick?

Complementary maximises contrast (best for CTAs). Triadic is vivid and balanced. Analogous is calm. Split-complementary softens complementary by 30°.

Why do monochromatic colors look like shades?

Monochromatic keeps the hue constant and walks lightness instead — exactly how design tokens build 50→900 ramps.

Can I export the palette?

Yes — copy all HEX values, or download a plain-text file.

Does it know about WCAG contrast?

No — for accessibility checks use the Contrast Checker or WCAG Pair Tester.

Is anything sent to a server?

No — everything runs locally in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!