Vierzehn Designsystem-Paletten, aus den offiziellen Dateien geparst — Tailwind, Material, Bootstrap, Ant Design, Radix, Fluent und weitere. Ein System öffnen, alle Stufen sehen, exakte Werte kopieren und ins passende Werkzeug springen.
14design systems
1,915color values
100%official sources
Designsysteme
14
Material-Design-Töne
89 Farben
Material Web v0.192 · md-ref-palettePalette öffnen
Tailwind-CSS-Palette
286 Farben
Tailwind CSS v4 · theme.cssPalette öffnen
UnoCSS-Palette
264 Farben
UnoCSS preset-mini · Tailwind v3 + WindiPalette öffnen
Panda-CSS-Tokens
242 Farben
Panda CSS · @pandacss/preset-pandaPalette öffnen
Vanilla-Extract-Theme
3 Farben
vanilla-extract · createTheme docs examplePalette öffnen
StyleX-Tokens
6 Farben
StyleX · defineVars docs examplePalette öffnen
Bootstrap-Palette
29 Farben
Bootstrap v5.3.8 · _variables.scssPalette öffnen
Ant-Design-Palette
130 Farben
Ant Design · @ant-design/colors 7.2.1Palette öffnen
Open Color
130 Farben
Open Color 1.9.1 · open-color.jsPalette öffnen
Chakra-UI-Palette
100 Farben
Chakra UI · @chakra-ui/theme 3.4.1Palette öffnen
Radix Colors
360 Farben
Radix Colors 3.0.0 · light scalesPalette öffnen
Fluent-UI-Farben
64 Farben
Fluent UI · @fluentui/tokens brandColorsPalette öffnen
Primer-Palette
20 Farben
Primer · @primer/primitives 11.10.0 lightPalette öffnen
Polaris-Palette
192 Farben
Shopify Polaris · polaris-tokens 9.4.2Palette öffnen
Auf einen Blick
Jede Palette unten stammt aus dem offiziellen Paket der Maintainer; nichts ist geschätzt oder erzeugt.
| System | Farben | Struktur | Offizielle Quelle |
|---|---|---|---|
| Material-Design-Töne | 89 | 6 Familien × 13 Stufen | Material Web v0.192 · md-ref-palette |
| Tailwind-CSS-Palette | 286 | 26 Familien × 11 Stufen | Tailwind CSS v4 · theme.css |
| UnoCSS-Palette | 264 | 24 Familien × 11 Stufen | UnoCSS preset-mini · Tailwind v3 + Windi |
| Panda-CSS-Tokens | 242 | 22 Familien × 11 Stufen | 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-Palette | 29 | 29 semantic tokens | Bootstrap v5.3.8 · _variables.scss |
| Ant-Design-Palette | 130 | 13 Familien × 10 Stufen | Ant Design · @ant-design/colors 7.2.1 |
| Open Color | 130 | 13 Familien × 10 Stufen | Open Color 1.9.1 · open-color.js |
| Chakra-UI-Palette | 100 | 10 Familien × 10 Stufen | Chakra UI · @chakra-ui/theme 3.4.1 |
| Radix Colors | 360 | 30 Familien × 12 Stufen | Radix Colors 3.0.0 · light scales |
| Fluent-UI-Farben | 64 | 4 Familien × 16 Stufen | Fluent UI · @fluentui/tokens brandColors |
| Primer-Palette | 20 | 20 semantic tokens | Primer · @primer/primitives 11.10.0 light |
| Polaris-Palette | 192 | 12 Familien × 16 Stufen | Shopify Polaris · polaris-tokens 9.4.2 |
So nutzt du die Paletten
1
Zur eigenen Codebasis passen
Wähle die Palette, die dein Produkt bereits nutzt, damit die Tokens zu deinen CSS-Variablen passen.
2
Exakten Wert kopieren
Jedes Feld öffnet eine Farbseite mit HEX, RGB, HSL, OKLCH und Kontrastprüfung.
3
Kontrast prüfen
Schicke zwei Farben durch das Kontrastwerkzeug, bevor du Text und Hintergrund festlegst.
Häufige Fragen
Woher stammen die Farbwerte?
Jede Palette stammt aus dem Paket des Designsystems — theme.css bei Tailwind, die Token-Dateien von Material, Bootstrap, Ant Design und anderen. Kein Wert ist geschätzt.
Warum haben manche Systeme Familien, andere Tokens?
Skalenbasierte Systeme wie Tailwind liefern 11 Stufen je Farbfamilie; tokenbasierte Systeme wie Primer liefern semantische Namen. Jede Seite zeigt die echte Struktur.
Kann ich die Paletten kommerziell nutzen?
Die Paletten werden von ihren Projekten unter freizügigen Lizenzen veröffentlicht (meist MIT oder Apache-2.0). Prüfe die Lizenz deines Systems.
Brauche ich ein Konto oder einen API-Key?
Nein. Jeder Wert ist auf der Seite lesbar, dieselben Daten gibt es über die kostenlose API.