Hex-Farbcodes erklärt + 100 gängige Hex-Werte (2026)

Ein Hex-Farbcode ist ein 6-stelliger String, der mit # beginnt und Rot-, Grün- und Blau-Intensitäten in der Basis 16 darstellt. Jedes Ziffernpaar steht für einen Kanal von 00 bis FF (0 bis 255 dezimal). Zum Beispiel ist #FF0000 reines Rot, #00FF00 reines Grün und #0000FF reines Blau.

Hex-Farbcodes treiben CSS, Designtools und fast jeden digitalen Farbwähler an, dem du je begegnen wirst. Sie sind kompakt, kopierbar und eindeutig — deshalb haben sie jede andere Notation überlebt. Hier erfährst du, wie sie funktionieren, was die gängigen Werte bedeuten und wann du zu Hex statt zu RGB oder HSL greifen solltest.

So funktionieren Hex-Farbcodes

Hex steht für hexadezimal — ein Zahlensystem zur Basis 16. Statt nur die Ziffern 0–9 wie im Dezimalsystem zu nutzen, fügt Hex die Buchstaben A bis F hinzu, um mit einem einzigen Zeichen bis 15 zu zählen.

Hier ist die vollständige Liste der Hex-Ziffern und ihrer dezimalen Werte:

Zwei Hex-Ziffern zusammen können jede Zahl von 00 (0) bis FF (255) darstellen. Genau das ist der Bereich, den jeder Farbkanal benötigt — 256 mögliche Intensitäten pro Kanal.

Eine Standard-Hex-Farbe packt drei Kanäle in sechs Zeichen: #RRGGBB. Das erste Paar ist Rot, das zweite Grün, das dritte Blau. #1A2B3C bedeutet also Rot = 1A (26), Grün = 2B (43), Blau = 3C (60).

Warum sechs Zeichen?

Jeder Farbkanal braucht 1 Byte (8 Bit) Daten, was 256 Werte ergibt. Ein Byte benötigt genau 2 Hex-Ziffern zum Schreiben. Drei Kanäle × 2 Ziffern = 6 Zeichen. Füge das #-Präfix für CSS hinzu, und du erhältst den vertrauten 7-Zeichen-String.

8-stelliges Hex mit Alpha

Modernes CSS unterstützt #RRGGBBAA, wobei das vierte Paar der Alpha-(Transparenz-)Kanal ist. #FF000080 ist reines Rot bei etwa 50 % Deckkraft (80 ist 128 von 255). Browser ab 2018 verarbeiten dies ohne zusätzliche CSS-Funktion.

3-stellige Kurzform

Wenn alle drei Kanäle Wiederholungsziffern verwenden, kannst du die Duplikate weglassen. #FFF wird zu #FFFFFF (Weiß), #000 zu #000000 (Schwarz) und #F0A zu #FF00AA. Die Kurzform funktioniert nur, wenn jedes Paar ein doppeltes Zeichen ist — #1A2 ist nicht dasselbe wie #1A002. Es wird zu #11AA22 aufgelöst.

Es gibt auch eine 4-stellige Kurzform für Hex mit Alpha: #F00C wird zu #FF0000CC.

Hex-Codes lesen und schreiben

Der beste Weg, Hex zu lernen, ist ein paar Beispiele zu lesen und die Mathematik zu machen.

Reines Rot: `#FF0000`

• Rot-Kanal: FF = 255 (max)
• Grün-Kanal: 00 = 0
• Blau-Kanal: 00 = 0

Maximales Rot, kein Grün, kein Blau. Das Ergebnis ist das hellste Rot, das dein Bildschirm darstellen kann.

Reines Grün: `#00FF00`

• Rot: 00 = 0
• Grün: FF = 255
• Blau: 00 = 0

Schwarz und Weiß

• Schwarz: #000000 — alle Kanäle auf null
• Weiß: #FFFFFF — alle Kanäle voll aufgedreht

Warum `#FF` gleich 255 ist

Um ein Hex-Paar in Dezimal umzurechnen, multipliziere die erste Ziffer mit 16 und addiere die zweite:

• FF = (15 × 16) + 15 = 240 + 15 = 255
• 80 = (8 × 16) + 0 = 128
• 1A = (1 × 16) + 10 = 26

Das ist die ganze Umrechnung. Wenn du dir die Mathematik sparen willst, übernimmt das unser kostenloser Hex-zu-RGB-Konverter sofort.

Referenz gängiger Hex-Werte

Diese 16 Codes decken die meisten alltäglichen Designbedürfnisse ab — von den benannten CSS-Farben bis zu marken-typischen UI-Tönen.

Bei Markenarbeit siehst du oft Codes wie #1DA1F2 (altes Twitter-Blau), #E60023 (Pinterest-Rot) oder #25D366 (WhatsApp-Grün). Marken veröffentlichen ihre kanonischen Hex-Werte fast immer in ihrem Press-Kit.

