Zum Hauptinhalt springen
ToolsByUs

HEX vs. RGB vs. HSL

HEX, RGB und HSL sind drei Notationen für dieselben Farben im selben Gamut, sRGB. HEX packt die Rot-, Grün- und Blaukanäle in kompakte Hexadezimalzahlen; RGB nennt diese additiven Anteile direkt; HSL schreibt sie als Farbton, Sättigung und Helligkeit um, so wie Menschen denken. Die Farbe ändert sich nie – nur, welche Bearbeitung am leichtesten fällt.

Nur lokal

HEX vs. RGB vs. HSL erklärt

Jede Farbe auf einer Webseite endet ihre Reise als drei Zahlen: wie viel rotes, grünes und blaues Licht auszugeben ist. Die Formate unterscheiden sich nur darin, wie diese Zahlen geschrieben und gruppiert werden. #FF6600, rgb(255, 102, 0) und hsl(24, 100%, 50%) sind dasselbe Orange, verlustfrei in beide Richtungen umrechenbar, weil alle dieselben sRGB-Kanäle ansprechen.

HEX hat die Copy-Paste-Kultur gewonnen: Design-Werkzeuge, Paletten-Sites und Styleguides reichen sich sechs Zeichen lange Zeichenketten zu, die eine Farbe wie eine Seriennummer identifizieren. RGB ist die Muttersprache von Bildschirmen und Bilddaten. HSL ist das jüngste der drei in CSS und das meinungsstärkste, was die Frage betrifft, warum Sie gerade zu einer Farbe greifen – einen Farbton drehen, eine Sättigung dämpfen, eine Skala bauen. Keines ist richtiger; jedes macht eine andere Bearbeitung billig.

Dieser Leitfaden geht jede Notation, die Alpha-Varianten, die moderne CSS-Funktion color() und die Barrierefreiheitsprüfung durch, die über jeder ästhetischen Entscheidung steht. Jedes entlang des Wegs verlinkte Werkzeug läuft vollständig in Ihrem Browser.

Am schnellsten glauben Sie, dass die drei Notationen ein und dasselbe sind, wenn Sie zusehen, wie ein Wert zwischen ihnen wechselt: Fügen Sie eine Farbe in den Farbkonverter ein, und jedes Format aktualisiert sich sofort – HEX, RGB, HSL und die perzeptiven Optionen eingeschlossen.

Nach jeder Palettenentscheidung schicken Sie das Paar aus Vordergrund und Hintergrund durch den Kontrast-Checker der das exakte WCAG-Verhältnis meldet und ob es auf jeder Stufe besteht – bevor Nutzer mit schwächeren Bildschirmen es Ihnen vorführen.

Ein Gamut, drei Notationen

sRGB ist der Standard-Farbraum des Webs: das Spektrum, das ein typisches Display zeigt, definiert so, dass jeder Browser – vom Smartphone bis zum kalibrierten Studiomonitor – mit denselben Zahlen dieselbe Farbe meint. Jeder Kanal läuft von 0 bis 255, deshalb wurden 16.777.216 Farben (256 hoch 3) als Größe der Web-Palette zitiert. Eine Notation ist nur eine Benutzeroberfläche für diese drei Zahlen – und für Alpha, eine vierte Zahl, die die Deckkraft steuert.

Weil alle drei Notationen auf denselben Kanälen landen, ist die Umwandlung zwischen ihnen exakte Arithmetik, nie eine Annäherung. Ein Werkzeug, das #FF6600 als hsl(24, 100%, 50%) ausgibt, bietet keine Meinung an; es macht dieselbe Algebra, die die CSS-Spezifikation definiert. Deshalb hat auch das Format, in dem Sie schreiben, null Einfluss auf das Rendering – es geht rein um den Menschen, der die Zeile bearbeitet.

FormatNotiert alsAlpha-VarianteAm bequemsten für
HEX#FF6600 oder #F60#FF6600AA (8 Ziffern)Werte 1:1 zwischen Werkzeugen kopieren
RGBrgb(255, 102, 0)rgba(255, 102, 0, 0.67)Denken in Lichtmengen pro Kanal
HSLhsl(24, 100%, 50%)hsl(24 100% 50% / 0.67)Farbton drehen oder Hell- und Dunkelabstufungen bauen
color()color(srgb 1 0.4 0)color(srgb 1 0.4 0 / 0.67)Einen Farbraum explizit benennen, über sRGB hinaus

HEX: kompakt, portabel, intransparent

Ein sechsstelliger HEX-Code besteht aus drei Bytes in Hexadezimalnotation: FF ist 255, 66 ist 102, 00 ist null. Diese Form stammt aus dem frühesten HTML und überlebt, weil sie als Bezeichner unerreicht ist – kurz, eindeutig, ohne Anführungszeichen. Stimmen die beiden Ziffern eines Kanals überein (FF, 66, 00), akzeptiert CSS auch drei Ziffern: #F60. Seit CSS Color 4 hängen zwei weitere Ziffern Alpha an: #FF6600AA ist dasselbe Orange mit rund 67% Deckkraft.

