Kostenloses Werkzeug · Stand August 2026
HEX zu RGB umrechnen – mit Kontrastprüfung nach WCAG
Farbcode eingeben, alle Schreibweisen zum Kopieren erhalten – und dazu die Zahl, die im Webdesign wirklich zählt: ob Text auf dieser Farbe lesbar bleibt.
Drei-, sechs- und achtstellige HEX-Werte funktionieren, mit oder ohne Raute. Acht Stellen enthalten den Alphakanal.
Formate
- HEX
- RGB
- RGBA
- HSL
- CSS-Variable
Lesbarkeit nach WCAG
| Weißer Textnormale Größe / groß ab 18,7 pt | 6.70 : 1AA / AAA |
|---|---|
| Schwarzer Textnormale Größe / groß ab 18,7 pt | 3.13 : 1zu wenig / AA |
Auf dieser Farbe ist Weiß die bessere Textfarbe (6.70 : 1). WCAG verlangt für normalen Text mindestens 4,5 : 1, für großen Text 3 : 1.
Nichts verlässt deinen Browser. Umrechnung und Kontrastprüfung laufen auf deinem Gerät. Die Kontrastwerte folgen der Formel für relative Leuchtdichte aus WCAG 2.1.
Ein HEX-Farbcode wird in RGB umgerechnet, indem die drei Zweiergruppen einzeln aus dem Hexadezimalsystem übersetzt werden: #463BEF ergibt rgb(70, 59, 239), weil 46 dezimal 70 ist, 3B gleich 59 und EF gleich 239. Jeder Kanal reicht von 0 bis 255.
Das Wichtigste in Kürze
- HEX kennt drei Schreibweisen: #RGB mit verdoppelten Ziffern, #RRGGBB und #RRGGBBAA mit Alphakanal.
- Jeder der drei Kanäle läuft von 00 bis FF im Hexadezimalsystem, also von 0 bis 255 dezimal.
- HSL beschreibt dieselbe Farbe über Farbton, Sättigung und Helligkeit – praktisch, wenn man eine Farbe abstufen will.
- WCAG verlangt für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1, für großen Text 3 zu 1.
- Für die höchste Stufe AAA sind 7 zu 1 nötig, bei großem Text 4,5 zu 1.
- Der Kontrast hängt nicht von der Helligkeit im Farbwähler ab, sondern von der relativen Leuchtdichte – Gelb wirkt hell, hat gegen Weiß aber kaum Kontrast.
Stand der Angaben: 27. August 2026 · geprüft von Advertal, offizieller ActiveCampaign-Partner seit 2017
200+ Unternehmen im Advertal Partner-Netzwerk · offizieller ActiveCampaign-Partner · seit 2017 auf eine Plattform spezialisiert
So funktioniert die Umrechnung von Hand
Ein HEX-Code ist nichts anderes als drei Zahlen im Hexadezimalsystem, hintereinandergeschrieben. Das System kennt sechzehn Ziffern: 0 bis 9 und danach A bis F für die Werte 10 bis 15.
Jede Zweiergruppe steht für einen Farbkanal. Die erste Stelle zählt Sechzehnerschritte, die zweite Einerschritte. Aus 46 wird also 4 mal 16 plus 6, das sind 70. Aus 3B wird 3 mal 16 plus 11, also 59. Und aus EF wird 14 mal 16 plus 15, das sind 239.
Bei der dreistelligen Kurzform wird jede Ziffer verdoppelt: #F0A entspricht #FF00AA. Das ist keine Näherung, sondern in CSS ausdrücklich so festgelegt.
Die Schreibweisen im Vergleich
Alle vier beschreiben dieselbe Farbe. Welche du nimmst, hängt davon ab, was du damit vorhast.
| Schreibweise | Beispiel | Wofür sie sich eignet |
|---|---|---|
| HEX | #463BEF | Der Standard in Design-Programmen und Styleguides. |
| RGB | rgb(70, 59, 239) | Wenn einzelne Kanäle berechnet oder animiert werden. |
| RGBA | rgba(70, 59, 239, 0.5) | Sobald Transparenz ins Spiel kommt. |
| HSL | hsl(244, 86%, 58%) | Zum Abstufen: Helligkeit ändern, Farbton beibehalten. |
Schreibweisen nach W3C CSS Color Level 4. Moderne Browser verstehen auch die Kurzform ohne Kommas, etwa rgb(70 59 239 / 50%).
Warum der Kontrastwert wichtiger ist als der Farbeindruck
Ob Text auf einer Farbe lesbar ist, lässt sich nicht am Bildschirm entscheiden. Ein sattes Gelb wirkt hell und freundlich – weißer Text darauf ist trotzdem praktisch unlesbar, weil das Kontrastverhältnis unter 1,5 zu 1 liegt.
WCAG rechnet deshalb mit der relativen Leuchtdichte, die den drei Kanälen unterschiedliches Gewicht gibt: Grün zählt mit rund 72 Prozent, Rot mit 21 und Blau mit nur 7. Das entspricht der Empfindlichkeit des menschlichen Auges. Aus den Leuchtdichten zweier Farben ergibt sich das Kontrastverhältnis, das zwischen 1 zu 1 und 21 zu 1 liegt.
Die Schwellen sind: 4,5 zu 1 für normalen Text, 3 zu 1 für großen Text ab 18,7 Punkt oder 14 Punkt fett. Für die Stufe AAA gelten 7 zu 1 beziehungsweise 4,5 zu 1. Der Umrechner oben zeigt beide Werte für weißen und schwarzen Text und sagt, welcher besser passt.
Der Unterschied, den kaum jemand kennt
Gleicher Preis, gleicher Funktionsumfang – plus deutschsprachiger Ansprechpartner
ActiveCampaign kostet über das Advertal Partner-Netzwerk exakt so viel wie im Direktbezug. Du startest deinen Account über uns oder verknüpfst deinen bestehenden; Preis und Funktionsumfang bleiben unverändert. Dazu bekommst du einen persönlichen Ansprechpartner auf Deutsch – ohne Aufschlag, ohne zusätzliche Vertragsbindung. Der offizielle Support von ActiveCampaign bleibt dir daneben erhalten.
Häufige Fragen
Wie rechne ich einen HEX-Farbcode in RGB um?
Teile den Code in drei Zweiergruppen und übersetze jede aus dem Hexadezimalsystem. Bei #463BEF ergibt 46 den Wert 70, 3B den Wert 59 und EF den Wert 239 – also rgb(70, 59, 239). Jede Stelle zählt dabei Sechzehnerschritte, die zweite Einerschritte, mit A bis F für 10 bis 15.
Was bedeutet das Doppelkreuz vor dem Farbcode?
Es kennzeichnet den Wert als hexadezimal. In CSS ist es Pflicht, in vielen Design-Programmen wird es automatisch ergänzt. Beim Kopieren aus fremden Quellen fehlt es manchmal – dieser Umrechner nimmt den Code mit und ohne Doppelkreuz entgegen.
Was ist der Unterschied zwischen dreistelligem und sechsstelligem HEX?
Die dreistellige Form ist eine Abkürzung, bei der jede Ziffer verdoppelt wird: #F0A steht für #FF00AA. Sie kann deshalb nur 4.096 Farben darstellen, die sechsstellige dagegen 16,7 Millionen. Für exakte Markenfarben ist die lange Form nötig.
Was ist RGBA und wie füge ich Transparenz hinzu?
RGBA ergänzt die drei Farbkanäle um einen Alphawert zwischen 0 und 1 – 0 ist vollständig durchsichtig, 1 vollständig deckend. In HEX geht das über acht Stellen: #463BEF80 entspricht rgba(70, 59, 239, 0.5). Der Umrechner gibt beide Schreibweisen aus.
Welcher Mindestkontrast ist laut WCAG erforderlich?
Für normalen Text 4,5 zu 1, für großen Text ab 18,7 Punkt oder 14 Punkt fett genügen 3 zu 1. Die strengere Stufe AAA verlangt 7 zu 1 beziehungsweise 4,5 zu 1. Gemessen wird zwischen Textfarbe und Hintergrund, nicht gegen Weiß.
Warum erscheint meine Farbe anders als erwartet?
Meist liegt es am Farbprofil. Bildschirme geben sRGB unterschiedlich wieder, und Designprogramme arbeiten oft in einem anderen Farbraum. Ein HEX-Wert beschreibt immer sRGB – dieselbe Zahl kann auf zwei Geräten sichtbar verschieden aussehen. Für den Druck kommt hinzu, dass CMYK einen kleineren Farbraum abdeckt.
Werden meine Farbcodes an einen Server übertragen?
Nein. Umrechnung und Kontrastberechnung laufen vollständig in deinem Browser. Es gibt keinen Server-Aufruf, nichts wird gespeichert. Die Seite funktioniert auch ohne Internetverbindung weiter, sobald sie geladen ist.
Geprüft von
Tom Wenk, Gründer und Geschäftsführer von Advertal
Tom Wenk arbeitet seit 2017 ausschließlich mit ActiveCampaign. Mit Advertal betreut er heute über 200 Unternehmen im deutschsprachigen Raum, sitzt im ActiveCampaign Customer Advisory Board und im Partner Advisory Subcommittee und hat über 280 kostenlose Tutorials zur Plattform veröffentlicht. Die Angaben auf dieser Seite stammen aus dieser Praxis und aus Quellen, die wir am 27. August 2026 selbst geprüft haben.
Markenfarben, die überall funktionieren?
Wir richten E-Mail-Vorlagen und Landingpages so ein, dass Farben in jedem Programm und auf jedem Gerät wirken – und dabei lesbar bleiben. Zwanzig Minuten, unverbindlich, auf Deutsch.
Jetzt kennenlernenAuch spannend: die ActiveCampaign Agentur, der kostenlose Kurs und unsere Fallstudien.