RGB in Hex umrechnen (und Hex in RGB) — Kostenlos, Keine Anmeldung
Geben Sie einen RGB-Wert oder einen Hex-Farbcode ein und erhalten Sie sofort die Umrechnung in die andere Richtung. Funktioniert sowohl RGB-zu-Hex als auch Hex-zu-RGB, fertig zum Einfügen in Ihr CSS oder Design-Tool — kostenlos, keine Anmeldung nötig.
Dezimal (Basis 10)
| R | |
|---|---|
| G | |
| B |
Hexadezimal (Basis 16)
| # |
|---|
Wie RGB und Hex-Farbcodes zusammenhängen
Eine Farbe auf dem Bildschirm entsteht daraus, wie stark drei Lichter – Rot, Grün und Blau – gemischt werden. Drückt man die Stärke jedes einzelnen als Zahl von 0 bis 255 aus, erhält man das RGB-Format; schreibt man dieselben Werte je zweistellig hexadezimal und reiht sie aneinander, erhält man den Hex-Farbcode #RRGGBB. Beide sind also schlicht verschiedene Schreibweisen derselben Farbe, und dieses Werkzeug rechnet zwischen ihnen um.
Zwei Schreibweisen gibt es, weil sie zu verschiedenen Aufgaben passen. Hex drückt eine Farbe in sechs Zeichen aus, was die Übergabe zwischen CSS und Gestaltungswerkzeugen bequem macht. RGB zeigt dagegen jede Komponente als sichtbare Zahl, was Anpassungen wie «das Rot etwas anheben» deutlich erleichtert. Beide Formate werden angezeigt, damit Sie jeweils das nutzen können, das zur anstehenden Aufgabe passt.
So verwenden Sie den Farbcode-Umrechner
- Umzurechnenden Wert eingeben Tragen Sie R-, G- und B-Werte in die Dezimalfelder ein oder einen Farbcode in das Hex-Feld. Die Umrechnung funktioniert aus beiden Richtungen.
- Das andere Format ablesen Der entsprechende Wert erscheint beim Tippen, bereit zum direkten Kopieren in CSS oder ein Gestaltungswerkzeug.
- Werte anpassen und Farben ausprobieren Das Erhöhen und Senken der Zahlen auf der Dezimalseite macht die Farbänderung gut nachvollziehbar, sodass Sie sich dem gewünschten Ton annähern können.
Tipps für die Nutzung
- In CSS können Farben sowohl im Format
#RRGGBBals auch alsrgb(R, G, B)angegeben werden. - Jeder Kanal — R (Rot), G (Grün), B (Blau) — hat einen Wertebereich von 0 bis 255 (00 bis FF in Hexadezimal).
- Weiß ist
#FFFFFF(255, 255, 255), Schwarz ist#000000(0, 0, 0). - Design-Tools wie Figma und Adobe XD unterstützen beide Formate, sodass Werte direkt kopiert werden können.
- Die Kurzschreibweise
#FFFentspricht#FFFFFF(Weiß) und ist gültiges CSS.
Wann die Farbcode-Umrechnung nützlich ist
Eine Farbe von der Gestaltung an den Code übergeben
Rechnen Sie eine Farbe, die Ihr Gestaltungswerkzeug in RGB anzeigt, in das von CSS erwartete Hex-Format um und vermeiden Sie Fehler beim Umrechnen von Hand.
Eine Markenfarbe genau wiedergeben
Erreicht Sie eine vorgegebene Farbe nur in einem der Formate, rechnen Sie sie in das andere um und halten alles einheitlich. Das verhindert, dass Farben zwischen Dokument und Web auseinanderlaufen.
Eine Farbe schrittweise anpassen
Anpassungen, die sich in Hex schwer abschätzen lassen, werden mit RGB-Zahlen intuitiv – gut geeignet zum Feinabgleich von Helligkeit oder Farbton.
Die Farbwelt einer bestehenden Seite erkunden
Rechnen Sie einen in den Entwicklerwerkzeugen aufgelesenen Farbcode um, und Sie sehen die Stärke jeder Komponente als Zahl.
Begriffe rund um Farbcodes
- RGB
- Ein Verfahren, das Farbe über die Stärke von rotem, grünem und blauem Licht ausdrückt. Jede nimmt einen Wert von 0 bis 255 an; alle drei auf 255 ergibt Weiß.
- Hexadezimal
- Eine Schreibweise, die Zahlen mit sechzehn Zeichen von 0 bis F darstellt. Weil sie 0 bis 255 in genau zwei Stellen abdeckt, wird sie für Farbcodes genutzt.
- Kurzschreibweise
- Die auf drei Stellen verkürzte Form wie
#FFF. Sie lässt sich nur verwenden, wenn beide Stellen jeder Komponente dasselbe Zeichen sind. - 24-Bit-Farbe
- Ein Verfahren, das jeder Komponente acht Bit zuweist. Zusammen lassen sich damit rund 16,77 Millionen Farben ausdrücken.
- Kanal
- Jede einzelne Komponente, aus der sich eine Farbe zusammensetzt. Bei RGB sind Rot, Grün und Blau je ein Kanal.
Häufige Fragen
#FFFFFF und #ffffff werden in CSS identisch behandelt. Hex-Farbcodes sind nicht case-sensitiv.#AABBCC → #ABC). Ein Wert wie #1DA1F2 kann nicht verkürzt werden.
Übrigens – Das Geheimnis der Farbe: das menschliche Auge und 16,7 Millionen Farben
Das menschliche Auge kann schätzungsweise etwa 10 Millionen Farben unterscheiden (mit individuellen Unterschieden). 24-Bit-RGB-Farbe (8 Bit pro Kanal) kann 16.777.216 Farben darstellen — weit mehr als das menschliche Wahrnehmungsvermögen.
Bekannte Markenfarben in RGB: Twitter-Blau #1DA1F2 (29, 161, 242), Google-Rot #EA4335 (234, 67, 53), LINE-Grün #00B900 (0, 185, 0). Das ikonische Blau von Tiffany — Tiffany Blue — liegt nahe bei #0ABAB5 und ist eine der wenigen als Marke eingetragenen Farben.
Eine interessante Geschichte: CSS besitzt eine Farbe namens rebeccapurple (#663399). Sie wurde von der CSS-Community als Hommage an Rebecca, die 6-jährige Tochter des CSS-Spezifikationsautors Eric Meyer, vorgeschlagen und 2014 offiziell aufgenommen. Sie ist bis heute ein tief im Engineering-Community verankertes Kapitel.