RGB liefert dir drei Dezimalkanäle zwischen 0 und 255. Die Umrechnung in HEX macht aus jedem Kanal eine zweistellige Hexadezimalzahl, sodass die ganze Farbe in ein kompaktes Kürzel passt, das jeder Browser, jedes Design-Tool und jeder Styleguide versteht.
So funktioniert die Umrechnung von RGB in HEX
- Teile den Rot-Kanal durch 16: der Quotient ist die erste Ziffer, der Rest die zweite.
- Schreibe die Ziffern 10 bis 15 als Buchstaben A bis F, aus 255 wird FF.
- Wiederhole das für Grün und Blau und fülle einstellige Werte mit einer führenden Null auf: aus 5 wird 05.
- Setze die drei Paare zusammen und stelle ein # voran.
Beispiel zum Nachrechnen
Exakt, solange die Kanäle ganze Zahlen von 0 bis 255 sind. Kommawerte wie rgb(79.5, 70, 229) werden vorher auf die nächste ganze Zahl gerundet, weil HEX nichts dazwischen speichern kann.
RGB und HEX erklärt
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()
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
Referenztabelle RGB zu HEX
Die gängigsten CSS-Farben, umgerechnet von RGB nach HEX.
| Farbe | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |