Drei Beschreibungen einer sRGB-Farbe
Eine sechsstellige HEX-Farbe verpackt Rot, Grün und Blau als Paare hexadezimaler Ziffern. RGB schreibt dieselben drei Kanäle in diesen Werkzeugen als Dezimalzahlen von 0 bis 255. HSL ordnet dieselbe sRGB-Farbe als Farbton, Sättigung und Helligkeit neu. Damit lässt sich über Farbfamilien nachdenken; die HSL-Helligkeit ist jedoch ein Parameter des Modells und kein unmittelbares Maß für wahrgenommene Helligkeit. HEX und RGB sind zwei Schreibweisen für Kanalwerte; HSL verlangt eine Rechnung. Alle drei können bei konsistenter Umrechnung dieselbe dargestellte Farbe beschreiben. Die MultiVerto-Werkzeuge hier behandeln deckende Farben in den gezeigten Eingabeformen, nicht jede CSS-Farbsyntax.
Ein gedämpftes Blau durchrechnen
Nehmen Sie #336699. Seine Paare 33, 66 und 99 in Hexadezimalform entsprechen dezimal 51, 102 und 153. Das HEX-zu-RGB-Werkzeug zeigt daher rgb(51, 102, 153). Als HSL ergibt sich in der gerundeten Werkzeugausgabe hsl(210, 50%, 40%). Der Farbton 210 Grad liegt im blauen Bereich; Sättigung und Helligkeit sind Koordinaten dieses Modells. Geben Sie #336699 unten ein und kopieren Sie das RGB-Ergebnis in das verlinkte RGB-zu-HSL-Werkzeug. Prüfen Sie den umgekehrten Weg mit HSL-zu-RGB und RGB-zu-HEX. Bei diesem einfachen Beispiel erscheinen wieder die ursprünglichen sechs Ziffern.
- HEX #336699 → Kanäle 33 66 99
- RGB rgb(51, 102, 153)
- HSL hsl(210, 50%, 40%)
Rückweg und Genauigkeit
HEX-Paare legen ganzzahlige Kanäle exakt fest. Eine HSL-Darstellung beliebiger RGB-Kanäle kann mehr Nachkommastellen benötigen als eine kurze Anzeige bietet. MultiVerto rundet sichtbare HSL-Werte auf zwei Dezimalstellen und den Rückweg zu RGB auf ganze Kanalzahlen. Häufig bleibt das Resultat visuell sehr ähnlich, doch ein Kanal kann sich um eins ändern. Bewahren Sie den ursprünglichen HEX- oder RGB-Token auf, wenn ein Designsystem einen exakten maschinenlesbaren Wert verlangt. Dreistelliges HEX verdoppelt jede Ziffer: #369 wird zu #336699, nicht zu drei Dezimalwerten. Die Beispielwerkzeuge nehmen keine Alpha-Transparenz an; dafür braucht es einen anderen Ablauf.
Umrechnung ist keine Kontrastprüfung
Dieselbe Zahlfarbe wirkt vor anderen Hintergründen und auf anderen Geräten verschieden. HSL-Helligkeit sagt nicht, ob schwarzer oder weißer Text einen Kontrastwert erfüllt. Dafür zählen zwei Farben und die Barrierefreiheitsformel, nicht der HSL-Prozentsatz einer einzigen Farbe. Testen Sie bei Text das wirkliche Paar aus Vordergrund und Hintergrund gegen das passende WCAG-Kriterium. Prüfen Sie auch Hover-, Fokus- und Deaktiviert-Zustände, die andere Farbkombinationen zeigen. Die Konverter helfen dabei, eine Schreibweise zwischen CSS, Designtoken und API zu übertragen; sie wählen keine barrierefreie Palette automatisch. Leiten Sie Lesbarkeit nicht aus einer einzelnen Ausgabe ab.
Ein Ablauf für Designtoken
Wählen Sie einen kanonischen Token wie #336699 und dokumentieren Sie seine Verwendungsorte. Wandeln Sie ihn in RGB um, wenn eine Schnittstelle Kanäle verlangt, oder in HSL, wenn Farbton und Sättigung gezielt angepasst werden sollen. Nach der HSL-Änderung speichern Sie den zurückgerechneten RGB- oder HEX-Wert als neuen Token, statt den alten unbemerkt zu überschreiben. Vergleichen Sie gerenderte Farbfelder im echten Layout und messen Sie den Kontrast mit den jeweiligen Nachbarfarben. Alpha- und Wide-Gamut-CSS-Farben gehören nicht in diesen einfachen Drei-Kanal-Vergleich, sofern das Ziel sie nicht ausdrücklich unterstützt. Eindeutige Ausgangswerte und geprüfte Varianten erleichtern spätere Änderungen.