Eine Farbe zwischen RGB, HSL und hexadezimal konvertieren

Die Arbeit mit Farben im Web bedeutet, ständig zwischen mehreren Notationen zu wechseln. Ein Farbkonverter vermeidet manuelle Fehler und ermöglicht den sofortigen Wechsel von einem Format zum anderen, je nach Verwendungskontext. Jedes Format hat seine Stärken, und zu wissen, welches zu verwenden ist, gehört zum Handwerkszeug eines Frontend-Entwicklers.

Hier sind die typischen Anwendungsfälle, die eine Farbkonvertierung erforderlich machen:

• RGB ist nativ in CSS und JavaScript, gut lesbar, um eine dominante Farbe zu erkennen (Kanäle Rot, Grün, Blau auf 0 bis 255).
• HSL macht die Anpassung eines Farbtons trivial: Sie passen einfach Sättigung oder Helligkeit an, ohne jeden Kanal neu zu berechnen.
• HEX ist das kanonische Format zum Kopieren und Einfügen: sechs Zeichen, überall kompatibel, ideal für Figma-Mockups, Sketch oder Styleguides.
• Die Konvertierungen HEX zu RGB, RGB zu HEX, HEX zu HSL und ihre Umkehrungen sind die häufigsten Operationen in CSS und JavaScript.

RGB und RGBA (Red, Green, Blue, Alpha)

Jeder Kanal wird als ganze Zahl zwischen 0 und 255 kodiert, was einem Byte pro Komponente entspricht und 16.777.216 mögliche Farben ergibt. Der Alpha-Kanal von RGBA reicht von 0 (transparent) bis 1 (opak) und steuert die Transparenz.

