Marken-Hex-Farbe für Code in RGB umrechnen

Markenleitfäden liefern Farben ganz überwiegend als Hex — etwa #1A73E8 — weil es kompakt ist und in Design-Tools und CSS de facto Standard ist. Doch viel Code nimmt Hex nicht direkt entgegen: Canvas-2D-Zeichencode, WebGL-Shader-Uniforms, native Mobile-Farbkonstruktoren (UIColor, Androids Color-Klasse bei manchen Konstruktoren) und diverse Chart- oder Datenvisualisierungsbibliotheken erwarten stattdessen drei getrennte numerische Kanäle. Vom Hex-Farbmuster der Marke zu diesen Zahlen umzurechnen ist eine exakte, verlustfreie Basisumrechnung — keine Näherung.

Die Umrechnung, Schritt für Schritt

Eine 6-stellige Hex-Farbe besteht aus drei aneinandergereihten hexadezimalen (Basis 16) Byte-Paaren: erst Rot, dann Grün, dann Blau, jedes von 00 bis FF (0 bis 255 dezimal). Für #1A73E8:

Das ergibt rgb(26, 115, 232). Jedes Paar wird unabhängig umgerechnet — es gibt keine kanalübergreifende Rechnung, daher ist die Umrechnung in beide Richtungen exakt und ohne Rundungsfehler umkehrbar, anders als etwa die Umrechnung von RGB in HSL, die Fließkomma-Berechnungen im Stil von Trigonometrie einbezieht, die bei Hin- und Rückrechnung winzige Rundungsdifferenzen einführen können.

Wo die Zahlen im echten Code auftauchen

Sobald Sie die drei Kanalwerte haben, hängt die genaue Syntax von der Plattform ab: CSS und die meisten Web-APIs akzeptieren rgb(26, 115, 232) direkt; manche Shader- und Grafik-APIs wollen jeden Kanal auf einen 0-1-Float normiert (jeweils durch 255 teilen: 0,102, 0,451, 0,910); native Mobile-Frameworks haben oft eine eigene Konstruktor-Signatur (UIColor(red: 26/255, green: 115/255, blue: 232/255, alpha: 1) unter iOS zum Beispiel). Die Kanalwerte selbst ändern sich dabei nicht — nur die Formatierung und Normierung, die die jeweilige API erwartet.

Markenfarben über Formate hinweg konsistent halten

Der sicherste Workflow ist, den Hex-Wert im Markenleitfaden als einzige Quelle der Wahrheit zu behandeln und jede andere Darstellung (RGB, normierte Floats, HSL für ein Design-Tool) programmatisch oder mit einem Umrechner daraus abzuleiten, statt für jedes Format separate Konstanten von Hand einzutippen, die im Laufe der Zeit auseinanderdriften können. Falls Ihr Code auch einen druckfertigen CMYK-Wert für dieselbe Markenfarbe braucht, beginnen Sie beim selben Hex-Wert und rechnen Sie von dort aus um — schätzen Sie CMYK niemals nach Augenmaß gegen die Bildschirmfarbe ab.