Frontend Semantic Design Kit
- Classname Orange#ffa552
- Markup Mist#f5f5f4
- Variable Plum#c77dff
- Cascade Blue#669bbc
- Viewport Vanilla#fffceb
- Syntax Black#212121
Erstellt am 07/06/2025 08:40
Die Palette besteht aus Hell, Dunkel-Farben. Akzentfarben Variable Plum #c77dff und Viewport Vanilla #fffceb. Palette hat Farbtemperatur Warm, Neutral, Kalt.
Nach Helligkeit reicht diese Palette von #212121 (dunkelstes) bis #FFFCEB (hellstes). Die Helligkeitsspanne ist groß.
Die Sättigung ist gemischt — 2 gedämpfte und 3 lebhafte von 6 Farben.
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 (2 von 6).
HEX-Codes (sortiert): #212121, #669BBC, #C77DFF, #F5F5F4, #FFA552, #FFFCEB
Die Palette Frontend Semantic Design Kit kombiniert 6 Farbcodes:
HEX: #ffa552, RGB: (255, 165, 82); HEX: #f5f5f4, RGB: (245, 245, 244); HEX: #c77dff, RGB: (199, 125, 255)
HEX: #669bbc, RGB: (102, 155, 188); HEX: #fffceb, RGB: (255, 252, 235); HEX: #212121, RGB: (33, 33, 33)
Vereinfachte Version der Palettenfarben
Aufhellung von Sandbraun, Schattierung von Rauchweiß, Schattierung von Violett, Schattierung von Kornblumenblau, Schattierung von Elfenbein, Aufhellung von Schwarz
Farbschema wurde erstellt von bad_colors
Farbcodes in der Palette
Frontend Semantic Design Kit Farbcodes HEX, RGB-Informationen in der Tabelle
| Farbe | HEX | RGB | Name | alternativer Name |
|---|---|---|---|---|
| #ffa552 | #ffa552 | RGB(255, 165, 82) | Classname Orange | — |
| #f5f5f4 | #f5f5f4 | RGB(245, 245, 244) | Markup Mist | — |
| #c77dff | #c77dff | RGB(199, 125, 255) | Variable Plum | — |
| #669bbc | #669bbc | RGB(102, 155, 188) | Cascade Blue | — |
| #fffceb | #fffceb | RGB(255, 252, 235) | Viewport Vanilla | — |
| #212121 | #212121 | RGB(33, 33, 33) | Syntax Black | Lead |
Farbpalette Kontrast
6 Farbpaare haben einen niedrigen Kontrast und müssen verbessert werden, was die Lesbarkeit beeinträchtigen kann.
| Textfarbe | Hintergrundfarbe | Kontrastverhältnis |
|---|---|---|
#ffa552 | #f5f5f4 | 1.78 |
#ffa552 | #c77dff | 1.37 |
#ffa552 | #669bbc | 1.54 |
#ffa552 | #fffceb | 1.89 |
#f5f5f4 | #fffceb | 1.05 |
#c77dff | #669bbc | 1.11 |
Bildpalette Frontend Semantic Design Kit png
Palette exportieren
Laden Sie die "Frontend Semantic Design Kit" in mehreren Formaten herunter, um sie nahtlos in Ihre Designprojekte zu integrieren.
Verfügbare Formate: