Palette Generator

Pick a base color and a harmony rule to generate a matching palette, computed from real color theory.

Base color

#

Scheme

Complementary harmony Base family: Cyan Cool 2 colors Shareable URL — this exact palette lives at this address

Accessibility report

WCAG contrast for each generated color against white and black text — AA means it can carry normal-size text (≥4.5:1) on that background.

Aa #48d1cc White: 1.86:1 — Black: 11.27:1 AA Full check →

Aa #d1484d White: 4.43:1 — Black: 4.75:1 AA Full check →

Design-system scale of #48d1cc

A 50–900 ladder holding the base hue and saturation while stepping lightness — a plain HSL ladder, predictable and honest, though not perceptually hand-tuned the way frameworks tune theirs. Click any step for its full page.

50 effbfa 100 daf6f5 200 b6edeb 300 91e3e0 400 6cdad6 500 48d1cc 600 2fbbb6 700 269793 800 1d726f 900 134d4b

Preview in a real layout

The palette mapped to UI roles — background and text tones derived from the base hue, your generated colors as primary and accent.

Acme App OverviewReportsSettings

Everything in one place

This is how body copy reads on a background tinted with your base hue. If this paragraph is hard to read, the palette needs work before it needs admiration.

Primary action Secondary

Card surface

84%

accent color as a data highlight

CSS variables

Export color codes

CSS

--color-1: #48d1cc;
--color-2: #d1484d;

About complementary palettes

Complementary palettes pair a color with its opposite on the hue wheel (180° apart), giving strong, high-contrast combinations. The angle math behind every rule — and when each one earns its keep — is covered in Color Harmony 101.

Curated palettes in this hue

Slack 5 colors Airbnb 3 colors Ocean Depths 5 colors

Frequently asked questions

The URL is the save: every base color and harmony combination has its own permanent address, so bookmarking or sharing the link reproduces this exact palette. No account needed.

Complementary for maximum contrast between two roles; analogous for calm, cohesive schemes; triadic or split-complementary for three balanced roles; monochromatic when cohesion matters more than variety. Tetradic and square give the widest range but are the hardest to balance — let one hue dominate.

This scale is a plain HSL lightness ladder — the same hue and saturation at ten lightness stops. Framework scales like Tailwind's are hand-tuned per family in OKLCH, shifting hue and saturation subtly across steps for perceptual evenness. Ours is predictable and derivable from any color; theirs are curated. Both are legitimate.

The Export colors button gives you the set as CSS variables, SCSS, LESS, a Tailwind config block, JSON, or a plain list — in HEX, RGB, HSL, or OKLCH. For design tools, paste the values or use the JSON as design tokens.

Related tools

Generators

Color Mixer

Blend two colors into any number of perceptually even steps, computed in OKLab space.

Try it → Colors

HEX to RGB Converter

Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.

Try it → Accessibility

Contrast Checker

Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.

Try it →