Quatorze palettes de design system, analysées depuis leurs fichiers officiels — Tailwind, Material, Bootstrap, Ant Design, Radix, Fluent et d’autres. Ouvrez un système pour voir toutes les nuances, copier les valeurs exactes et passer à l’outil correspondant.
14design systems
1,915color values
100%official sources
Design systems
14
Tons Material Design
89 couleurs
Material Web v0.192 · md-ref-paletteOuvrir la palette
Palette Tailwind CSS
286 couleurs
Tailwind CSS v4 · theme.cssOuvrir la palette
Palette UnoCSS
264 couleurs
UnoCSS preset-mini · Tailwind v3 + WindiOuvrir la palette
Jetons Panda CSS
242 couleurs
Panda CSS · @pandacss/preset-pandaOuvrir la palette
Thème Vanilla Extract
3 couleurs
vanilla-extract · createTheme docs exampleOuvrir la palette
Jetons StyleX
6 couleurs
StyleX · defineVars docs exampleOuvrir la palette
Palette Bootstrap
29 couleurs
Bootstrap v5.3.8 · _variables.scssOuvrir la palette
Palette Ant Design
130 couleurs
Ant Design · @ant-design/colors 7.2.1Ouvrir la palette
Open Color
130 couleurs
Open Color 1.9.1 · open-color.jsOuvrir la palette
Palette Chakra UI
100 couleurs
Chakra UI · @chakra-ui/theme 3.4.1Ouvrir la palette
Radix Colors
360 couleurs
Radix Colors 3.0.0 · light scalesOuvrir la palette
Couleurs Fluent UI
64 couleurs
Fluent UI · @fluentui/tokens brandColorsOuvrir la palette
Palette Primer
20 couleurs
Primer · @primer/primitives 11.10.0 lightOuvrir la palette
Palette Polaris
192 couleurs
Shopify Polaris · polaris-tokens 9.4.2Ouvrir la palette
En un coup d’œil
Chaque palette ci-dessous provient du paquet officiel publié par ses mainteneurs ; aucune valeur n’est estimée ni générée.
| Système | Couleurs | Structure | Source officielle |
|---|---|---|---|
| Tons Material Design | 89 | 6 familles × 13 nuances | Material Web v0.192 · md-ref-palette |
| Palette Tailwind CSS | 286 | 26 familles × 11 nuances | Tailwind CSS v4 · theme.css |
| Palette UnoCSS | 264 | 24 familles × 11 nuances | UnoCSS preset-mini · Tailwind v3 + Windi |
| Jetons Panda CSS | 242 | 22 familles × 11 nuances | Panda CSS · @pandacss/preset-panda |
| Thème Vanilla Extract | 3 | 3 semantic tokens | vanilla-extract · createTheme docs example |
| Jetons StyleX | 6 | 6 semantic tokens | StyleX · defineVars docs example |
| Palette Bootstrap | 29 | 29 semantic tokens | Bootstrap v5.3.8 · _variables.scss |
| Palette Ant Design | 130 | 13 familles × 10 nuances | Ant Design · @ant-design/colors 7.2.1 |
| Open Color | 130 | 13 familles × 10 nuances | Open Color 1.9.1 · open-color.js |
| Palette Chakra UI | 100 | 10 familles × 10 nuances | Chakra UI · @chakra-ui/theme 3.4.1 |
| Radix Colors | 360 | 30 familles × 12 nuances | Radix Colors 3.0.0 · light scales |
| Couleurs Fluent UI | 64 | 4 familles × 16 nuances | Fluent UI · @fluentui/tokens brandColors |
| Palette Primer | 20 | 20 semantic tokens | Primer · @primer/primitives 11.10.0 light |
| Palette Polaris | 192 | 12 familles × 16 nuances | Shopify Polaris · polaris-tokens 9.4.2 |
Comment utiliser ces palettes
1
S’aligner sur votre code
Choisissez la palette déjà utilisée par votre produit pour que les tokens correspondent à vos variables CSS.
2
Copier la valeur exacte
Chaque pastille ouvre une page couleur avec HEX, RGB, HSL, OKLCH et le contrôle de contraste.
3
Vérifier le contraste
Passez deux couleurs au vérificateur de contraste avant de figer texte et fond.
Questions fréquentes
D’où viennent ces valeurs ?
Chaque palette est analysée depuis le paquet publié par le design system — theme.css pour Tailwind, les fichiers de tokens pour Material, Bootstrap, Ant Design, etc. Aucune valeur n’est estimée.
Pourquoi certaines listent des familles, d’autres des tokens ?
Les systèmes à échelle comme Tailwind proposent 11 nuances par famille ; les systèmes à tokens comme Primer proposent des noms sémantiques. Chaque page affiche la structure réelle.
Puis-je les utiliser commercialement ?
Ces palettes sont publiées sous licences permissives (surtout MIT ou Apache-2.0). Vérifiez la licence du système utilisé.
Faut-il un compte ou une clé API ?
Non. Toutes les valeurs sont lisibles sur la page, et les mêmes données sont disponibles via l’API gratuite.