Hergestellt in 07/22/2025 16:56
Semantic React Design Tokens
- JSX Purple#937dc2
- Hook Green#4ade80
- Component Beige#fff3e2
- State Black#212121
- Render Sky#b2e0ff
- Theme Silver#ececec
Die Palette besteht aus Licht, Dunkel-Farben. Akzentfarben Component Beige #fff3e2 und Render Sky #b2e0ff. Palette hat Farbtemperatur Kalt, Neutral.
Nach Helligkeit reicht diese Palette von #212121 (dunkelstes) bis #FFF3E2 (hellstes). Die Helligkeitsspanne ist groß.
Die Sättigung ist gemischt — gedämpfte und lebhafte Farbfelder.
Manche Farbton-Paare liegen nahe Komplementärpositionen — kann wie Komplementärkontrast wirken (heuristisch).
In der Gesamttemperatur neigen die Felder zur kalten Seite.
HEX-Codes (sortiert): #212121, #4ADE80, #937DC2, #B2E0FF, #ECECEC, #FFF3E2
Die Palette Semantic React Design Tokens enthält eine Kombination aus 6-Codefarben:
VERHEXEN: #937dc2, RGB: (147, 125, 194); VERHEXEN: #4ade80, RGB: (74, 222, 128); VERHEXEN: #fff3e2, RGB: (255, 243, 226)
VERHEXEN: #212121, RGB: (33, 33, 33); VERHEXEN: #b2e0ff, RGB: (178, 224, 255); VERHEXEN: #ececec, RGB: (236, 236, 236)
Vereinfachte Version der Palettenfarben
Schatten von mediumpurple, Schatten von mediumspringgreen, Farbton von oldlace, Schatten von Schwarz, Schatten von lightskyblue, Farbton von whitesmoke
Farbschema wurde erstellt von colorday
Farbcodes in der Palette
Semantic React Design Tokens Farbcodes HEX, RGB-Informationen in der Tabelle
| Farbe | VERHEXEN | RGB | Name | alternativer Name |
| #937dc2 | #937dc2 | RGB(147, 125, 194) | JSX Purple | — |
| #4ade80 | #4ade80 | RGB(74, 222, 128) | Hook Green | — |
| #fff3e2 | #fff3e2 | RGB(255, 243, 226) | Component Beige | — |
| #212121 | #212121 | RGB(33, 33, 33) | State Black | Lead |
| #b2e0ff | #b2e0ff | RGB(178, 224, 255) | Render Sky | — |
| #ececec | #ececec | RGB(236, 236, 236) | Theme Silver | — |
Farbpalette Kontrast
6 Farbpaare haben einen niedrigen Kontrast und müssen verbessert werden, was die Lesbarkeit beeinträchtigen kann.
| Tekst kleur | Achtergrond kleur | contrast ratio |
#4ade80 | #fff3e2 | 1.59 |
#4ade80 | #b2e0ff | 1.24 |
#4ade80 | #ececec | 1.47 |
#fff3e2 | #b2e0ff | 1.27 |
#fff3e2 | #ececec | 1.07 |
#b2e0ff | #ececec | 1.18 |
Bildpalette Semantic React Design Tokens png
Palette exportieren
Laden Sie die "Semantic React Design Tokens" in mehreren Formaten herunter, um sie nahtlos in Ihre Designprojekte zu integrieren.
Verfügbare Formate: