Ein HEX-Code packt drei 8-Bit-Zahlen in sechs Hexadezimalziffern. HEX in RGB umzurechnen heißt, diese Ziffern in Paare zu teilen und jedes Paar als Dezimalzahl zwischen 0 und 255 zu lesen — genau die Werte, die CSS, Figma und Bildbearbeitungsprogramme erwarten.
So funktioniert die Umrechnung von HEX in RGB
- Lass das führende # weg und verdopple bei einem dreistelligen Code jede Ziffer: aus #f53 wird #ff5533.
- Teile die sechs Ziffern in drei Paare auf — RR, GG und BB.
- Lies jedes Paar als Zahl zur Basis 16 und wandle sie in Basis 10 um: FF wird zu 255, 57 zu 87, 33 zu 51.
- Schreibe die drei Ergebnisse als rgb(R, G, B).
Beispiel zum Nachrechnen
Diese Umrechnung ist exakt. HEX und RGB beschreiben dieselben sRGB-Werte in einer anderen Schreibweise — es wird in keiner Richtung gerundet oder etwas verloren.
HEX und RGB erklärt
Was ist HEX?
Ein HEX-Code ist eine sechsstellige Hexadezimalzahl, die Rot-, Grün- und Blau-Kanal einer Farbe hinter einem # speichert. Jedes Ziffernpaar steht für einen Kanal, von 00 (nichts) bis FF (voll) — das ergibt dieselben 16,7 Millionen Farben wie RGB, nur deutlich kürzer notiert. HEX ist der Standard in CSS, Design-Tools und Markenrichtlinien.
- Syntax:
- #RRGGBB
- Wertebereich:
- 00–FF pro Kanal
- Ideal für:
- CSS, Design-Übergabe, Markenrichtlinien
Was ist RGB?
RGB beschreibt eine Farbe über drei Lichtkanäle — Rot, Grün und Blau — mit Werten von 0 bis 255. Das entspricht der Funktionsweise eines Bildschirms: alle drei auf 255 ergeben Weiß, alle auf 0 ergeben Schwarz. RGB ist die richtige Wahl, wenn du mit einer Farbe rechnen musst, und rgba() ergänzt zusätzlich Transparenz.
- Syntax:
- rgb(R, G, B)
- Wertebereich:
- 0–255 pro Kanal
- Ideal für:
- Code, Canvas, Transparenz mit rgba()
Referenztabelle HEX zu RGB
Die gängigsten CSS-Farben, umgerechnet von HEX nach RGB.
| Farbe | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |