Complementary · Light
Jade Contrast
Cool, measured palette · WCAG AAA
AAA Primary 5.0:1
DESIGN TOOL
Color Palette Generator
Create color palette concepts from your industry, brand mood and preferred color. Compare color harmonies, check contrast and visualize a website.
Color palette gallery
Find your perfect palette
Deterministic · local only 24 palettes
Analogous · Light
Indigo Drift
Cool, vivid palette · WCAG AAA
AAA Primary 5.1:1
Triadic · Light
Ember Chord
Warm, vivid palette · WCAG AAA
AAA Primary 5.1:1
Split complementary · Light
Jade Echo
Cool, measured palette · WCAG AAA
AAA Primary 4.0:1
Monochromatic · Light
Indigo Tone
Cool, vivid palette · WCAG AAA
AAA Primary 4.1:1
Tetradic · Light
Ember Prism
Warm, vivid palette · WCAG AAA
AAA Primary 4.0:1
Scale boards · Jade Contrast
Grayscale, tints, shades and tones
Modular steps built from the selected primary. Use tints on backgrounds, shades for pressed states and tones for muted text.
Grayscale
Neutral steps for structure, dividers and disabled states.
Tints
Toward white. Backgrounds, hovers and disabled fills.
Shades
Toward black. Hover, active and pressed states.
Tones
Toward grey. Muted text, borders and subtle fills.
Tints toward white suit backgrounds and disabled states, shades toward black suit hover and pressed states, and tones toward grey suit muted text and borders. "AA text" marks the steps that clear 4.5:1 against this palette's own background.
Selected palette
Jade Contrast · Complementary
SaaS / Technology · Light · text 15.7:1 AAA
- Primary: #007c5b
- Secondary: #e185b8
- Accent: #df92bb
- Text: #13231d
- Background: #fef9fb
Color relationships, not random swatches
Complementary colors sit opposite each other on a hue wheel. Analogous colors are neighbors; triadic colors are spaced a third of a turn apart. Split complementary colors flank the opposite hue, monochromatic colors share one hue, and a rectangular tetradic scheme uses two complementary pairs.
These concepts use an OKLCH hue wheel, which is different from a traditional pigment wheel. Lightness and chroma are adjusted independently and the result is mapped into sRGB. Industry and mood are starting-point design heuristics, not universal claims about how people perceive a brand.
A palette needs roles
A primary color draws attention to important actions. Secondary and accent colors support it. Background, surface, text and muted text establish the reading hierarchy. A harmonious set of swatches is not automatically a readable interface: contrast depends on which colors touch.
A supplied brand color is kept as the primary color. Supporting foregrounds are chosen separately, so a light brand color can use dark button text without changing the brand color itself.
Color palette questions
No. A deterministic color engine combines hue relationships, perceptual lightness and chroma adjustments. The same brief and generation seed produce the same concepts.