.bouton {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX und HEX8 (hexadezimale Notation)

Sehr verbreitetes Kompaktformat: #RRGGBB mit sechs Zeichen, wobei jedes Paar einen RGB-Kanal in Basis 16 darstellt. Die Variante #RRGGBBAA mit acht Zeichen fügt den Alpha-Kanal in hexadezimaler Form hinzu (00 transparent, FF opak). Die Kurzform #RGB existiert ebenfalls: #F53 entspricht #FF5533.

.titre  { color: #1400B6; }
.ombre  { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* forme courte */

HSL und HSLA (Hue, Saturation, Lightness, Alpha)

HSL beschreibt Farbe auf wahrnehmungsbasierte Weise. Hue ist ein Winkel auf dem Farbkreis (0 bis 360 Grad), Saturation und Lightness sind Prozentwerte. Es ist das bevorzugte Format zum Erzeugen von Varianten: einen Hover-Button aufhellen, einen deaktivierten Zustand entsättigen, eine kohärente Palette nur durch Veränderung des Farbtons erstellen.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* plus clair */
$primary-muted: hsl(247, 30%, 36%);    /* moins saturé */

Andere existierende Formate

CMYK (Cyan, Magenta, Yellow, Key) wird im Druck verwendet: Es beschreibt eine Farbe durch Subtraktion von Druckfarben und ist nicht relevant für den Bildschirm. OKLCH und LAB sind wahrnehmungseinheitliche Räume, die in CSS Color Level 4 eingeführt wurden; sie bieten eine bessere Kontrolle über die empfundene Helligkeit. Dieses Tool konzentriert sich auf RGB-, HEX- und HSL-Konvertierungen, die den überwiegenden Teil der Webanforderungen abdecken.

HEX zu RGB bedeutet, die Zeichenkette in Zeichenpaare zu zerlegen und jedes Paar als ganze Zahl in Basis 16 zu interpretieren:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB zu HEX ist die umgekehrte Operation: Jeder Kanal wird in Basis 16 umgewandelt, auf zwei Zeichen aufgefüllt und dann verkettet.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB zu HSL ist algorithmischer. Die Kanäle werden zwischen 0 und 1 normalisiert, min und max werden berechnet, um die Helligkeit, dann die Sättigung und schließlich den Farbton anhand des dominanten Kanals abzuleiten. Die vollständige Formel ist in der Spezifikation CSS Color Module Level 3 dokumentiert.

Das Tool funktioniert in beide Richtungen zwischen RGB, HEX und HSL. Um eine Konvertierung durchzuführen:

1. Wählen Sie das Eingabeformat: RGB, HEX oder HSL.
2. Geben Sie den Wert ein (zum Beispiel #1400B6, rgb(20, 0, 182) oder hsl(247, 100%, 36%)).
3. Starten Sie die Konvertierung: Die Entsprechungen in den beiden anderen Formaten werden sofort angezeigt.
4. Kopieren Sie das gewünschte Ergebnis über die dedizierte Schaltfläche und fügen Sie es in Ihr Stylesheet oder Ihr Mockup ein.

Die Berechnung wird im Browser ausgeführt, es werden keine Daten an einen Server gesendet.

• Webdesign und CSS: einen HEX-Wert aus einem Mockup übernehmen und den entsprechenden HSL-Wert berechnen, um einen Hover- oder Active-Zustand zu erzeugen, ohne den Farbton zu verändern.
• Visuelle Identität und Palette: eine Primärfarbe in mehrere Varianten ableiten (hell, dunkel, gedämpft), indem Helligkeit oder Sättigung in HSL angepasst werden.
• Illustration und Grafik: eine Bildschirmfarbe (RGB) in einen Hex-Code umsetzen, der an eine Software oder einen Kunden weitergegeben wird.
• Barrierefreiheit: in RGB konvertieren, um anschließend ein Kontrastverhältnis (WCAG AA verlangt 4,5:1 für normalen Text) mit der Hintergrundfarbe zu berechnen.
• CSS-Variablen und Präprozessoren: Design-Tokens in einer SASS-Datei oder einem Tailwind-Theme aus einer einzigen Referenzfarbe ableiten.

Einige vollständige Konvertierungen zur Veranschaulichung der Entsprechung zwischen den drei Formaten:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

Mit Alpha-Kanal:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

Was ist der Unterschied zwischen HEX und HEX8?

Klassisches HEX kodiert drei RGB-Kanäle in sechs Zeichen (#RRGGBB). HEX8 fügt zwei Zeichen für den Alpha-Kanal hinzu (#RRGGBBAA), wodurch die Transparenz in einer einzigen Zeichenkette verwaltet werden kann. #1400B6FF und #1400B6 ergeben visuell dieselbe, opake Farbe.

Sollte man HSL oder RGB in CSS bevorzugen?

Beide sind im Rendering gleichwertig. HSL ist ausdrucksstärker für die Erzeugung einer kohärenten Palette oder von Zustandsvarianten (Hover, Focus), weil nur ein wahrnehmbarer Parameter geändert wird. RGB bleibt praktisch, wenn man mit Daten aus einem Canvas oder einem Sensor arbeitet.

Warum ergibt mein HEX-Code einen anderen Farbton als erwartet?

Drei häufige Ursachen: Verwechslung zwischen der kurzen #RGB-Form und der langen #RRGGBB-Form (die Zeichen werden dupliziert, nicht verkettet), Kopierfehler bei einem Zeichen oder Anzeige auf einem nicht kalibrierten Monitor. Prüfen Sie auch, ob Ihr CSS nicht eine übergeordnete Deckkraft überlagert, die das Endergebnis verändert.

Wozu dient der Alpha-Kanal von RGBA und HSLA?

Der Alpha-Kanal steuert die Deckkraft der Farbe, von 0 (vollständig transparent) bis 1 (vollständig opak). Er ist nützlich für Overlays, Schatten, deaktivierte Zustände oder Überlagerungen auf Bildern. Im Gegensatz zur CSS-Eigenschaft opacity wirken sich RGBA und HSLA nur auf die gezielte Farbe aus, nicht auf ihre Kindelemente.

Kann man eine Farbe verlustfrei konvertieren?

Zwischen RGB und HEX ist die Konvertierung exakt, beide Formate kodieren dieselbe Information mit 24 Bit. Die Konvertierung nach HSL beinhaltet Rundungen bei Farbton, Sättigung und Helligkeit; ein Hin- und Rückweg RGB > HSL > RGB kann also einen um eine Einheit verschobenen Wert auf einigen Kanälen zurückgeben.

Warum einen Online-Konverter verwenden statt einer eigenen Funktion?

Für einen punktuellen Test, das Prototyping einer Palette oder die schnelle Prüfung des HEX-Äquivalents einer aus einem Mockup extrahierten HSL-Farbe ist ein Online-Konverter sofort verfügbar. Für eine wiederkehrende programmatische Anforderung bleibt eine Bibliothek wie color, chroma-js oder tinycolor2 besser geeignet.