FREE DESIGN TOOL / PRIVATE BY DEFAULT

Build a palette that works beyond the screen.

Start with a color or pull one from your logo. Shape the harmony, test real contrast, then leave with a complete PDF guide your team can actually use.Open the tool ↓Image analysis happens entirely in your browser.

01 / Palette playground

Live palette

#5F3A86rgb(95, 58, 134)hsl(269, 40%, 38%)

#E36653rgb(227, 102, 83)hsl(8, 72%, 61%)

#17324Drgb(23, 50, 77)hsl(210, 54%, 20%)

#E9DDC8rgb(233, 221, 200)hsl(38, 43%, 85%)

#477C7Brgb(71, 124, 123)hsl(179, 27%, 38%)

02 / UI color system

UI color system

Recommended roles derived from your palette. Neutrals are tinted to match; actions and text are adjusted until they meet their contrast target.

Page#F6F4FB

Surface#FFFFFF

Heading#191320

Body text#2E2935

Muted text#65616C

Control border#97939C

Primary action#5F3A86

Accent#978E7F

Success#05752D

Warning#9F6701

Error#BE222A

Practical preview

A usable hierarchy, not just matching swatches.

Backgrounds stay quiet, text remains readable, and stronger colors are reserved for action and status.

Primary actionSecondary

● Ready

03 / Contrast check

Contrast check

Body textRatio 14.14:1Pass · Target 4.5:1

Muted textRatio 6.03:1Pass · Target 4.5:1

HeadingRatio 18.18:1Pass · Target 3:1

Primary actionRatio 8.62:1Pass · Target 4.5:1

Control borderRatio 3.01:1Pass · Target 3:1

Focus ringRatio 4.86:1Pass · Target 3:1

Includes creative swatches, UI roles, usage rules, and verified contrast pairs.