Tool · Color Systems Explorer

One brand color, 20 famous design systems.

See how Tailwind, Radix, Material 3, Carbon, Spectrum, Polaris, Atlassian, Apple HIG, Fluent, Lightning, Ant Design, Bootstrap, Chakra, Mantine, Open Color, Primer, shadcn, Base Web, Evergreen, and USWDS would each express the same brand color — with copy-ready snippets and links to each system's official docs.

Tailwind CSS

ramp

Tailwind Labs · The de-facto utility-first palette — 11 stops, OKLCH in v4.

50100200300400500600700800900950
Open in Tailwind palette generator →

Radix Colors

ramp

Radix UI / WorkOS · 12 perceptually-spaced steps with semantic stop roles.

123456789101112
Open in Radix colors tool →

shadcn/ui

semantic

shadcn · CSS-variable token contract on top of Tailwind.

Open in theme generator →

Material Design 3

tonal

Google · 13-tone HCT tonal palette, dynamic-color ready.

T0T10T20T30T40T50T60T70T80T90T95T99T100

Carbon (IBM)

hybrid

IBM · 10-step ramp + interactive token roles.

102030405060708090100

Atlassian Design System

semantic

Atlassian · Semantic background/text/border tokens, full status set.

Apple HIG

semantic

Apple · tintColor + system semantic palette.

Polaris (Shopify)

semantic

Shopify · Surface / text / fill / border slots with brand + status.

Adobe Spectrum

hybrid

Adobe · 15-step gray + chromatic scales; accent semantic tokens.

5010020030040050060070080090010001100120013001400

Ant Design

ramp

Ant Group · Algorithmic 10-step palette baked into the framework.

12345678910

Bootstrap

ramp

Bootstrap Team · 100..900 scale used by tens of millions of sites.

100200300400500600700800900

Chakra UI

ramp

Chakra UI · Tailwind-shaped scale wired into `theme.colors`.

50100200300400500600700800900

Mantine

ramp

Mantine · 0..9 hex array — the framework's native color shape.

0123456789

Open Color

ramp

Yeun Park (Open source) · Community-maintained palette popular in dataviz.

0123456789

Primer (GitHub)

ramp

GitHub · GitHub's design system — 10 steps + roles.

0123456789

Lightning (Salesforce)

semantic

Salesforce · SLDS token namespace `--slds-g-color-*`.

Fluent UI

semantic

Microsoft · Microsoft's `colorBrand*` token namespace.

Base Web (Uber)

semantic

Uber · JS theme object — content / button / background slots.

Evergreen (Segment)

semantic

Segment · Intent-based tokens: primary / success / danger.

U.S. Web Design System

semantic

GSA · Federal-government design system — theme color slots.

📚 All 20 official documentation links