Die Schwäche von HEX ist die Zusammensetzung. Sehen Sie #FF6600 an und fragen, wie es 15% dunkler aussieht oder was seine Komplementärfarbe ist, verlangt die Antwort, Hexadezimal im Kopf zu dekodieren. #FF6600 von Hand abzudunkeln hat eine Generation von #E65C00-Schätzungen hervorgebracht. HEX ist das Format zum Speichern einer Farbe, nicht das Format zum Nachdenken über eine – genau für diese Lücke wurde HSL erfunden.

RGB: das additive Modell, schlicht gesagt

Bildschirme reflektieren keine Farbe; sie senden Licht, und RGB ist additiv: Schwarz ist überall aus, Weiß ist überall an, und jede Farbe ist eine Mischung. rgb(255, 102, 0) sagt es schlicht – volles Rot, etwas Grün, kein Blau. Das ist die Notation, die zur Physik passt, was sie zur natürlichen Wahl macht, wenn Sie einen gerenderten Wert debuggen, Bilddaten lesen oder Licht selbst mischen (zwei RGB-Farben zu addieren ergibt ein helleres Ergebnis, das Gegenteil vom Mischen von Farben).

Seine Alpha-Form, rgba(), ist älter als die 8-stellige HEX-Variante. CSS Color 4 modernisierte auch die Syntax: rgb(255 102 0 / 0.67) – Leerzeichen und ein Schrägstrich statt Kommas – ist äquivalent, und das a ist inzwischen optional, weil rgb() vier Werte akzeptiert. Browser unterstützen beide Schreibweisen seit etwa 2023.

HSL: das menschenlesbare Farbrad

HSL schreibt dieselben Kanäle als Farbton (einen Winkel auf dem Farbrad, 0 bis 360: Rot bei 0, Grün bei 120, Blau bei 240), Sättigung (0% ist grau, 100% ist voll satt) und Helligkeit (0% schwarz, 100% weiß) um. Seine Superkraft sind lesbare Beziehungen. Brauchen Sie einen Hover-Zustand, 10% heller? hsl(24, 100%, 50%) wird zu hsl(24, 100%, 60%) – eine Zahl bewegt, die Absicht im Diff sichtbar. Brauchen Sie eine Marken-Skala in fünf Stufen? Farbton und Sättigung halten, Helligkeit variieren. In HEX ist jede dieser Bearbeitungen eine Neuberechnung.

Die ehrliche Einschränkung: Die Helligkeit von HSL ist nicht perzeptiv. hsl(60, 100%, 50%) (Gelb) und hsl(240, 100%, 50%) (Blau) geben beide 50% Helligkeit an, doch das Gelb leuchtet, während das Blau fast schwarz wirkt. Auf HSL-Helligkeit gebaute Skalen sehen daher fürs Auge ungleichmäßig aus. CSS Color 4 fügte oklch() hinzu, um genau das zu beheben – eine zylindrische Notation, deren Helligkeit der menschlichen Wahrnehmung entspricht, sodass gleiche Schritte gleich aussehen. Für gleichmäßige Skalen ist oklch die moderne Antwort; die Farbwerkzeuge dieser Website berechnen Verläufe in OKLab, dem perzeptiven Raum dahinter.

FarbtonWinkelGeläufige Assoziationen
Rot0°Alarme, Fehler, Appetit
Gelb60°Warnungen, Energie
Grün120°Erfolg, Sicherheit, Wachstum
Cyan180°Information, Ruhe
Blau240°Vertrauen, Links, Fokus
Magenta300°Akzente, Kreativität

Alpha und die moderne Funktion color()

Jede Notation oben trägt Alpha auf dieselbe Weise: als Bruchteil der Deckkraft von 0 bis 1. Die Schreibweisen unterscheiden sich – #RRGGBBAA verpackt ihn hexadezimal (AA ist 170, etwa zwei Drittel deckend), rgba() und hsla() nehmen einen kommagetrennten Bruch, und die moderne Syntax mit Leerzeichen schreibt ihn hinter einen Schrägstrich. Alle liefern identische Ergebnisse; die 8-stellige HEX-Form ist schlicht die kompakteste und die, die Design-Werkzeuge am häufigsten exportieren.

color() ist der größere Wandel. Die Funktion nennt den Farbraum explizit – color(srgb r g b) ist das vertraute Gamut ausgeschrieben, color(display-p3 ...) adressiert das weitere Gamut moderner Bildschirme, und color(oklch ...) legt das perzeptive Modell offen. sRGB bleibt der sichere Standard – Inhalte, die darin entstehen, rendern überall vorhersagbar –, während display-p3-Farben nur dort ankommen, wo die Syntax unterstützt wird, im Wesentlichen allen Evergreen-Browsern seit 2023.

  • #RRGGBBAA – Alpha in Hex, AA = 170 ≈ 67% Deckkraft.
  • rgba(255, 102, 0, 0.67) – ältere Komma-Syntax, weiterhin überall unterstützt.
  • rgb(255 102 0 / 0.67) – CSS-Color-4-Syntax; das a ist inzwischen optional.
  • color(display-p3 1 0.4 0 / 0.67) – Farbe mit größerem Gamut, Farbraum vorne benannt.

