Mathe & Alltag

HEX in RGB umrechnen

Farbwert eingeben – der Rechner liefert HEX, RGB und HSL sowie die Helligkeit und eine Empfehlung für die Textfarbe.

Ergebnis

Ergebnis
—
HEX—
RGB—
HSL—
Relative Helligkeit—
Empfohlene Textfarbe darauf—
Der Kontrastwert folgt der WCAG-Formel. Für normalen Fließtext gilt 4,5:1 als Mindestanforderung der Stufe AA, für großen Text ab 18 Punkt genügen 3:1.

So funktioniert die Umrechnung

HEX und RGB beschreiben dieselbe Farbe in unterschiedlicher Schreibweise. Beide zerlegen sie in die drei Grundkanäle Rot, Grün und Blau mit je 256 Abstufungen von 0 bis 255. Der Unterschied liegt nur im Zahlensystem: RGB schreibt die Werte dezimal, HEX hexadezimal mit je zwei Stellen pro Kanal.

Die Rechnung im Detail

Hexadezimal zählt mit sechzehn Ziffern: 0 bis 9, dann A bis F für die Werte 10 bis 15. Zwei Stellen decken damit 16 × 16 = 256 Werte ab – exakt der Umfang eines Farbkanals. Der Wert „1E" bedeutet 1 × 16 + 14 = 30, „3A" ergibt 3 × 16 + 10 = 58, und „5F" steht für 5 × 16 + 15 = 95. Aus #1E3A5F wird damit rgb(30, 58, 95). Umgekehrt teilt man den Dezimalwert durch 16: Der ganzzahlige Anteil ist die erste Ziffer, der Rest die zweite.

Kurzschreibweise und Transparenz

Wiederholt sich jede Ziffer paarweise, lässt sich der Code auf drei Stellen kürzen: #FFCC00 wird zu #FC0. Das funktioniert nur bei genau diesem Muster – #FFC800 lässt sich nicht kürzen. Seit CSS Color Level 4 gibt es zusätzlich acht- und vierstellige Varianten, bei denen die letzten Stellen die Deckkraft angeben: #1E3A5F80 ist dieselbe Farbe mit 50 Prozent Transparenz.

Warum HSL oft praktischer ist

HSL beschreibt eine Farbe über Farbton, Sättigung und Helligkeit statt über drei Kanäle. Das entspricht der menschlichen Wahrnehmung besser: Um eine Farbe abzudunkeln, senkt man in HSL schlicht den Helligkeitswert, während man in RGB alle drei Kanäle proportional anpassen müsste. Für abgestufte Farbpaletten ist HSL deshalb das bequemere Werkzeug – der Rechner gibt den Wert direkt mit aus.

Warum RGB additiv ist

Bildschirme mischen Farben additiv: Alle drei Kanäle auf Maximum ergeben Weiß, alle auf null Schwarz. Das ist genau umgekehrt zum Druck, wo mit Cyan, Magenta und Gelb subtraktiv gemischt wird und die Summe aller Farben theoretisch Schwarz ergibt. Deshalb lassen sich RGB-Werte nicht verlustfrei in CMYK übertragen – leuchtende Bildschirmfarben wie ein sattes Reinblau liegen außerhalb dessen, was Druckfarben erzeugen können. Wer Gestaltung für beide Medien plant, sollte Farben früh im Zielfarbraum prüfen statt am Ende umzurechnen.

Kontrast und Barrierefreiheit

Die angezeigte relative Helligkeit folgt der Formel der Web Content Accessibility Guidelines und gewichtet die Kanäle unterschiedlich: Grün trägt mit 71,5 Prozent am stärksten bei, Rot mit 21,3 und Blau nur mit 7,2 Prozent. Das entspricht der Empfindlichkeit des menschlichen Auges. Aus dieser Leuchtdichte berechnet sich das Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe. Für normalen Fließtext verlangt Stufe AA mindestens 4,5:1, für großen Text ab 18 Punkt genügen 3:1, und Stufe AAA fordert 7:1. Der Rechner empfiehlt deshalb direkt, ob weiße oder schwarze Schrift auf der gewählten Farbe besser lesbar ist. Verwandte Werkzeuge sind der Prozent-Bruch-Umrechner und der Römische-Zahlen-Umrechner, der ebenfalls mit einem anderen Zahlensystem arbeitet.

Häufige Fragen

Wie rechne ich HEX in RGB um?
Je zwei Stellen bilden einen Kanal. Die erste Ziffer wird mit 16 multipliziert und die zweite addiert, wobei A bis F für 10 bis 15 stehen. „1E“ ergibt 1 × 16 + 14 = 30.
Was bedeutet die dreistellige Schreibweise?
Sie ist eine Abkürzung, bei der jede Ziffer verdoppelt wird: #FC0 entspricht #FFCC00. Das funktioniert nur, wenn sich in allen drei Kanälen die Ziffern paarweise wiederholen.
Was steht am Ende eines achtstelligen HEX-Codes?
Die Deckkraft. #1E3A5F80 ist dieselbe Farbe mit rund 50 Prozent Transparenz – die letzten beiden Stellen laufen wie die Farbkanäle von 00 für vollständig transparent bis FF für vollständig deckend.
Warum ist HSL manchmal praktischer als RGB?
Weil es Farbton, Sättigung und Helligkeit trennt. Zum Abdunkeln senkt man nur den Helligkeitswert, während in RGB alle drei Kanäle angepasst werden müssten. Für abgestufte Paletten ist das deutlich einfacher.
Welcher Kontrast ist für Text nötig?
Nach WCAG Stufe AA mindestens 4,5:1 für normalen Fließtext und 3:1 für großen Text ab 18 Punkt. Stufe AAA verlangt 7:1. Der Rechner nennt den Wert für weiße und schwarze Schrift direkt.
Warum wird Grün stärker gewichtet als Blau?
Weil das menschliche Auge für Grün am empfindlichsten ist. In der WCAG-Formel trägt Grün 71,5 Prozent zur wahrgenommenen Helligkeit bei, Rot 21,3 und Blau nur 7,2 Prozent.