Hex vs. RGB vs. HSL: Wann was verwenden

Hex ist nicht die einzige Farbnotation. CSS unterstützt rgb(), hsl() und neuere Funktionen wie oklch(). Jedes Format hat eine Aufgabe, in der es gut ist.

Wann Hex verwenden

• Farben zwischen Figma, Sketch, Photoshop und CSS einfügen
• Schneller visueller Vergleich (#FFF vs. #FAFAFA lässt sich schneller scannen als rgb)
• Markenfarben in Dokumenten, Slack oder E-Mail teilen
• Überall dort, wo Lesbarkeit wichtiger ist als Mathematik

Wann RGB verwenden

• Animation von Deckkraft oder Farbe in JavaScript: rgba(255, 107, 53, 0.5)
• Pixeldaten auf einem manipulieren
• Mathematiklastige Operationen, bei denen die 0–255-Ganzzahlen leichter nachzuvollziehen sind

Wann HSL verwenden

• Hellere/dunklere Varianten einer Grundfarbe bauen (einfach den L-Wert verschieben)
• Komplementäre oder analoge Paletten erzeugen (den H-Wert um 180° oder 30° verschieben)
• Designen mit intuitiver Steuerung — H, S und L bilden ab, wie Menschen tatsächlich über Farbe denken

Umrechnungsmathematik

Hex zu RGB ist eine direkte Zuordnung. RGB zu HSL ist etwas aufwendiger — die Formel normalisiert die RGB-Werte auf 0–1 und leitet dann den Farbton aus den Kanaldifferenzen ab. Die meisten Designer merken sie sich nicht. Die Mozilla-Developer-Network-Referenz für hex-color deckt die Spezifikationsdetails ab, falls du sie brauchst, und unser Hex-zu-RGB-Tool und RGB-zu-Hex-Tool übernehmen die Umrechnung in beide Richtungen.

Gesponsert von den Machern

Genug von langweiligen Screenshots? Probier ScreenSnap Pro.

Wunderschöne Hintergründe, professionelle Annotationen, GIF-Aufnahme und sofortiges Cloud-Sharing — alles in einer App. Einmalig 29 $, für immer deins.

Sieh, was es kann

Häufige Fehler bei Hex-Codes

Hex sieht einfach aus, aber ein paar Muster bringen neuere Designer und Entwickler ins Stolpern.

3-stellige Kurzform missverstanden

#1A2 ist nicht #1A002. Sie wird durch Wiederholen jeder Ziffer aufgelöst, nicht durch Auffüllen mit Null. #1A2 = #11AA22. Wenn du einen Hex-Code brauchst, bei dem irgendein Paar unterschiedliche Ziffern hat, verwende die volle 6-Zeichen-Form.

Kleinbuchstaben vs. Großbuchstaben

#ff6b35 und #FF6B35 werden in jedem Browser und Designtool identisch dargestellt. Es gibt keinen funktionalen Unterschied. Wähle eine Konvention für dein Team und bleib dabei — die meisten Style-Guides bevorzugen Großbuchstaben für die Lesbarkeit, während viele CSS-Linter standardmäßig Kleinbuchstaben verwenden.

Hinzufügen des `0x`-Präfix

0xFF6B35 ist ein numerisches Literal aus JavaScript oder C — es funktioniert im Code, nicht in CSS. Browser erwarten #FF6B35. Das 0x-Präfix gilt nur, wenn du echte Hexadezimalzahlen in einer Programmiersprache schreibst.

3-stellige und 4-stellige Formen vermischen

#F00 ist deckendes Rot. #F00F ist deckendes Rot mit voller Alpha. #F008 ist Rot bei ca. 53 % Alpha. Die vierte Ziffer ändert die Bedeutung, also tippe nicht versehentlich ein verirrtes Zeichen in einen 3-stelligen Code.

Kostenlose Tools, die mit Hex arbeiten

Wenn du den ganzen Tag mit Farben arbeitest, sparen dir ein paar Hilfsprogramme echte Zeit:

• Hex-zu-RGB-Konverter — füge einen Hex-Code ein, erhalte den passenden rgb()-Wert. Nützlich, wenn du Designspezifikationen in CSS-Variablen umwandeln musst.
• RGB-zu-Hex-Konverter — die Umkehrung: füge RGB-Werte aus Photoshop oder Sketch ein und erhalte einen sauberen Hex-String.
• Farbwähler — lade ein beliebiges Bild hoch und entnehme exakte Hex-Codes von jedem Pixel. Großartig, um Markenassets abzugleichen oder eine Farbe aus einem Screenshot zu greifen.
• Farbpaletten-Extraktor — zieh die dominanten 5–10 Hex-Codes automatisch aus einem Bild. Praktisch für Moodboards oder beim Aufbau von UI-Paletten aus einem Hero-Bild.

Ein typischer Workflow sieht so aus: Mach einen Screenshot, leg ihn in den Farbwähler, schnapp dir die Hex-Codes, die du brauchst, und konvertiere nur dann zu RGB oder HSL, wenn dein CSS- oder Animationscode es verlangt.

Vom Lesen der Codes zum souveränen Einsatz

#FF6B35 lesen zu können, ist der erste Schritt. Zu wissen, warum sich dieses warme Orange neben einem kühlen Teal energisch anfühlt — und wie du eine ausgewogene Palette darum herum baust — ist Farblehre. Wenn du tiefer in Farbtonbeziehungen, Kontrast und Palettensysteme einsteigen willst, geht unser Farblehre-Leitfaden die Prinzipien durch, die jeder Designer kennen sollte.

Die Kurzfassung: Hex sagt dir, was die Farbe ist. Farblehre sagt dir, wie du sie einsetzt.

Häufig gestellte Fragen

Was ist ein Hex-Farbcode?

Ein Hex-Farbcode ist ein 6-stelliger String, der mit # beginnt und Rot-, Grün- und Blau-Intensitäten in der Basis 16 codiert. Jedes Zeichenpaar steht für einen Kanal von 0 bis 255. Zum Beispiel ist #FF6B35 ein warmes Orange.

Hex vs. RGB — was ist der Unterschied?

Sie stellen dieselben Farben in unterschiedlicher Notation dar. #FF6B35 und rgb(255, 107, 53) sind auf dem Bildschirm identisch. Hex ist kompakter und einfacher zu teilen; RGB ist einfacher für Mathematik und Animation. Verwende, was zu deinem Workflow passt — die meisten Designtools akzeptieren beides.

Was bedeutet `#FF0000`?

#FF0000 ist reines Rot. Das erste Paar (FF) setzt den Rot-Kanal auf sein Maximum (255). Die übrigen Paare (00) setzen Grün und Blau auf null. Ohne Beimischung von Grün oder Blau siehst du das hellste Rot, das dein Display erzeugen kann.

Können Hex-Codes Alpha oder Transparenz haben?

Ja. Moderne Browser unterstützen 8-stelliges Hex (#RRGGBBAA), wobei das letzte Paar der Alpha-Kanal ist. #FF000080 ist Rot bei etwa 50 % Deckkraft. Es gibt auch eine 4-stellige Kurzform: #F008 wird zu #FF000088. Ältere Browser unterstützen 8-stelliges Hex eventuell nicht — verwende rgba() für maximale Kompatibilität.

Wie konvertiere ich Hex zu RGB?

Teile den Hex-Code in drei Paare und konvertiere jedes von der Basis 16 zur Basis 10. Für #FF6B35: FF = 255, 6B = 107, 35 = 53, ergibt rgb(255, 107, 53). Oder spar dir die Mathematik und füge den Code in unser Hex-zu-RGB-Tool ein.

Sind Hex-Codes case-sensitive?

Nein. #ff6b35 und #FF6B35 ergeben in jedem Browser, Designtool und Stylesheet dieselbe Farbe. Wähle eine Schreibweise für deine Codebasis und wende sie konsistent an — ein CSS-Linter kann die Wahl automatisch durchsetzen.

Wie viele Farben kann ein Hex-Code darstellen?

Ein Standard-6-stelliger Hex-Code stellt 16.777.216 Farben dar (256 × 256 × 256). Das ist der volle 24-Bit-Farbraum, den dein Monitor anzeigen kann. Mit hinzugefügtem Alpha-Kanal (8-stelliges Hex) erhältst du dieselben Farben in beliebigen 256 Transparenzstufen.

Wenn du Screenshots machst und exakte Farben daraus greifen musst — um Markenpaletten abzugleichen, UI-Referenzen zu bauen oder einfach etwas aus einem Design auszuprobieren, das dir gefällt — spart ein Tool, das Aufnahme, Annotation und Farbwahl an einem Ort vereint, eine Menge Hin und Her. ScreenSnap Pro kombiniert präzise Bildschirmaufnahmen mit schnellen Farbwähler-Workflows, sodass du in Sekunden vom Screenshot zum kopierbaren Hex-Code kommst. Es ist ein einmaliger Kauf für 29 $ mit über 150 Hintergrund-Verläufen, 15 Annotations-Tools und null Wasserzeichen. Sieh, wie es zu deinem Workflow passt.

Für die tiefere Geschichte, wie Hex-Farben zum Web-Standard wurden, ist der Wikipedia-Eintrag zu Web-Farben eine solide Lektüre, und W3Schools' Hex-Farbreferenz ist ein praktisches interaktives Spielfeld, falls du live mit Codes experimentieren möchtest.