Kontrast: die Prüfung, die über dem Geschmack steht

Keine Notationswahl zählt, wenn Nutzer den Text nicht lesen können. Der WCAG-Kontrast verlangt ein Verhältnis von mindestens 4.5:1 zwischen Text und Hintergrund für normalen Text auf AA-Niveau, 3:1 für großen Text (grob 24 px normal oder 19 px fett und aufwärts) und 7:1 für die strengere AAA-Stufe. Das Verhältnis wird aus der relativen Luminanz berechnet, einer Eigenschaft der Farbe selbst – die Notation, in der Sie sie notiert haben, ist egal; noch ein Grund, warum all diese Formate dieselbe Farbe sind.

Der praktische Ablauf ist mechanisch: Wählen Sie Farben, wie Sie mögen, und prüfen Sie Paare, bevor Sie ausliefern. Fließtext über seinem Hintergrund, Platzhaltertext über Eingabefeldern, weißer Text über der Markenfarbe – jedes Paar braucht seine Zahl. Ein Kontrast-Checker meldet sie sofort – das ist billiger, als eine unzugängliche Palette unter Termindruck nachzurüsten.

Häufig gestellte Fragen

Laden die Farbwerkzeuge auf dieser Seite hoch, was ich einfüge?

Nein. Umwandeln, Wählen und Kontrastprüfungen laufen allesamt als JavaScript in Ihrem Browser-Tab – es gibt keinen Upload-Schritt. Prüfen Sie es in den DevTools: Öffnen Sie das Netzwerk-Panel, wandeln Sie etwas um und sehen Sie zu, wie die Anfrageliste leer bleibt. Die Content-Security-Policy der Website verbietet auch Seitenskripten ausgehende Verbindungen.

Liefern HEX und RGB jemals unterschiedliche Farben?

Niemals, solange beide sRGB beschreiben. #FF6600 und rgb(255, 102, 0) sind byte-identisch dieselben drei Kanalwerte, und die Umwandlung zwischen den Notationen ist definierte Arithmetik. Unterschiede erscheinen nur, wenn ein Farbraum explizit benannt wird – color(display-p3 ...) erreicht Farben, die sRGB nicht darstellen kann, was eine Eigenschaft des Raums ist, nicht der Notation.

Welches Format sollte ich in meinem CSS verwenden?

HEX für Werte, die als Bezeichner gespeichert und kopiert werden – Marken-Tokens, Design-System-Variablen. HSL, wenn der Wert abgeleitet wird: Hover-Zustände, Hell- und Dunkelabstufungen, Themes, die den Farbton drehen. RGB passt zu bildnaher Arbeit und überall dort, wo Kanalwerte das mentale Modell sind. Konsistenz innerhalb einer Codebase schlägt jede einzelne richtige Antwort.

Was ist #RRGGBBAA und wann sollte ich es verwenden?

Ein 8-stelliger HEX-Code, dessen letzte zwei Ziffern Alpha sind: 00 voll transparent, FF voll deckend, AA etwa 67%. Es ist das kompakte Gegenstück zu rgba(255, 102, 0, 0.67) und wird überall dort unterstützt, wo auch das ältere rgba() läuft. Greifen Sie dazu, wenn ein Design-Werkzeug Ihnen acht Ziffern in die Hand drückt.

Entspricht die Helligkeit in HSL dem, wie hell eine Farbe wirkt?

Nein, und das ist die Falle, die Palettenbauer erwischt. HSL-Helligkeit ist eine mathematische Umabbildung der RGB-Kanäle, keine perzeptive: Gelb und Blau bei denselben 50% Helligkeit sehen sich himmelweit verschieden an. Für gleichmäßig aussehende Skalen verwenden Sie oklch() aus CSS Color 4, dessen Helligkeit der menschlichen Wahrnehmung folgt – oder ein Werkzeug, dessen Verläufe in einem perzeptiven Raum berechnet werden, wie es auf dieser Seite der Fall ist.

Welches Kontrastverhältnis brauche ich für Barrierefreiheit?

WCAG AA verlangt 4.5:1 für normalen Text und 3:1 für großen Text (etwa 24 px normal oder 19 px fett und aufwärts); AAA erhöht das auf 7:1 und 4.5:1. Das Verhältnis stammt aus der relativen Luminanz, die Notation ist also egal. Prüfen Sie jedes Text-Hintergrund-Paar, auch Platzhalter und deaktivierte Zustände.

Wo kann ich die hier zitierten Standards nachlesen?

ToolsByUs-Team · Wie wir unsere Tools prüfen