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

Brand palette

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

#43459Drgb(67, 69, 157)hsl(239, 40%, 44%)

#552E7Frgb(85, 46, 127)hsl(269, 47%, 34%)

#7D4C8Drgb(125, 76, 141)hsl(285, 30%, 43%)

#6D344Frgb(109, 52, 79)hsl(332, 35%, 32%)

02 / Semantic UI colors

Semantic UI colors

The brand hue stays dominant. Lightness and chroma are adjusted for readability; green, amber, and red are reserved for status only.

Brand family

Primary#5F3A86

Primary hover#4B2D6D

Secondary / Indigo#43459D

Accent#7D4C8D

Deep accent#6D344F

Interface neutrals

Page#F7F5FA

Surface#FFFFFF

Heading#24152F

Body text#2D2833

Muted text#6F6875

Subtle border#D8D2DE

Control border#97939C

Status only

Success#0F766E

Warning#B45309

Error#B42318

Combinations that workContent on a light surfacePrimary actionSecondary action

Workspace

Practical preview

One brand family across the whole interface.

Quiet surfaces keep content readable while brand colors handle hierarchy and action.

PrimarySecondaryOutline

Contrast target: 4.5:1

03 / Contrast check

Contrast check

Body textRatio 14.36:1Pass · Target 4.5:1

Muted textRatio 5.37:1Pass · Target 4.5:1

HeadingRatio 15.86:1Pass · Target 4.5:1

PrimaryRatio 8.62:1Pass · Target 4.5:1

Secondary / IndigoRatio 8.15:1Pass · Target 4.5:1

Control borderRatio 3.01:1Pass · Target 3:1

Focus ringRatio 8.15:1Pass · Target 3:1

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