Farbcodes erklärt: HEX & RGB mit Farbtabelle
#FF6600 und rgb(255, 102, 0) beschreiben exakt dieselbe Farbe – nur in zwei Schreibweisen. Hier lernst du in fünf Minuten, wie beide Systeme funktionieren, wie du zwischen ihnen umrechnest, und bekommst eine große Farbtabelle mit den wichtigsten Tönen zum direkten Verwenden.
So funktioniert RGB
Jedes Display mischt Farben aus drei Lichtfarben: Rot, Grün und Blau. RGB gibt für jeden Kanal einen Wert von 0 (aus) bis 255 (volle Intensität) an. rgb(255, 0, 0) ist reines Rot, rgb(0, 0, 0) ist Schwarz (alle Kanäle aus), rgb(255, 255, 255) ist Weiß (alle Kanäle voll). Sind alle drei Werte gleich, entsteht ein neutrales Grau. Aus 256 Stufen pro Kanal ergeben sich 256³ = 16.777.216 mögliche Farben – deshalb spricht man von „16,7 Millionen Farben“ oder 24-Bit-Farbe.
So funktioniert HEX
HEX ist dieselbe Information, kompakter notiert: drei Zweiergruppen im Hexadezimalsystem (Sechzehnersystem mit den Ziffern 0–9 und A–F), eingeleitet von einer Raute. Aufbau: #RRGGBB. 00 entspricht 0, FF entspricht 255 – aus rgb(255, 102, 0) wird also #FF6600. Groß- und Kleinschreibung ist egal. Zwei Sonderformen begegnen dir gelegentlich: die Kurzform mit drei Zeichen (#F60 steht für #FF6600) und die Acht-Zeichen-Form mit Alpha-Wert für die Deckkraft (#FF660080 ≈ 50 % deckend).
Umrechnen zwischen HEX und RGB
Von HEX nach RGB: jede Zweiergruppe einzeln umrechnen – erste Ziffer mal 16 plus zweite Ziffer, wobei A=10 bis F=15. Beispiel #4B: 4 × 16 + 11 = 75. Rückwärts teilst du den Dezimalwert durch 16: Ganzzahl-Ergebnis ist die erste Ziffer, der Rest die zweite. Im Alltag musst du das nie von Hand tun – jeder Browser-Farbwähler, GIMP, Photoshop und unser Hintergrund-Generator zeigen beide Schreibweisen parallel an.
Die große Farbtabelle
Die wichtigsten Töne mit HEX- und RGB-Wert. Zu vielen Farben gibt es bei uns eine eigene Seite mit Farbabstufungen und Download in jeder Auflösung:
| Farbe | HEX | RGB | Zur Farbseite |
|---|---|---|---|
| Schwarz | #000000 | 0, 0, 0 | Schwarzer Hintergrund |
| Weiß | #FFFFFF | 255, 255, 255 | Weißer Hintergrund |
| Grau | #808080 | 128, 128, 128 | Grauer Hintergrund |
| Dunkelgrau (Material Dark) | #121212 | 18, 18, 18 | Dunkelgrauer Hintergrund |
| Anthrazit (≈ RAL 7016) | #383E42 | 56, 62, 66 | Anthrazit-Hintergrund |
| Silber | #C0C0C0 | 192, 192, 192 | Silberner Hintergrund |
| Rot | #FF0000 | 255, 0, 0 | Roter Hintergrund |
| Dunkelrot | #8B0000 | 139, 0, 0 | Dunkelroter Hintergrund |
| Orange | #FFA500 | 255, 165, 0 | Oranger Hintergrund |
| Gold | #FFD700 | 255, 215, 0 | Goldener Hintergrund |
| Gelb | #FFFF00 | 255, 255, 0 | Gelber Hintergrund |
| Grün | #008000 | 0, 128, 0 | Grüner Hintergrund |
| Hellgrün | #90EE90 | 144, 238, 144 | Hellgrüner Hintergrund |
| Dunkelgrün | #006400 | 0, 100, 0 | Dunkelgrüner Hintergrund |
| Mintgrün | #98FF98 | 152, 255, 152 | Mintgrüner Hintergrund |
| Türkis | #40E0D0 | 64, 224, 208 | Türkiser Hintergrund |
| Blau | #0000FF | 0, 0, 255 | Blauer Hintergrund |
| Hellblau | #ADD8E6 | 173, 216, 230 | Hellblauer Hintergrund |
| Dunkelblau (Navy) | #000080 | 0, 0, 128 | Dunkelblauer Hintergrund |
| Lila (Violett) | #800080 | 128, 0, 128 | Lila Hintergrund |
| Rosa | #FFC0CB | 255, 192, 203 | Rosa Hintergrund |
| Pink (Hot Pink) | #FF69B4 | 255, 105, 180 | Pinker Hintergrund |
| Braun | #8B4513 | 139, 69, 19 | Brauner Hintergrund |
| Beige | #F5F5DC | 245, 245, 220 | Beiger Hintergrund |
| Magenta | #FF00FF | 255, 0, 255 | – |
| Cyan | #00FFFF | 0, 255, 255 | – |
Farbcodes in der Praxis
Wozu das Ganze? Farbcodes sind die einzige Möglichkeit, eine Farbe exakt reproduzierbar weiterzugeben. Ein paar typische Einsatzfälle:
- Eigene Hintergründe: Code in den Generator eintragen, Auflösung wählen, fertig – oder gleich zwei Codes für einen Farbverlauf kombinieren.
- Konsistente Designs: In Präsentationen und Dokumenten sorgt derselbe HEX-Wert dafür, dass „unser Blau“ auf jeder Folie identisch ist – etwa beim PowerPoint-Hintergrund.
- Farben aus Bildern übernehmen: Mit der Pipette (in fast jedem Bildprogramm) liest du den Code jedes Pixels aus und baust dir z. B. ein Wallpaper passend zur Akzentfarbe deines Setups – Ideen dazu liefert der Artikel über Aesthetic-Hintergründe.
- Sonderfall Chromakey: Fürs Greenscreen-Keying hat sich kräftiges Grün um
#00B140etabliert – Details in der Greenscreen-Kaufberatung.
Eine Einschränkung solltest du kennen: Der Code definiert die Farbe mathematisch, nicht ihren Look. Panel-Typ, Farbprofil und Helligkeit sorgen dafür, dass dasselbe #FF6600 auf zwei Bildschirmen sichtbar unterschiedlich leuchten kann.
Häufige Fragen
Was ist der Unterschied zwischen HEX und RGB?
Keiner in der Farbe – nur in der Schreibweise. Beide beschreiben dieselben drei Werte für Rot, Grün und Blau von 0 bis 255. HEX notiert sie hexadezimal in einem kompakten Code (#FF6600), RGB dezimal als Zahlentripel (rgb(255, 102, 0)).
Wie rechne ich HEX in RGB um?
Teile den Code in drei Zweiergruppen und rechne jede vom Sechzehnersystem ins Dezimalsystem um: erste Ziffer mal 16 plus zweite Ziffer. Aus #FF6600 wird so 255, 102, 0. Jedes Farbwahl-Tool und jeder Browser-Farbwähler erledigt das auch automatisch.
Warum sieht dieselbe Farbe auf zwei Bildschirmen unterschiedlich aus?
Der Farbcode ist nur die Anweisung – wie sie leuchtet, entscheiden Panel, Farbprofil, Helligkeit und Einstellungen wie Nachtmodus. Kalibrierte Displays zeigen Farben ähnlicher, identisch sind sie praktisch nie.
Wofür stehen die 8 Zeichen in Codes wie #FF660080?
Die letzten beiden Zeichen sind der Alpha-Wert, also die Deckkraft: 00 ist völlig durchsichtig, FF völlig deckend. #FF660080 ist demnach das Orange #FF6600 mit rund 50 Prozent Deckkraft.