HEX zu RGB Umrechner
Geben Sie eine Farbe in HEX, RGB, HSL oder CMYK ein oder fügen Sie sie ein, die anderen Formate aktualisieren sich während der Eingabe. Kopieren Sie fertige CSS-Werte, sehen Sie hellere und dunklere Abstufungen und prüfen Sie den Kontrast zu Text.
Sie brauchen eine Oberfläche, die gut aussieht und sich gut lesen lässt?
Wir gestalten und entwickeln Websites und Apps mit einem durchgängigen Farbsystem: Markenpalette, barrierefreier Kontrast und Design-Tokens, die Design und Entwicklung gemeinsam nutzen. Beschreiben Sie Ihr Projekt und erhalten Sie eine Schätzung.
Vielen Dank! Wir melden uns innerhalb eines Werktags.
Kurz gesagt: Geben Sie eine Farbe in ein beliebiges Feld ein, zum Beispiel #2e5cf2, rgb(46, 92, 242), hsl(226, 88%, 56%) oder cmyk(81%, 62%, 0%, 5%), und der Umrechner füllt die anderen Formate sofort aus. Darunter finden Sie CSS-Werte einschließlich OKLCH, hellere und dunklere Abstufungen und eine Kontrastprüfung nach WCAG 2.2.
So rechnen Sie HEX in RGB um
- Farbe eingeben. Fügen Sie einen HEX-Code mit oder ohne „#“ ein: 3, 4, 6 oder 8 Stellen werden akzeptiert. Sie können auch mit RGB, HSL, CMYK oder dem Farbwähler beginnen.
- Ergebnis ablesen. Alle vier Felder aktualisieren sich während der Eingabe. Ungültige Eingaben werden markiert, die anderen Felder behalten die letzte gültige Farbe.
- Werte kopieren. Jedes Feld und jeder CSS-Wert hat eine Kopier-Schaltfläche. Die Seitenadresse enthält die Farbe, sodass Sie den Link teilen können.
- Lesbarkeit prüfen. Die Kontrastprüfung verwendet die aktuelle Farbe als Hintergrund. Legen Sie die Textfarbe fest und sehen Sie, ob das Paar AA und AAA erfüllt.
Wie die Umrechnung funktioniert
Ein HEX-Code ist dieselbe RGB-Farbe, nur im Sechzehnersystem geschrieben: Jedes Ziffernpaar ist ein Kanal von 00 bis FF, also 0 bis 255. #2E5CF2 bedeutet Rot 0x2E = 46, Grün 0x5C = 92, Blau 0xF2 = 242. Ein Kurzcode wie #3AF verdoppelt jede Ziffer und wird zu #33AAFF. Eine siebte und achte Stelle ergänzen den Alphakanal: #2E5CF280 ist dasselbe Blau mit 50 % Deckkraft.
| Format | Beispiel | Einsatzbereich |
|---|---|---|
| HEX | #2E5CF2 | CSS, Figma, Markenrichtlinien |
| RGB | rgb(46, 92, 242) | CSS, Android- und iOS-Code, Bildbearbeitung |
| HSL | hsl(226, 88%, 56%) | CSS-Themes: Helligkeit ändern, Farbton behalten |
| OKLCH | oklch(54.2% 0.23 265.7) | Moderne CSS-Farbskalen mit gleichmäßig wahrgenommener Helligkeit |
| CMYK | cmyk(81%, 62%, 0%, 5%) | Grober Richtwert für den Druck |
HSL beschreibt dieselbe Farbe als Farbton (0–360°), Sättigung und Helligkeit. Das ist praktisch, um hellere und dunklere Varianten einer Markenfarbe zu bilden. OKLCH leistet dasselbe in einem wahrnehmungsbasierten Farbraum, sodass gleiche Helligkeitsstufen für das Auge gleich wirken. Alle aktuellen Browser unterstützen es.
Hinweis zu CMYK
Der Umrechner nutzt die geräteunabhängige Standardformel: K = 1 − max(R, G, B), danach C, M und Y aus den übrigen Kanälen. Druckereien arbeiten mit ICC-Profilen für bestimmtes Papier und bestimmte Farben, ihre Werte können daher um einige Prozent abweichen. Nutzen Sie den CMYK-Wert als Ausgangspunkt und erfragen Sie den endgültigen Wert bei Ihrer Druckerei.
Kontrast und Barrierefreiheit
WCAG 2.2 verlangt ein Kontrastverhältnis von mindestens 4,5:1 für Fließtext sowie 3:1 für großen Text und für Bedienelemente wie Icons und Eingabefeldrahmen. Viele Blau- und Grüntöne von Marken liegen mit weißem Text genau an der Grenze. Eine vollständige Palette aus einem Foto oder Logo erstellen Sie mit dem Farbpaletten-Generator. Wenn Ihr Produkt ein durchgängiges Farbsystem braucht, sehen Sie sich unsere Leistungen für Webdesign und Webentwicklung an.
Häufige Fragen
Wie rechne ich HEX in RGB um?
Teilen Sie den sechsstelligen Code in drei Paare und rechnen Sie jedes Paar von hexadezimal in dezimal um. Bei #2E5CF2 ergibt das 2E = 46, 5C = 92 und F2 = 242, die Farbe ist also rgb(46, 92, 242). Der Umrechner auf dieser Seite erledigt das sofort während der Eingabe.
Wie rechne ich RGB in HEX um?
Wandeln Sie jeden Kanal von 0–255 in eine zweistellige Hexadezimalzahl um und hängen Sie sie nach „#“ aneinander. Bei rgb(255, 165, 0) ergibt das FF, A5 und 00, der HEX-Code lautet also #FFA500. Geben Sie den RGB-Wert in das RGB-Feld ein und kopieren Sie den HEX-Code.
Was ist ein HEX-Code mit 8 Stellen?
Die letzten beiden Stellen sind der Alphakanal, von 00 (vollständig transparent) bis FF (vollständig deckend). #2E5CF280 ist die Farbe #2E5CF2 mit etwa 50 % Deckkraft. Alle modernen Browser unterstützen 8- und 4-stellige HEX-Codes in CSS.
Ist HSL für CSS besser als RGB?
Beide beschreiben dieselben Farben. HSL ist leichter zu lesen und von Hand anzupassen: Um eine Farbe aufzuhellen, ändern Sie nur die Helligkeit. Für Farbskalen und Themes ist OKLCH noch besser, weil gleiche Stufen für das Auge gleich wirken.
Warum weichen meine CMYK-Werte von denen der Druckerei ab?
Diese Seite nutzt die Standardformel ohne Farbprofil. Druckereien rechnen mit ICC-Profilen für ihr Papier und ihre Farben um, und manche Bildschirmfarben, besonders kräftige Blau- und Grüntöne, lassen sich nicht exakt drucken. Betrachten Sie den CMYK-Wert als Richtwert.
Kann ich eine Farbe per Link teilen?
Ja. Wenn Sie die Farbe ändern, erhält die Seitenadresse den HEX-Code nach „#“, zum Beispiel /de/products/hex-to-rgb#2e5cf2. Wer den Link öffnet, sieht dieselbe Farbe.
Wie prüfe ich, ob Text auf dieser Farbe lesbar ist?
Nutzen Sie die Kontrastprüfung unter dem Umrechner. Die aktuelle Farbe ist als Hintergrund gesetzt; wählen Sie die Textfarbe und sehen Sie das Verhältnis und ob es WCAG AA (4,5:1) und AAA (7:1) erfüllt.