Wie Sie HEX-Farbcodes in RGB konvertieren

HEX und RGB sind zwei Möglichkeiten, exakt dieselben Farben zu schreiben. Designer und Entwickler wechseln ständig zwischen ihnen: HEX in CSS-Stylesheets, RGB in JavaScript-Animationen, HSL in Design-Tools. Zu verstehen, wie sie zusammenhängen, macht die Arbeit mit Farben viel einfacher. Ein Konverter übernimmt die mentale Arithmetik, sodass Sie sich darauf konzentrieren können, die richtige Farbe zu bekommen, nicht auf Base-16-Division.

Wie HEX-Farben funktionieren

Ein HEX-Farbcode wie #FF5733 ist eine 6-stellige hexadezimale Zahl, die die Rot-, Grün- und Blau-Kanäle darstellt:

Jeder Kanal reicht von 00 (0, keine Farbe) bis FF (255, volle Intensität). Also bedeutet #FF5733 volles Rot, etwas Grün, ein wenig Blau, was Ihnen ein warmes Orangerot gibt.

So konvertieren Sie HEX in RGB

1. Geben Sie Ihren HEX-Code ein: Tippen oder fügen Sie einen Farbcode wie #FF5733 ein oder verwenden Sie den Farbwähler.
2. Sehen Sie die RGB-Werte: Sehen Sie die entsprechenden Rot-, Grün- und Blau-Werte (jeweils 0-255).
3. In beliebigem Format kopieren: Holen Sie die Werte als rgb(255, 87, 51), einzelne Kanäle oder andere Formate wie HSL.

Eine kurze Geschichte der Farbcodes im Web

Farbe in frühen Webbrowsern (Mosaic 1993, Netscape 1994) verwendete nur benannte Farben: red, blue, green. Die HTML 3.2-Spezifikation (1997) führte hexadezimale Farbcodes über das BGCOLOR-Attribut ein, und CSS 1 (1996) machte sie universell. Die Wahl von HEX gegenüber Dezimal war praktisch: Ein 6-Zeichen-HEX-Code ist kürzer als rgb(255, 87, 51) und einfacher von einem Farbwähler zu kopieren-einzufügen.

Das RGB-Farbmodell selbst ist viel älter. James Clerk Maxwell demonstrierte 1861, dass jede für das menschliche Auge sichtbare Farbe durch Mischen von rotem, grünem und blauem Licht erzeugt werden kann. Fernsehen (1930er Jahre) und Computermonitore (1970er Jahre) verwendeten dieses Prinzip direkt: Jedes Pixel ist drei Subpixel (eins rot, eins grün, eins blau) in unterschiedlichen Helligkeiten.

Modernes CSS (ab 2010) fügte viele weitere Farbformate hinzu: hsl() (Farbton, Sättigung, Helligkeit), hwb() (Farbton, Weiße, Schwärze), lab() (perzeptuell einheitlich), lch(), oklab(), oklch() und color() für beliebige Farbräume. Alle stellen dieselben Farben wie HEX/RGB dar, aber mit unterschiedlichen mentalen Modellen. HEX bleibt bestehen, weil es dicht, kopierbar und einfach zu teilen ist.

Manuelle Konvertierung: So machen Sie es im Kopf

Sie benötigen kein Werkzeug, um einfache HEX-Werte zu konvertieren. Der Trick besteht darin, die Potenzen von 16 zu kennen:

• 0 = 0
• 5 = 5
• A = 10
• F = 15
• 10 (hex) = 16
• FF (hex) = 255

Für ein HEX-Paar wie 5A: die erste Ziffer mal 16 plus die zweite Ziffer. 5A = 5 × 16 + 10 = 90.

Für Abkürzungen:

• 00 = 0
• 33 = 51 (ein häufiger 20%-Grauschritt)
• 66 = 102
• 99 = 153
• CC = 204
• FF = 255

Die Paare 33, 66, 99, CC (in beliebiger Kombination) erzeugen die klassische «websichere» 216-Farben-Palette der 1990er Jahre. Sie erscheinen auch heute noch ständig in Moodboards von Designern.

Häufige Farbcodes

HEX mit Alpha (8-stelliges HEX)

CSS 4 (2017) führte 8-stelliges HEX mit einem Alpha-Kanal ein. #FF5733CC ist rgb(255, 87, 51) mit 80% Deckkraft (CC in Hex = 204, geteilt durch 255 = 0,80).

Die Browserunterstützung ist in modernen Browsern universell (Chrome 62+, Firefox 49+, Safari 9.1+, Edge 79+). Für neue Projekte ist 8-stelliges HEX eine saubere Alternative zu rgba(). Für ältere Projekte bleiben Sie bei rgba() für die Rückwärtskompatibilität.

Ein kurzes 4-stelliges HEX existiert ebenfalls: #F80C ist dasselbe wie #FF8800CC. Gleiche Abkürzungsregeln wie 3-stelliges HEX.

Anwendungsfälle für jedes Format

Verwenden Sie HEX, wenn:

