RGB zu HEX Farbkonverter

RGB- und HEX-Farbsysteme erklärt

RGB (Rot, Grün, Blau) und HEX (hexadezimal) sind zwei Möglichkeiten, die gleichen Farben genau darzustellen – sie verwenden einfach unterschiedliche Notationssysteme. Beide beschreiben Farben, indem sie drei Grundfarben (rot, grün, blau) bei unterschiedlicher Intensität mischen. Um beide Systeme zu verstehen, ist es für Webdesign, CSS, Grafikdesign, Fotobearbeitung und digitale Kunst unerlässlich.

Im RGB-Modell hat jeder der drei Kanäle (rot, grün, blau) eine Intensitätswert von 0 bis 255. Null bedeutet, dass es keine dieser Farbe gibt; 255 bedeutet maximale Intensität. Wenn alle drei bei 255 liegen, ergibt sich Weiß (rgb(255,255,255)). Wenn alle drei bei 0 liegen, ergibt sich Schwarz (rgb(0,0,0)). Mit 256 möglichen Werten pro Kanal und 3 Kanälen kann RGB 256³ = 16.777.216 verschiedene Farben darstellen (ca. 16,7 Millionen).

Im HEX-Modell werden die gleichen drei Kanäle jeweils als 2-stellige hexadezimale Zahl (00 bis FF) dargestellt, vorangestellt mit #. Hexadezimal verwendet Ziffern 0–9 und Buchstaben A–F, wobei A=10, B=11, C=12, D=13, E=14, F=15. FF in hex = 15×16 + 15 = 255 in Dezimal. Also #FFFFFF = rgb(255,255,255) = Weiß. Die Umrechnung ist rein eine Basisänderung: Dezimal (Basis 10) in hexadezimal (Basis 16).

Wie man RGB in HEX umrechnet: Schritt-für-Schritt

Um jeden RGB-Kanal in hex umzurechnen, benötigt man, den Kanalwert (0–255) durch 16 zu teilen und den Quotienten und Rest als hexadezimale Ziffern auszudrücken:

1. Nehmen Sie den Kanalwert (0–255)
2. Teilen Sie durch 16: Quotient = erste hexadezimale Ziffer, Rest = zweite hexadezimale Ziffer
3. Wenn beide 10–15 (A–F) sind, konvertieren Sie sie in hexadezimale Ziffern
4. Kombinieren Sie: erste Ziffer + zweite Ziffer = 2-stellige hexadezimale Zahl
5. Wiederholen Sie dies für G- und B-Kanal
6. Kombinieren Sie: # + R_hex + G_hex + B_hex

Beispiel: Um rgb(255, 99, 71) in hex (Tomatenrot) umzurechnen:

• R=255: 255÷16=15 Rest 15 → F + F → FF
• G=99: 99÷16=6 Rest 3 → 6 + 3 → 63
• B=71: 71÷16=4 Rest 7 → 4 + 7 → 47
• Ergebnis: #FF6347

Gängige Web-Farben: RGB- und HEX-Referenz

Hier ist eine umfassende Referenztabelle für die am häufigsten verwendeten Web-Farben:

Verwendung von RGB und HEX in CSS und Webdesign

CSS akzeptiert mehrere Farbformate. HEX und RGB sind die am häufigsten verwendeten, aber modernes CSS unterstützt auch HSL, benannte Farben und die neuen oklch- und oklch-Farträume für breitbandige Displays.

In CSS können Farben wie folgt angegeben werden:

• color: #FF6347; (HEX)
• color: rgb(255, 99, 71); (RGB)
• color: rgba(255, 99, 71, 0,5); (RGB + Alpha-Transparenz, 0=transparent, 1=opak)
• color: hsl(9, 100%, 64%); (Hue, Saturation, Lightness)
• color: tomato; (CSS-benannte Farbe)

HEX-Codes können auch in 3-stelliger Abkürzung geschrieben werden, wenn jedes Paar eine wiederholte Ziffer ist: #FF0000 = #F00, #FFFFFF = #FFF, #336699 kann nicht abgekürzt werden. Die Abkürzung halbiert die Schreibzeit und wird in allen Browsern unterstützt.

Bei der Einhaltung von Designkonsistenz verwenden moderne Designsysteme (Material Design, Tailwind CSS, Bootstrap) vorgefertigte Farbpaletten, die als HEX-Codes ausgedrückt werden. Tailwind CSS zum Beispiel bietet 22 Farbfamilien, jede mit 10 Nuancen (gray-100 bis gray-900), alle als HEX-Codes in der Konfigurationsdatei angegeben.

