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

What is the color systems?

A color system is the structured set of scales, semantic roles and tokens a product uses instead of ad hoc colors. This tool builds one from a palette: primary, secondary and neutral scales, semantic colors, and exports as design tokens.

From palette to color tokens

Paste a palette or pull one from the generator. The tool turns each color into a tonal scale (50 to 950), assigns semantic roles (background, surface, border, text, primary, success, warning, danger) and writes tokens in the W3C Design Tokens format, plus CSS variables, Tailwind config and Figma-ready JSON. Roles can be reassigned by drag and drop and every pair is contrast-checked.

Color Systems FAQ

What is the difference between a palette and a color system?

A palette is a list of colors. A color system adds structure: scales for each color, named roles for where each shade is used, and tokens so code and design files share the same values.

Which token formats are supported?

W3C Design Tokens JSON, CSS custom properties, Tailwind v3 and v4 config, Style Dictionary input, and Figma variables JSON.

Related color tools