• Sie CSS-Farbwerte in Stylesheets schreiben
• Sie eine einzelne Farbe mit Designern oder in Dokumentation teilen
• Sie Farben kompakt in JSON- oder Datendateien speichern
• Sie mit Markenpaletten arbeiten (Unternehmen spezifizieren Markenfarben normalerweise als HEX)

Verwenden Sie RGB, wenn:

• Animation von Farben in JavaScript (Kanäle als Zahlen parsen, interpolieren, neu formatieren)
• Berechnung von Farbkontrastverhältnissen (WCAG-Formeln arbeiten mit RGB)
• Sie partielle Transparenz mit rgba() für ältere Browser benötigen
• Sie Farbe aus Canvas- oder Bilddaten lesen (die Canvas-API gibt RGB zurück)

Verwenden Sie HSL, wenn:

• Generieren einer Farbtonpalette (Sättigung und Helligkeit halten, Farbton variieren)
• Erstellen von Dunkelmodus-Varianten (Farbton halten, Helligkeit erhöhen)
• Farbtheoriearbeit durchführen (komplementäre Farben sind 180° im Farbton voneinander entfernt)

Verwenden Sie OKLCH, wenn:

• Ihnen die perzeptuelle Einheitlichkeit wichtig ist (Interpolation in OKLCH vermeidet die «schlammige Mitte», die Sie in RGB erhalten)
• Aufbau eines Farbsystems von Grund auf in Projekten von 2024+

Häufige Fallstricke

• Vergessen des #-Präfixes: CSS erfordert das Hash. color: FF5733 ist ungültig; color: #FF5733 ist korrekt.
• Mischen von Groß- und Kleinschreibung: #FF5733 und #ff5733 sind dieselbe Farbe, aber stilistisch inkonsistent. Wählen Sie eines (die meisten Codes bevorzugen Kleinbuchstaben für HEX) und bleiben Sie dabei.
• Verwechslung von HEX mit Hexadezimal im Allgemeinen: Hex-Farbcodes sind immer 3, 4, 6 oder 8 Ziffern. Andere Längen (5, 7) sind ungültig. Programme können stillschweigend kürzen oder auffüllen.
• Falsche Byte-Reihenfolge in 8-stelligem HEX: Einige Bibliotheken verwenden ARGB (#CCFF5733, Alpha zuerst) anstelle von RGBA (#FF5733CC, Alpha zuletzt). CSS verwendet RGBA. Adobe und einige Android-APIs verwenden ARGB.
• Annahme, dass RGB sRGB ist: Die meisten HEX/RGB-Farben befinden sich im sRGB-Farbraum. P3-Displays (Apple-Geräte seit 2016) können breitere Farben anzeigen, aber Standard-HEX kann sie nicht beschreiben. Verwenden Sie color(display-p3 ...) dafür.
• Farbrundung bei Hin- und Herkonvertierung: HEX-zu-RGB-zu-HEX ist verlustfrei. HEX-zu-HSL-zu-HEX kann aufgrund von Gleitkommamathematik 1-2 Genauigkeitsstufen verlieren.

Tipps

• Verwenden Sie HEX in CSS: color: #FF5733 ist sauberer und häufiger als color: rgb(255, 87, 51) in Stylesheets.
• Verwenden Sie RGB für Transparenz: Wenn Sie halbtransparente Farben benötigen, verwenden Sie rgba(255, 87, 51, 0.5). Es gibt keine Möglichkeit, Alpha in Standard-HEX hinzuzufügen (obwohl 8-stelliges HEX existiert, variiert die Browserunterstützung).
• 3-stellige Abkürzung: #F00 ist dasselbe wie #FF0000. Verwenden Sie es, wenn jedes Paar identische Ziffern hat, um Platz zu sparen.
• Farbwähler ist schneller: Wenn Sie versuchen, die richtige Farbe zu finden, verwenden Sie den visuellen Farbwähler, anstatt HEX-Werte zu erraten. Kopieren Sie den Code, sobald Sie mit dem Ergebnis zufrieden sind.
• Speichern Sie Markenfarben als CSS-benutzerdefinierte Eigenschaften: --brand-primary: #FF5733 ermöglicht es Ihnen, den Wert einmal zu ändern und überall zu aktualisieren. Einfacher als HEX-Codes in Dateien zu suchen und zu ersetzen.
• Überprüfen Sie den Kontrast nach der Auswahl: Eine schöne Farbe ist nutzlos, wenn der Text darauf unlesbar ist. Kombinieren Sie diesen Konverter mit einem Kontrastprüfer, um WCAG AA (4.5:1) oder AAA (7:1) Verhältnisse zu überprüfen.

Datenschutz

Der HEX-zu-RGB-Konverter läuft vollständig in Ihrem Browser. Die Farben, die Sie eingeben, Ihre benutzerdefinierten Paletten und alle gespeicherten Werte bleiben auf Ihrem Gerät. Dies ist weniger wichtig als für Dateikonvertierungstools (ein Farbcode ist nicht persönlich sensibel), aber es ist wichtig aus Gründen der Design-Vertraulichkeit: Die Farben, mit denen Sie experimentieren, können unangekündigte Markenrichtungen, Kundenarbeit unter NDA oder Produktdesign in der Entwicklung preisgeben. Browser-only-Berechnung hat null Exposition.