Farbcode umwandeln

Ein Werkzeug, das einen Farbwert zwischen den gängigen Notationen HEX, RGB und HSL umwandelt, ohne dass sich die eigentliche Farbe verändert. Gedacht für Designerinnen und Entwickler, die eine Farbe aus einem Tool in ein anderes Format für CSS, ein Designsystem oder eine Präsentation übertragen müssen, ohne selbst zu rechnen.

Eine Farbe, fünf Sprachen

Eine einzige Markenfarbe muss oft noch am selben Tag in fünf Formaten vorliegen: HEX für das Stylesheet, CMYK für die Druckerei, LAB für einen Farbabgleich. Designsysteme, Druckereien und Webseiten sind mit jeweils eigener Farbsprache gewachsen, und die Umrechnung ist nicht intuitiv. Gerade der Weg von RGB nach LAB führt über einen Zwischenschritt und einen Referenzweißpunkt, den kaum jemand im Kopf hat. Statt die Formel zu suchen oder aus einem alten Blogeintrag zu kopieren, geben Sie die Farbe einmal ein und erhalten alle Schreibweisen.

Wofür jede Schreibweise da ist

HEX und RGB sind die Sprache des Webs, reichen aber anderswo nicht aus. CMYK ist das, was eine Druckerei tatsächlich aufs Papier bringt, und lässt sich nicht verlustfrei aus RGB ableiten. HSL nutzen Gestalter, um die Helligkeit eines Farbtons intuitiv zu verändern, und LAB gibt näherungsweise wieder, wie weit zwei Farben für das Auge auseinanderliegen. So dient dieselbe Umrechnung der Webentwicklung, der Druckvorstufe, Kontrastprüfungen und dem Farbteil eines Markenhandbuchs.

Wofür Entwickler und Designerinnen das brauchen

Ein Designsystem liefert Markenfarben oft nur als HEX, eine CSS-Regel mit einem transparenten Überlagerungseffekt braucht aber RGBA, und für eine konsistente Farbpalette mit gleichbleibender Helligkeit ist HSL die praktischere Notation, weil sich dort einzelne Helligkeitsstufen gezielt verschieben lassen. Statt jedes Mal von Hand umzurechnen, geben Sie den Wert einmal ein und übernehmen anschließend das jeweils passende Format direkt in Ihr Projekt.

Genauigkeit bei der Umwandlung

Zwischen HEX und RGB ist die Umwandlung verlustfrei, da beide Notationen dieselben Werte nur unterschiedlich darstellen, ohne dass dabei etwas gerundet werden muss. Bei der Umrechnung in und aus HSL wird intern mit Nachkommastellen gerechnet und für die Anzeige sinnvoll gerundet; ein minimaler Rundungsunterschied bei der anschließenden Rückumwandlung ist dadurch möglich, fällt in der Praxis aber selbst am Bildschirm nicht auf.