Verwandeln Sie Hex-Farben in CSS-Variablen
Geben Sie in jede Zeile einen Namen und einen Hexadezimalwert ein, wählen Sie ein Präfix und speichern Sie die CSS-Datei. Die Standardpalette besteht aus Variablen wie --brand-ink und --brand-accent sowie gepaarten --brand-ink-text-Werten, die durch den gemessenen Kontrast ausgewählt werden. Die JSON- und CSV-Ansichten behalten dieselben kanonischen Namen und Nummern für andere Systeme bei.
Benutzerdefinierte CSS-Eigenschaften
Eine Farbvariable und eine vorgeschlagene Textfarbvariable pro Token innerhalb eines :root-Blocks.
Strukturierte Palette JSON
Namen, kanonische Hex- und RGB-Werte, relative Luminanz, vorgeschlagener schwarzer oder weißer Text und sein Kontrastverhältnis.
Jede Palettenfarbe
| ink | #1f2937 | 31, 41, 55 | 0,02 | #ffffff | 14,68 |
| paper | #f8fafc | 248, 250, 252 | 0,95 | #000000 | 20,07 |
| accent | #ea980e | 234, 152, 14 | 0,4 | #000000 | 9 |
| success | #16803a | 22, 128, 58 | 0,16 | #ffffff | 5,02 |
Die Ergebnisse werden ohne Gewähr für ihre Richtigkeit bereitgestellt. Die Methode und ihre Quellen stehen unten, damit Sie den Rechenweg prüfen können.
Dreistellige Hexadezimalwerte werden vor dem Export erweitert, sodass jeder CSS- und JSON-Eintrag eine kanonische sechsstellige Schreibweise aufweist.
Namen werden zu Kebab-Token in Kleinbuchstaben, und Kollisionen erhalten numerische Suffixe, anstatt stillschweigend eine frühere Farbe zu überschreiben.
Beim Textfarbbegleiter handelt es sich um eine maßvolle Auswahl zwischen Schwarz und Weiß, nicht um eine Schätzung basierend auf dem durchschnittlichen RGB-Kanal.
So funktioniert es
So wird es gemacht
- Analysieren Sie einen Namen plus eine undurchsichtige drei- oder sechsstellige Hexadezimalfarbe pro nicht leerer Zeile und erweitern Sie die Kurzschrift auf kanonische sechsstellige RGB-Kleinbuchstaben.
- Normalisieren Sie Namen und Präfixe auf ASCII-Kebab-Kleinbuchstaben und fügen Sie die Suffixe -2, -3 und höher hinzu, anstatt doppelte Token zu überschreiben.
- Linearisieren Sie jeden codierten sRGB-Kanal, kombinieren Sie die relative Luminanz mit den WCAG-Gewichten und vergleichen Sie den resultierenden Kontrast mit Schwarz und Weiß.
- Exportieren Sie eine benutzerdefinierte Farb- und Textvorschlagseigenschaft pro Token in CSS und mit denselben Werten, Kanälen, derselben Luminanz und demselben Verhältnis wie strukturiertes JSON.
Wovon es ausgeht
- Jede eingegebene Farbe ist deckend. Alpha-Farben werden abgelehnt, da ihr angezeigter Kontrast von einer nicht genannten Oberfläche darunter abhängt.
- Die gemeldete Textauswahl dient lediglich dem Vergleich
- Ein höheres gemessenes Verhältnis allein macht eine vollständige Komponente nicht zugänglich; Schriftgröße, Gewicht, Status, Fokus, Nicht-Text-Hinweise und tatsächlich wiedergegebene Farben sind weiterhin wichtig.
- Hexadezimalwerte werden als sRGB interpretiert und den exportierten Tokens ist kein ICC-Profil oder Wide-Gamut-Farbraum zugeordnet.
Fragen
Was passiert mit Leerzeichen in Farbnamen?
Leerzeichen und Satzzeichen werden zu Bindestrichen, Akzente werden nach Möglichkeit entfernt und führende oder nachgestellte Trennzeichen verschwinden, bevor die CSS-Variable geschrieben wird.
Warum hat jede Farbe eine zweite Textvariable?
Dieser Begleiter speichert Schwarz oder Weiß, das im Vergleich zum Farbfeld das höhere WCAG-Kontrastverhältnis erzeugt, wodurch die sicherere Paarung wiederverwendbar wird.
Quellen
Die vollständige Methode, das Rechenbeispiel und alle Annahmen hinter diesem Ergebnis stehen auf Farbpalettendatei-Ersteller.