HEX zu RGB Konverter
Eine Hex-Farbe besteht aus drei Ziffernpaaren, eines je Kanal: Trennen Sie sie und rechnen Sie jedes Paar von Basis 16 in Basis 10 um. FF5733 wird zu rgb(255, 87, 51), denn FF ist 255, 57 ist 87 und 33 ist 51. Der Rechner zeigt zusätzlich hsl(11, 100%, 60%) und die CSS-Variable --color: #FF5733; und arbeitet in beide Richtungen.
Farbformate
Kontrast-Prüfer
Komplementärfarbe
Über HEX zu RGB Konverter
Dieser Rechner liest eine Farbe in einer Schreibweise und gibt sie in vier aus. Tippen Sie sechs Hexadezimalziffern in das Feld HEX-Farbe, und die Kacheln R, G und B aktualisieren sich beim Tippen; wechseln Sie zu den RGB-Feldern und ändern Sie einen Kanal, wird die Hex-Zeichenkette neu gebildet; wechseln Sie zu HSL, steuern Farbton, Sättigung und Helligkeit die beiden anderen. Nichts muss bestätigt werden, und das Feld Farbformate bietet für jede der vier Zeichenketten eine Kopierschaltfläche: #FF5733, rgb(255, 87, 51), hsl(11, 100%, 60%) und --color: #FF5733;.
Gerechnet wird eine Basisumwandlung, keine Näherung. Jeder Kanal ist ein Byte in zwei Hexziffern, läuft also von 00 bis FF, dezimal von 0 bis 255. FF5733 zerfällt in FF = 255, 57 = 87 und 33 = 51. Die Werte werden begrenzt: Ein RGB-Kanal über 255 oder unter 0 wird zurückgeholt, und eine Hex-Zeichenkette mit weniger als sechs Zeichen wird mit Nullen aufgefüllt statt abgelehnt, sodass auch ein halb getippter Code schon eine Farbe ergibt.
Zwei Felder gehen über die Umrechnung hinaus. Die Kontrastprüfung berechnet das Verhältnis der aktuellen Farbe zu Weiß und zu Schwarz und nennt die WCAG-Note: FF5733 erreicht 3.15:1 bei weißem Text, also nur AA Large, und 6.66:1 bei schwarzem Text, also AA. Das Feld Komplementärfarbe liefert den gegenüberliegenden Farbton — #00A8CC für FF5733, #FF00FF für reines Grün.
Was er nicht tut: Er fasst CMYK nie an, denn diese Umrechnung hängt von einem Farb- und Papierprofil ab, das eine Webseite nicht kennen kann, und er verarbeitet nur deckende Farben; RGBA und achtstellige Hex-Codes bleiben außen vor. Alles läuft in Ihrem Browser.
Anwendungsfälle
Anleitung
Tippen oder fügen Sie sechs Hexadezimalziffern in das Feld HEX-Farbe ein. Das Rautezeichen ist optional, kürzere Eingaben werden mit Nullen aufgefüllt.
Lesen Sie die Kacheln R, G und B, die sich beim Tippen aktualisieren, und das Farbfeld, das die Farbe selbst zeigt.
Für die Gegenrichtung wechseln Sie zu den RGB-Feldern und setzen R, G und B von 0 bis 255; darunter wird die Hex-Zeichenkette neu gebildet.
Nutzen Sie die HSL-Felder — Farbton 0 bis 360, Sättigung und Helligkeit 0 bis 100 —, wenn Sie eine Farbe verschieben statt ersetzen wollen.
Öffnen Sie das Feld Farbformate und drücken Sie die Kopierschaltfläche der gewünschten Zeile: HEX, RGB, HSL oder die CSS-Variable.
Prüfen Sie im Kontrastfeld das Verhältnis zu Weiß und Schwarz samt WCAG-Note und im Komplementärfeld den gegenüberliegenden Farbton.
Profi-Tipps
- Das Hex-Feld nimmt sechs Zeichen und füllt kürzere Eingaben mit Nullen auf, statt sie abzulehnen: Aus FF wird FF0000 und damit Rot. Tippen Sie alle sechs Ziffern, bevor Sie ablesen.
- Das führende Rautezeichen ist optional. Das Feld entfernt es, und das Feld Farbformate setzt es in der HEX-Zeile wieder davor — #FF5733 und FF5733 ergeben dasselbe.
- Die RGB-Felder begrenzen ohne Hinweis: Tippen Sie 300 in R, steht dort beim Anwenden 255. Wirkt ein Kanal falsch, prüfen Sie, ob er überhaupt zwischen 0 und 255 lag.
- Lesen Sie beide Kontrastwerte, nicht nur einen. Eine Farbe kann gegen Schwarz bestehen und gegen Weiß durchfallen, wie FF5733 mit 6.66:1 und 3.15:1 — welcher zählt, entscheidet die Schrift darauf.
- Die Zeile CSS-Variable ist fertig für einen :root-Block. Kopieren Sie sie, benennen Sie --color sinnvoll um, und derselbe Wert speist jede Regel, die darauf verweist.
Fehlerbehebung
Ein kurzer Hex-Code zeigt die falsche Farbe.
Das Feld füllt alles unter sechs Zeichen mit Nullen auf, statt zu warten: F00 wird als F00000 gelesen, nicht als dreistellige Kurzform für Rot. Tippen Sie alle sechs Ziffern — FF0000 — und die Kacheln zeigen 255, 0, 0.
Ein eingetippter RGB-Wert hat sich von selbst geändert.
Jeder Kanal wird beim Anwenden auf 0-255 begrenzt, denn mehr fasst ein Byte nicht. Aus 300 wird 255, aus einem negativen Wert 0. Prüfen Sie die gemeinte Zahl, und beachten Sie: Prozentwerte nimmt dieses Feld nicht — dafür sind die HSL-Felder da.
Ich brauche CMYK-Werte und finde sie nicht.
Dieser Rechner erzeugt kein CMYK, und kein Browserwerkzeug kann das verlässlich: Die Umrechnung hängt von Farbsatz, Papier und Farbprofil Ihrer Druckerei ab. Nehmen Sie den Hex- oder RGB-Wert von hier in Ihr Grafikprogramm mit und rechnen Sie ihn dort gegen das richtige Profil um.
Häufig gestellte Fragen
Teilen Sie die sechs Ziffern in drei Paare und lesen Sie jedes Paar als Zahl zur Basis 16. FF5733 ergibt FF = 255, 57 = 87 und 33 = 51, also rgb(255, 87, 51). Tippen Sie den Code in das Feld HEX-Farbe, und die drei Kanalkacheln zeigen diese Zahlen sofort, mit kopierbarer rgb()-Zeichenkette im Formatfeld.
rgb(0, 255, 0), reines Grün: Rot- und Blaupaar sind 00, das Grünpaar ist FF, das Maximum eines Bytes. In HSL heißt dieselbe Farbe hsl(120, 100%, 50%). Ihr Kontrast zu Schwarz beträgt 15.30:1, ein klares WCAG-AAA, während weißer Text darauf nur 1.37:1 erreicht.
Es ist rgb(255, 0, 0), reines Rot, denn FF ist 255 und jedes 00 ist null. Das Werkzeug liefert außerdem hsl(0, 100%, 50%) und die CSS-Variablenzeile. Der Kontrast liegt bei 4.00:1 zu Weiß und 5.25:1 zu Schwarz — weißer Text auf Rot erreicht also nur AA für große Schrift.
Ein mittleres Grau: rgb(153, 153, 153), denn 99 hexadezimal ist 153 und alle drei Kanäle sind gleich. Gleiche Kanäle bedeuten immer einen Neutralton, daher hsl(0, 0%, 60%) ohne Sättigung. Gegen weißen Text fällt es mit 2.85:1 durch, gegen Schwarz erreicht es AAA mit 7.37:1.
Beide beschreiben dieselben drei Kanäle, nur anders geschrieben: Hex nutzt zwei Ziffern zur Basis 16 je Kanal, RGB eine Dezimalzahl von 0 bis 255. Keine der beiden Schreibweisen trägt Zusatzinformation, deshalb kann dieser Rechner exakt und ganz ohne Rundung zwischen ihnen wechseln.
Für eine deckende Farbe sind sie gleichwertig, und Hex ist kürzer, weshalb Stylesheets meist Hex verwenden. Nehmen Sie rgb(), wenn Sie einen Wert aus einzelnen Kanälen zusammensetzen, und denken Sie daran, dass CSS in beiden Schreibweisen auch einen Alphakanal kennt. HSL ist die bessere Wahl, um hellere oder dunklere Varianten eines Farbtons abzuleiten.
R sind die ersten beiden Ziffern zur Basis 16, G die mittleren beiden, B die letzten beiden. In JavaScript ist das parseInt(hex.slice(0,2), 16) und so weiter; in Python int(hex[0:2], 16). Zurück geht jeder Kanal über toString(16) und wird auf zwei Stellen aufgefüllt.
In Python: tuple(int(h[i:i+2], 16) for i in (0, 2, 4)) mit h als sechsstelliger Zeichenkette. In JavaScript: [0, 2, 4].map(i => parseInt(hex.substr(i, 2), 16)). Beide liefern genau die drei Zahlen dieser Seite, denn die Umwandlung ist exakt und rundet nirgends.
Nein, und misstrauen Sie jedem Webwerkzeug, das es behauptet. RGB ist Licht, CMYK ist Farbe auf Papier; die Zuordnung hängt von Druckmaschine, Papier und Farbprofil ab. Holen Sie sich hier exaktes RGB oder HSL und überlassen Sie CMYK Ihrem Grafikprogramm mit dem Profil, mit dem Sie wirklich drucken.
In diesem Rechner nicht: Er arbeitet mit sechsstelligem Hex und deckendem RGB. Für Transparenz nehmen Sie die gelieferte rgb()-Zeichenkette und ergänzen den Alphawert selbst, etwa rgba(255, 87, 51, 0.5), oder hängen zwei Hexziffern für einen achtstelligen Code an. Die Kanalwerte bleiben gleich.