RGBA und Alpha-Transparenz

RGBA fügt einem RGB-Modell einen vierten Kanal hinzu: alpha, der die Transparenz steuert. Alpha-Werte reichen von 0 (vollständig transparent, unsichtbar) bis 1 (vollständig opak, keine Transparenz). Bruchteile von Werten erzeugen halbtransparente Farben.

Beispiele: rgba(0, 0, 0, 0,5) ist halbtransparent schwarz (wie ein durchsichtiges Overlay). rgba(255, 255, 255, 0,8) ist ein 80-prozentig opak Weiß. Dies wird häufig für Overlay-Effekte, gläserne UI-Elemente und Hervorhebungen bei Hover verwendet.

In modernem CSS gibt es auch HEX mit Alpha: 8-stellige Hex-Codes, bei denen die letzten 2 Ziffern die Alpha-Werte angeben. #FF6347CC wäre Tomaten mit 80% Opazität (CC in Hex = 204 in Dezimal; 204/255 ≈ 0,8). Diese Format wurde in der CSS-Farbleich-Level-4-Spezifikation eingeführt und wird in allen modernen Browsern unterstützt.

Der Äquivalent in RGBA ist einfacher für Menschen: rgba(255, 99, 71, 0,8) vs #FF6347CC. Welche Format Sie verwenden, hängt von persönlicher Vorliebe und Werkzeugen ab – Design-Tools wie Figma zeigen und exportieren typischerweise in HEX, während CSS-Präprozessoren (Sass, Less) oft RGBA für seine Lesbarkeit verwenden.

Grundlagen der Farbtheorie für Designer

Das Verständnis des RGB-Farbmodes geht Hand in Hand mit dem Verständnis der Farbtheorie. RGB ist ein additiver Farbmodell – Farben werden durch Hinzufügen von Licht erzeugt. Mischen von R+G+B bei voller Intensität = Weiß (alle Licht). Dies ist das Gegenteil des subtraktiven Farbmodells (Pigment/Druck), bei dem das Mischen aller Farben = Schwarz ergibt.

Komplementäre Farben in RGB sitzen sich gegenseitig auf der Farbkugel gegenüber. Rot (FF0000) und Cyan (00FFFF) sind komplementär – beachten Sie, dass Cyan's RGB die bitweise Inverse von Rot (0,255,255 vs 255,0,0) ist. Ähnlich verhält es sich mit Blau und Gelb, Grün und Magenta. Komplementäre Paare erzeugen maximale Kontrast und visuelle Vibration, wenn sie nebeneinander platziert sind.

Farbharmonie leitet die Auswahl von Farben, die gut zusammenarbeiten: analog (benachbart auf der Kugel), triadisch (drei gleichmäßig voneinander entfernte Farben), split-komplementär und tetradisch (vier Farben, die ein Rechteck bilden). Diese Beziehungen helfen Designern, Paletten zu erstellen, die sich intentional und visuell ausgewogen anfühlen.

Barrierefreiheit und Kontrast: Die WCAG (Web Content Accessibility Guidelines) erfordern einen Mindestkontrastverhältnis zwischen Text und Hintergrund: 4,5:1 für normalen Text, 3:1 für großen Text. Das Kontrastverhältnis wird aus der relativen Helligkeit der RGB-Werte berechnet. Viele Online-Tools überprüfen die WCAG-Konformität – dies ist für Benutzer mit geringer Sehschärfe oder Farbblindheit von wesentlicher Bedeutung.

Farbräume jenseits von RGB: HSL, HSB, CMYK

RGB ist nicht immer das intuitivste System für die Auswahl von Farben. Alternativen können für verschiedene Anwendungsfälle praktischer sein:

HSL ist besonders designerfreundlich: Farbton wählt die Farbe (0°=Rot, 120°=Grün, 240°=Blau), Sättigung steuert, wie lebendig sie ist (0% ist Grau, 100% ist reine Farbe), und Helligkeit steuert die Helligkeit (0% ist Schwarz, 50% ist die reine Farbe, 100% ist Weiß). Die Anpassung nur der Helligkeit, während Farbton und Sättigung konstant bleiben, erzeugt eine konsistente Farbskala – sehr nützlich für die Erstellung von Hover-Zuständen, deaktivierten Zuständen und Tönen/Schattierungen einer Marke.