HEX zu RGB - So funktionieren Farbcodes (mit Beispielen)

Jede Farbe auf einem Bildschirm ist eine Mischung aus rotem, gruenem und blauem Licht. Designer und Entwickler schreiben diese Mischung in zwei gaengigen Notationen: HEX (#3b82f6) und RGB (rgb(59, 130, 246)). Sie beschreiben dieselben drei Kanaele - nur das Zahlensystem aendert sich. Dieser Guide erklaert, was ein HEX-Farbcode ist, was RGB bedeutet, wie Sie HEX von Hand zu RGB umrechnen (einschliesslich warum FF gleich 255 ist), ausgearbeitete Beispiele, Alpha/RGBA und eine kurze Tabelle gaengiger Farben.

Was ist ein HEX-Farbcode?

HEX- (hexadezimale) Farbcodes nutzen Basis-16-Ziffern: 0-9 und A-F, wobei A = 10, B = 11, C = 12, D = 13, E = 14 und F = 15. Im Web beginnen sie meist mit # und kommen in wenigen Laengen:

• #RGB - Kurzform: jede Ziffer wird verdoppelt (#F0A -> #FF00AA)
• #RRGGBB - die Standard-Sechs-Ziffern-Form (zwei Ziffern pro Kanal)
• #RRGGBBAA - acht Ziffern: RGB plus Alpha (Deckkraft)

Jedes Ziffernpaar ist ein Kanal. Die ersten zwei Ziffern sind Rot, die naechsten zwei Gruen und die letzten zwei Blau. Weil zwei Hex-Ziffern 16 x 16 = 256 Werte darstellen koennen, reicht jeder Kanal von 00 (0) bis FF (255) - dieselbe Spanne, die CSS in rgb() nutzt.

HEX ist in Design-Tools, Brand Guidelines und CSS beliebt, weil es kompakt und leicht zu kopieren ist. Gross-/Kleinschreibung spielt keine Rolle: #3b82f6 und #3B82F6 sind dieselbe Farbe.

Was ist RGB?

RGB steht fuer Rot, Gruen und Blau. In CSS schreiben Sie es als rgb(r, g, b) oder in der modernen leerzeichengetrennten Form rgb(r g b), wobei jeder Kanal eine Ganzzahl von 0 bis 255 ist (oder ein Prozentwert). Kanaele bei voller Staerke mischen Weiss; alles Null macht Schwarz; ungleiche Mischungen machen jede andere Farbe auf einem sRGB-Display.

• rgb(255, 0, 0) - reines Rot
• rgb(0, 255, 0) - reines Gruen
• rgb(0, 0, 255) - reines Blau
• rgb(255, 255, 255) - Weiss
• rgb(0, 0, 0) - Schwarz

RGB ist oft leichter nachzuvollziehen, wenn Sie Helligkeit oder Deckkraft im Code justieren. HEX ist oft leichter aus einem Styleguide einzufuegen. Zwischen ihnen umzurechnen aendert nur, wie Sie dieselben drei Zahlen schreiben.

HEX von Hand zu RGB umrechnen

Teilen Sie die sechs Hex-Ziffern in drei Paare und rechnen Sie jedes Paar von Basis 16 in Dezimal um. Die Formel fuer einen zweistelligen Hex-Wert XY ist:

1. Entfernen Sie das fuehrende #, falls vorhanden.
2. Wenn Sie 3 Ziffern haben (#RGB), erweitern Sie jede Ziffer durch Verdoppeln (#F0A -> #FF00AA).
3. Teilen Sie in RR, GG und BB.
4. Rechnen Sie jedes Paar mit (hoch x 16) + niedrig um.
5. Schreiben Sie rgb(R, G, B).

Ausgearbeitetes Beispiel: #FFFFFF

Weiss ist der einfachste Check. RR = FF, GG = FF, BB = FF. Jedes FF wird zu 255, also #FFFFFF -> rgb(255, 255, 255). Schwarz ist das Gegenteil: #000000 -> rgb(0, 0, 0).

Ausgearbeitetes Beispiel: #1A2B3C

• Rot 1A: (1 x 16) + 10 = 16 + 10 = 26
• Gruen 2B: (2 x 16) + 11 = 32 + 11 = 43
• Blau 3C: (3 x 16) + 12 = 48 + 12 = 60
• Ergebnis: #1A2B3C -> rgb(26, 43, 60)

In die andere Richtung (RGB zu HEX) clampen Sie jeden Kanal auf 0-255, teilen durch 16 fuer den High-Nibble, nehmen den Rest fuer den Low-Nibble und mappen 10-15 zurueck auf A-F. Fuellen Sie einzelne Ziffern mit einer fuehrenden Null auf, sodass jeder Kanal zwei Zeichen hat (#0A1B2C, nicht #A1B2C).

Alpha, RGBA und achtstellige HEX

Deckkraft ist ein vierter Kanal namens Alpha. In CSS nutzt rgba(r, g, b, a) a von 0 (vollstaendig transparent) bis 1 (vollstaendig opak), oder Sie nutzen die moderne Syntax rgb(r g b / a). Achtstellige HEX encoded dieselbe Idee als #RRGGBBAA, wobei AA von 00 (transparent) bis FF (opak) geht.

• #FF000080 -> Rot bei etwa 50% Deckkraft (128/255 ~ 0.5) -> rgba(255, 0, 0, 0.5)
• #00000000 -> vollstaendig transparentes Schwarz (oft als "no fill" genutzt)
• #3B82F6FF -> dasselbe wie #3B82F6 mit expliziter voller Deckkraft

Nicht jeder aeltere Browser oder Design-Export behandelte achtstellige HEX gleich, aber modernes CSS unterstuetzt es. Wenn Sie durchscheinende Overlays, Schatten oder Glas-Effekte brauchen, ist RGBA (oder HEX mit Alpha) das richtige Werkzeug - feste sechsstellige HEX kann Transparenz nicht ausdruecken.

Gaengige HEX- und RGB-Farbtabelle

Diese Alltagsfarben sind nuetzlich zum Auswendiglernen fuer CSS-Debugging und das Abgleichen von Brand-Tokens:

• #FFFFFF -> rgb(255, 255, 255) - Weiss
• #000000 -> rgb(0, 0, 0) - Schwarz
• #FF0000 -> rgb(255, 0, 0) - Rot
• #00FF00 -> rgb(0, 255, 0) - Limettengruen
• #0000FF -> rgb(0, 0, 255) - Blau
• #FFFF00 -> rgb(255, 255, 0) - Gelb
• #FFA500 -> rgb(255, 165, 0) - Orange
• #808080 -> rgb(128, 128, 128) - Grau
• #1A2B3C -> rgb(26, 43, 60) - dunkles Blau-Grau (aus dem Beispiel oben)
• #3B82F6 -> rgb(59, 130, 246) - ein gaengiges "Sky"-Blau in vielen UI-Kits

Haeufig gestellte Fragen

Ist HEX dasselbe wie RGB?

Sie encoden dieselben Rot-, Gruen- und Blau-Intensitaeten fuer typische Webfarben. HEX schreibt diese Werte hexadezimal; RGB schreibt sie dezimal. HEX zu RGB (oder zurueck) umzurechnen aendert die Farbe nicht - nur die Notation.

Warum ist FF gleich 255?

F ist 15 in Hexadezimal. Zwei Ziffern bedeuten (15 x 16) + 15 = 255, der maximale 8-Bit-Kanalwert. Deshalb ist #FF0000 volles Rot und #FFFFFF Weiss.

Was bedeutet eine 3-stellige HEX-Farbe?

Kurzform #RGB erweitert sich, indem jede Ziffer wiederholt wird: #0F8 wird #00FF88. Es ist eine kompakte Art, Farben zu schreiben, bei denen die beiden Ziffern jedes Kanals identisch sind (#00, #FF, #88 und so weiter).

Was ist der Unterschied zwischen RGB und RGBA?

RGBA fuegt einen Alpha- (Deckkraft-) Kanal hinzu. rgb(255, 0, 0) ist festes Rot; rgba(255, 0, 0, 0.5) ist dasselbe Rot bei 50% Deckkraft. Achtstellige HEX (#RRGGBBAA) ist das HEX-Aequivalent von RGBA.

Sollte ich HEX oder RGB in CSS nutzen?

Beide sind gueltig. Nutzen Sie HEX, wenn Sie aus einem Design-System kopieren oder einen kurzen Token wollen. Nutzen Sie RGB/RGBA, wenn Sie Deckkraft brauchen oder Farben aus Variablen und Mathematik bauen. Viele Teams speichern eine HEX-Brand-Farbe und leiten rgb()-Kanaele fuer moderne CSS-Opacity-Tricks ab (zum Beispiel rgb(var(--brand-rgb) / 0.2)).

Wie rechne ich HEX schnell zu RGB um?

Zum einmaligen Lernen nutzen Sie die Methode (Ziffer x 16) + Ziffer oben. Fuer den Alltag fuegen Sie den Code in einen HEX-zu-RGB-Converter ein, damit Sie rgb()/rgba() kopieren, eine Swatch sehen und Rechenfehler vermeiden koennen.