FREE COLOR TOOL / SCREEN + PRINT

Build a palette for screen and print.

Start with HEX, RGB, HSL, or CMYK—or pull colors from your logo. Shape the harmony, test contrast, and export a practical PDF guide for your team.Open the tool ↓Image analysis happens entirely in your browser.

01 / Palette playground

Brand palette

#5F3A86rgb(95, 58, 134)hsl(269, 40%, 38%)CMYK C29 M57 Y0 K47

#43459Drgb(67, 69, 157)hsl(239, 40%, 44%)CMYK C57 M56 Y0 K38

#552E7Frgb(85, 46, 127)hsl(269, 47%, 34%)CMYK C33 M64 Y0 K50

#7D4C8Drgb(125, 76, 141)hsl(285, 30%, 43%)CMYK C11 M46 Y0 K45

#6D344Frgb(109, 52, 79)hsl(332, 35%, 32%)CMYK C0 M52 Y28 K57

CMYK values are practical estimates converted from sRGB. Final ink values vary by ICC profile, paper, press, and finish.

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 HEX, RGB, HSL, estimated CMYK, UI roles, usage rules, and verified contrast pairs.