Complementary Color Generator

Build a complementary or related palette from one color, then verify contrast, inspect HSL/OKLCH evidence, preview color-vision approximations and export production-ready design tokens.

harmony · OKLCH/HSL evidence · WCAG contrast · design-token handoff

Complementary Color & Accessible Palette Studio

Start with one color, generate a deliberate harmony, inspect contrast and perceptual/color-model evidence, then hand off the exact palette as production-ready tokens.

Wave132 deep authority

6 harmony modesWCAG pair matrix50–950 shade scaleCSS · SCSS · JSON · SVG

Base HEXPickerHarmony

Color-vision preview

Ready.

Generated harmony

Click any swatch to copy its original HEX. Color-vision simulations are approximate design previews, not medical diagnostics.

Base color evidence

WCAG contrast between palette colors

Pair	Ratio	Text threshold

Accessibility boundary. Contrast ratios are deterministic WCAG-style luminance calculations, but a palette is not automatically accessible just because some pairs pass. Test the exact foreground/background role, text size/weight, focus states, charts and real UI states.

UI preview

Use a palette in context instead of judging isolated swatches. The button below uses another palette role.

This preview is intentionally simple. It does not replace testing all product states or a design system review.

Primary 50–950 shade scale

Shades adjust OKLCH lightness while moderating chroma. Gamut clipping can slightly alter intended perceptual relationships in sRGB.

Production tokens

Project & repeat use

Saving is explicit. Local snapshots store only palette settings/results in this browser.

#	Base	Mode	Palette
No explicitly saved palettes.

Color-model and competitor boundaries

The classic complement here is the 180° opposite hue in HSL while preserving base saturation and lightness. Different color models can produce different-looking complements.
OKLCH evidence and the shade scale are shown because perceptual lightness/chroma tell a different story than HSL; sRGB gamut clipping still applies.
Color-vision previews use simplified matrices for design exploration only. They are not clinical simulations and cannot guarantee usability for every viewer.
This Studio intentionally focuses on a deterministic single-base design-token workflow. It does not claim Coolors-scale community libraries, image extraction, Figma plugins or cloud collaboration.

Practical guide and verification

Complement depends on the colour model

A complementary colour is defined relative to a colour model or wheel. Rotating hue by 180 degrees in HSL/HSV is a useful digital convention, but it is not identical to every artistic or perceptual definition of complementary colour.

Use contrast deliberately

Complementary hues can create strong visual separation, yet equal saturation and lightness may feel harsh. Adjust lightness, saturation and neutral spacing instead of treating the generated pair as a finished accessible palette.

Common mistake

Do not assume hue opposition guarantees readable text. Accessibility contrast depends on relative luminance, so two visually different hues can still fail text-contrast requirements.

Color and accessibility boundaries

HEX/RGB/HSL/HSV/OKLCH conversions are numerical color-model operations. CMYK output is an RGB-derived approximation rather than ICC-profiled print proofing. WCAG contrast ratios measure luminance contrast only and do not certify a full interface. Color-blindness previews are design simulations, not medical tests.