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

Complementary is just two colors directly opposite on the wheel (high contrast, can feel aggressive). Split-complementary uses the two colors flanking the complement — same contrast level but more balanced and less jarring.

Are these matched in HSL or OKLCH?

OKLCH by default — equal angular distance in perceptual space, so the partner colors look properly balanced. HSL produces uneven brightness across the wheel.

When do I use triadic vs tetradic?

Triadic (3 colors) for energetic, kid-friendly brands. Tetradic (4 colors) for richer dashboards and data viz that needs more category distinction. Both need careful neutral balancing — start with one as the dominant color.

complementary · triadic · tetradic · square · analogous

Build classical color schemes

Generate complementary, triadic, tetradic, square, split-complementary and analogous schemes from a single base color. Click any swatch to copy.

Complementary Colors

Base

#3B82F6

input

Schemes

harmonies

Swatches

colors

Status

ready

live

input · color

Base HEX

Live swatch

Each scheme rotates the hue around the color wheel. Click any swatch to copy its HEX.

output · preview

Complementary

Triadic

Split-Complementary

Tetradic

Square

Analogous

Quick Start

How to build a color harmony

Pick a base color and read off every classical harmony. Click any swatch to copy its HEX.

01
Pick a base
The base anchors all schemes — start with your brand primary.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
base · colorhex · sRGB
```
#3b82f6
```
loaded · normalisedOKLCH · ready
02
Scan harmonies
Six classical color schemes computed by rotating hue: complementary, triadic, etc.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
scanhex · rgb · hslP3gamut-mappedlive
rows · options6 · live
```
complementary
triadic
tetradic…
```
options applied · livelive
03
Copy a swatch
Click any color tile to copy its HEX value.
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.
copyWCAG 2.2APCAAA · AAAcontrast
✓ · convertedcolor · ready
```
✓ Copied #f6863b
```
converted · liveWCAG-aware
04
Tweak and iterate
Change the base color to refine — the harmonies update live.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
iterclipboardCSS varspalette JSONblob
ok · copiedready · done
```
new base → new schemes
```
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 color harmonies

Brand design, illustration, theming.

Brand systems

Find supporting accents from a single brand primary. 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

Illustration

Pick a triadic set for vibrant cohesive artwork. 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

UI theming

Use analogous for calm, complementary for emphasis. 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

Data viz

Tetradic schemes give 4 distinct categorical colors. 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

Quick exploration

Iterate fast on hue without leaving the browser. 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

Design hand-off

Share HEX lists in JSON for engineers to ingest. 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 for high contrast accents. Analogous for calm. Triadic/Tetradic for vibrant illustration. Test all six.

Why does the result look harsh?

Hue rotation in HSL doesn't preserve perceived brightness. Adjust lightness manually after.

What's split-complementary?

Base + two colors 30° from its complement. Easier to balance than pure complementary.

Are tetradic and square different?

Yes — tetradic uses 60/120/180 rotation; square is exact 90° rotation.

Is anything sent to a server?

No — hue rotation runs entirely 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!