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) |