Markenfarben-Token-Pack — HEX/HSL/OKLCH-Skala
Erstellen Sie ein Markenfarben-Token-Pack aus einer Basisfarbe im Browser. Schritte: Basis wählen (HEX oder Farbwähler), HEX/RGB/HSL/OKLCH ansehen, Skala 50–950 mit Schwarz/Weiß-Textpaaren pro Stufe erzeugen, dann CSS-Variablen oder JSON kopieren. Beim Öffnen lädt Beispielblau #2563eb — nichts wird hochgeladen.
So funktioniert es
Geben Sie eine Marken-Basisfarbe ein oder wählen Sie sie. Die Seite zeigt HEX, RGB, HSL und OKLCH, baut eine 11-stufige Skala (50–950) mit UI-Vorschau und empfiehlt pro Karte Schwarz- oder Weißtext mit Kontrastverhältnis. CSS-Variablen oder JSON kopieren, wenn die Rampe passt — alles lokal.
Regeln, die Sie kennen sollten
Was Sie von Skala, Farbräumen, Kontrast-Hinweisen und Datenschutz erwarten können.
- Stufe 500 ist Ihre Basis. Darunter wird durch Mischung mit Weiß aufgehellt; darüber durch Mischung mit Schwarz abgedunkelt (lineare sRGB-Mischung).
- Der Basis-Block listet HEX, RGB, HSL und OKLCH derselben Farbe. OKLCH nutzt sRGB → linear → OKLab für Vergleich mit moderner CSS-Syntax.
- Jede Karte empfiehlt Schwarz- oder Weißtext — je nachdem, was auf diesem Hintergrund mehr Kontrast bietet. Verhältnisse folgen WCAG-Relativhelligkeit; AA-Labels sind Hinweise.
- Datenschutz: Erzeugung, Vorschau und Kopieren laufen lokal in diesem Tab — Markenfarben werden nicht hochgeladen.
Beispiel
Beispiel laden (#2563EB). Der Farbraum-Block zeigt HEX, RGB, HSL und OKLCH der Basis; das Raster listet 50–950 mit empfohlenem Schwarz- oder Weißtext und Kontrastverhältnis. CSS kopieren liefert :root { --color-50: …; … --color-950: …; } für Ihr Stylesheet.
Gute Einsätze
- Design Systems: von einem Marken-HEX eine konsistente 50–950-Rampe plus CSS-Variablen für Komponenten.
- Dark Mode: helle Stufen (50–300) für Flächen, tiefe (700–950) für Text auf der Markenfarbe prüfen.
- Übergabe an Entwicklung: JSON-Tokens oder CSS Custom Properties statt HEX aus Screenshots abtippen.
Frequently asked questions
Verlässt meine Farbe den Browser?
Nein. Berechnung und Export laufen in diesem Tab — Ihre Farben gehen nicht an einen Server.
Wie entsteht die Skala 50–950?
Stufe 500 entspricht Ihrer Basisfarbe. Hellere Stufen (50–400) mischen Richtung Weiß; dunklere (600–950) Richtung Schwarz. Die Mischung ist linear in sRGB, damit der Farbton stabil bleibt.
Was bedeuten die Kontrastspalten?
Jede Farbkarte vergleicht Schwarz- und Weißtext auf diesem Hintergrund und wählt das höhere WCAG-Kontrastverhältnis. Labels zeigen das Verhältnis und ob Normaltext vermutlich AA (4,5:1) oder großer Text AA (3:1) erreicht.
Was enthalten CSS kopieren und JSON kopieren?
CSS kopieren gibt :root-Eigenschaften (--color-50 bis --color-950). JSON kopieren liefert dieselbe Skala plus Basis-Farbräume als strukturierte Daten für Design Tokens.
Wann den Kontrastchecker nutzen?
Das sind schnelle Schwarz/Weiß-Vorschläge pro Stufe. Für eigene Vorder-/Hintergrundpaare oder exakte WCAG-Stufen öffnen Sie den WCAG-Kontrastchecker und fügen den HEX einer Karte ein.
Related tools
Fragen oder Feedback
Unklar, kaputt oder etwas fehlt? Schreib unten eine Nachricht — wir lesen jede Notiz zu diesen Tools.