Anleitung
- Farbcode eingeben
Geben Sie einen Farbcode in einem beliebigen Format ein (HEX, RGB, HSL, CMYK).
- Farbe ansehen
Sehen Sie die Farbvorschau.
- Andere Formate kopieren
Kopieren Sie den Farbcode in jedem gewünschten Format.
Was ist die Farbcode-Umrechnung?
Die Farbcode-Umrechnung bedeutet, dieselbe Farbe in verschiedenen Notationssystemen wie HEX, RGB und HSL auszudrücken. Ein Bildschirm erzeugt Farben, indem er die Grundfarben des Lichts — Rot, Grün und Blau — mischt, sodass sich jede Farbe letztlich auf die Intensität dreier RGB-Kanäle zurückführen lässt. HEX komprimiert diese RGB-Werte zu einer sechsstelligen Hexadezimalzahl (#RRGGBB), während HSL sie so anordnet, wie Menschen Farbe wahrnehmen: über Farbtonwinkel, Sättigung und Helligkeit.
Warum die Umrechnung wichtig ist
- CSS schreiben — Übernehmen Sie den HEX-Code aus einem Design-Entwurf und wandeln Sie ihn in RGB um, was die Anpassung der Transparenz erleichtert.
- Farbkorrektur — Wenn Sie eine Farbe nur leicht abdunkeln möchten, müssen Sie nach der Umwandlung in HSL nur den L-Wert anpassen.
- Zusammenarbeit — Halten Sie den Figma-HEX der Designerin, die RGB-Variablen der Entwickler und die Farbvorgaben des Druckteams im Einklang.
Egal in welchem Format Sie eingeben — dieser Konverter berechnet alle anderen Formate auf einmal und zeigt die tatsächliche Farbe in einer Vorschau an.
Berechnungsformel
HEX → RGB teilt die Hexadezimalzahl in Zweiergruppen und liest jede als Dezimalzahl.
R = parseInt(hex[0:2], 16), G und B werden genauso berechnet. Beispiel: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).
RGB → HSL normalisiert die Kanäle zunächst auf den Bereich 0–1 und ermittelt dann die Helligkeit.
L = (max + min) / 2S = delta / (2 − max − min) (wenn L > 0,5)
dabei ist delta = max − min. Im obigen Beispiel ergeben max=1 und min=0,2 L = 0,6 (60%), S = 0,8/0,8 = 100% und einen Farbtonwinkel H ≈ 11°, was zu HSL(11°, 100%, 60%) umgewandelt wird.