Design System Component Guide
- Primary Indigo#6366f1
- Secondary Coral#fb7185
- Surface Cream#fff7ed
- Border Fog#f5f5f5
- Text Graphite#1f2937
- Interactive Yellow#fde047
- Muted Gray#cbd5e1
Erstellt am 06/28/2025 20:29
Die Palette besteht aus Hell, Dunkel-Farben. Akzentfarben Primary Indigo #6366f1 und Surface Cream #fff7ed. Palette hat Farbtemperatur Kalt, Warm, Neutral.
Nach Helligkeit reicht diese Palette von #1F2937 (dunkelstes) bis #FFF7ED (hellstes). Die Helligkeitsspanne ist groß.
Die Sättigung wirkt insgesamt lebhaft (höhere Chroma) — 57% der Farben sind lebhaft.
Einige Farben liegen sich auf dem Farbkreis etwa gegenüber und geben der Palette einen Komplementärkontrast.
In der Gesamttemperatur neigen die Felder zur kalten Seite (3 von 7).
HEX-Codes (sortiert): #1F2937, #6366F1, #CBD5E1, #F5F5F5, #FB7185, #FDE047, #FFF7ED
Die Palette Design System Component Guide kombiniert 7 Farbcodes:
HEX: #6366f1, RGB: (99, 102, 241); HEX: #fb7185, RGB: (251, 113, 133); HEX: #fff7ed, RGB: (255, 247, 237)
HEX: #f5f5f5, RGB: (245, 245, 245); HEX: #1f2937, RGB: (31, 41, 55); HEX: #fde047, RGB: (253, 224, 71)
HEX: #cbd5e1, RGB: (203, 213, 225)
Vereinfachte Version der Palettenfarben
Schattierung von Mittleres Schieferblau, Schattierung von Hellkoralle, Schattierung von Blütenweiß, Rauchweiß, Aufhellung von Schwarz, Aufhellung von Gold, Aufhellung von Hellgrau
Farbschema wurde erstellt von raccoon
Farbcodes in der Palette
Design System Component Guide Farbcodes HEX, RGB-Informationen in der Tabelle
| Farbe | HEX | RGB | Name | alternativer Name |
|---|---|---|---|---|
| #6366f1 | #6366f1 | RGB(99, 102, 241) | Primary Indigo | — |
| #fb7185 | #fb7185 | RGB(251, 113, 133) | Secondary Coral | — |
| #fff7ed | #fff7ed | RGB(255, 247, 237) | Surface Cream | Fatback |
| #f5f5f5 | #f5f5f5 | RGB(245, 245, 245) | Border Fog | Whitesmoke |
| #1f2937 | #1f2937 | RGB(31, 41, 55) | Text Graphite | — |
| #fde047 | #fde047 | RGB(253, 224, 71) | Interactive Yellow | — |
| #cbd5e1 | #cbd5e1 | RGB(203, 213, 225) | Muted Gray | — |
Farbpalette Kontrast
8 Farbpaare haben einen niedrigen Kontrast und müssen verbessert werden, was die Lesbarkeit beeinträchtigen kann.
| Textfarbe | Hintergrundfarbe | Kontrastverhältnis |
|---|---|---|
#6366f1 | #fb7185 | 1.65 |
#fb7185 | #cbd5e1 | 1.81 |
#fff7ed | #f5f5f5 | 1.02 |
#fff7ed | #fde047 | 1.24 |
#fff7ed | #cbd5e1 | 1.39 |
#f5f5f5 | #fde047 | 1.2 |
Bildpalette Design System Component Guide png
Palette exportieren
Laden Sie die "Design System Component Guide" in mehreren Formaten herunter, um sie nahtlos in Ihre Designprojekte zu integrieren.
Verfügbare Formate: