Fourteen design-system palettes, parsed from their official files — Tailwind, Material, Bootstrap, Ant Design, Radix, Fluent and more. Open a system to see every shade, copy exact values, and jump into the matching tool.
14design systems
1,915color values
100%official sources
Design systems
14
Material Design tones
89 colors
Material Web v0.192 · md-ref-paletteOpen palette
Tailwind CSS palette
286 colors
Tailwind CSS v4 · theme.cssOpen palette
UnoCSS palette
264 colors
UnoCSS preset-mini · Tailwind v3 + WindiOpen palette
Panda CSS tokens
242 colors
Panda CSS · @pandacss/preset-pandaOpen palette
Vanilla Extract theme
3 colors
vanilla-extract · createTheme docs exampleOpen palette
StyleX tokens
6 colors
StyleX · defineVars docs exampleOpen palette
Bootstrap colors
29 colors
Bootstrap v5.3.8 · _variables.scssOpen palette
Ant Design colors
130 colors
Ant Design · @ant-design/colors 7.2.1Open palette
Open Color
130 colors
Open Color 1.9.1 · open-color.jsOpen palette
Chakra UI colors
100 colors
Chakra UI · @chakra-ui/theme 3.4.1Open palette
Radix Colors
360 colors
Radix Colors 3.0.0 · light scalesOpen palette
Fluent UI brand
64 colors
Fluent UI · @fluentui/tokens brandColorsOpen palette
Primer colors
20 colors
Primer · @primer/primitives 11.10.0 lightOpen palette
Polaris colors
192 colors
Shopify Polaris · polaris-tokens 9.4.2Open palette
At a glance
Every palette below is parsed from the package its maintainers publish; nothing is approximated or generated.
| System | Colors | Structure | Official source |
|---|---|---|---|
| Material Design tones | 89 | 6 families × 13 shades | Material Web v0.192 · md-ref-palette |
| Tailwind CSS palette | 286 | 26 families × 11 shades | Tailwind CSS v4 · theme.css |
| UnoCSS palette | 264 | 24 families × 11 shades | UnoCSS preset-mini · Tailwind v3 + Windi |
| Panda CSS tokens | 242 | 22 families × 11 shades | Panda CSS · @pandacss/preset-panda |
| Vanilla Extract theme | 3 | 3 semantic tokens | vanilla-extract · createTheme docs example |
| StyleX tokens | 6 | 6 semantic tokens | StyleX · defineVars docs example |
| Bootstrap colors | 29 | 29 semantic tokens | Bootstrap v5.3.8 · _variables.scss |
| Ant Design colors | 130 | 13 families × 10 shades | Ant Design · @ant-design/colors 7.2.1 |
| Open Color | 130 | 13 families × 10 shades | Open Color 1.9.1 · open-color.js |
| Chakra UI colors | 100 | 10 families × 10 shades | Chakra UI · @chakra-ui/theme 3.4.1 |
| Radix Colors | 360 | 30 families × 12 shades | Radix Colors 3.0.0 · light scales |
| Fluent UI brand | 64 | 4 families × 16 shades | Fluent UI · @fluentui/tokens brandColors |
| Primer colors | 20 | 20 semantic tokens | Primer · @primer/primitives 11.10.0 light |
| Polaris colors | 192 | 12 families × 16 shades | Shopify Polaris · polaris-tokens 9.4.2 |
How to use these palettes
1
Match your codebase
Pick the palette your product already uses so the tokens line up with the CSS variables you ship.
2
Copy the exact value
Every swatch opens a color page with HEX, RGB, HSL, OKLCH and a contrast check.
3
Verify contrast
Send any two colors to the contrast tool before committing to a text and background pair.
Frequently asked questions
Where do these color values come from?
Each palette is parsed from the package the design system publishes — theme.css for Tailwind, the packaged token files for Material, Bootstrap, Ant Design and the rest. No value is estimated.
Why do some systems list families and others tokens?
Scale-based systems such as Tailwind ship 11 shades per color family; token-based systems such as Primer ship named semantic values. Each page shows the structure the system actually uses.
Can I use these palettes commercially?
The palettes are published by their projects under permissive licenses (mostly MIT or Apache-2.0). Check the license of the system you use before shipping.
Do I need an account or API key?
No. Every value is readable on the page, and the same data is available through the free API.