CSS-Farben konvertieren: HEX zu RGB zu HSL — Online-Guide
In CSS gibt es mehrere Möglichkeiten, Farben zu definieren — und jedes Format hat seine Stärken. HEX ist kompakt und universell, RGB ist intuitiv für Programmierlogik, HSL ist ideal für dynamische Farbmanipulation. Wer alle drei Formate versteht und sicher zwischen ihnen konvertieren kann, hat einen echten Vorteil bei der Frontend-Entwicklung. Der WikiPlus Farbauswahl-Tool konvertiert automatisch zwischen allen Formaten und spart so lästige manuelle Berechnungen.
HEX-Farben in CSS: Syntax und Verwendung
HEX-Farben sind das am häufigsten verwendete Format in CSS und HTML. Die sechsstellige Form #RRGGBB definiert Rot-, Grün- und Blauanteile jeweils als zweistellige Hexadezimalzahl von 00 bis FF (0 bis 255 dezimal). Die Kurzform funktioniert, wenn beide Stellen jedes Kanals gleich sind: #RGB — z.B. #FF6600 wird zu #F60. Seit CSS3 gibt es auch die achtstellige Form #RRGGBBAA mit Alpha-Kanal für Transparenz: #FF660080 ist das genannte Orange mit 50% Transparenz. HEX-Farben sind in allen Browsern ohne Präfix unterstützt und eignen sich besonders für feste Farben wie Markenwerte. Nachteil: Man kann Transparenz nicht mit CSS-Variablen kombinieren — dafür ist rgb() oder hsl() mit separatem Alpha-Kanal flexibler.
RGB und RGBA in CSS: Wann man sie bevorzugen sollte
Die rgb()-Funktion in CSS erwartet drei Werte von 0-255: color: rgb(255, 102, 0). Die rgba()-Funktion fügt Transparenz hinzu: background: rgba(255, 102, 0, 0.5) für 50% Transparenz. Seit CSS Color Level 4 (weitgehend unterstützt in modernen Browsern) kann man auch die Kurzform ohne Kommata verwenden: rgb(255 102 0) oder rgb(255 102 0 / 50%). RGB ist besonders nützlich, wenn Farbwerte dynamisch in JavaScript berechnet werden: man kann die R-, G- und B-Werte separat berechnen und zu einem rgb()-String zusammensetzen. Auch für Animationen und Übergänge zwischen Farben ist RGB gut geeignet, weil man die Kanäle unabhängig animieren kann.
HSL in CSS: Farben intuitiv manipulieren
HSL (Hue, Saturation, Lightness) ist das entwicklerfreundlichste Farbformat in CSS. Der Farbton (Hue) ist ein Winkel auf dem Farbkreis von 0 bis 360 Grad — 0/360 ist Rot, 120 ist Grün, 240 ist Blau. Sättigung und Helligkeit sind Prozentwerte von 0 bis 100. Das Mächtige an HSL: Man kann systematisch Farbvarianten erstellen, indem man nur die Helligkeit ändert. Beispiel für ein Blau-Farbsystem: --blue-50: hsl(220, 90%, 95%); --blue-100: hsl(220, 85%, 90%); ... --blue-700: hsl(220, 80%, 35%); --blue-900: hsl(220, 85%, 20%). Alle Töne sind erkennbar verwandt, aber decken den gesamten Helligkeitsbereich ab. Mit dem WikiPlus Farbauswahl-Tool lassen sich solche Farbsysteme schnell entwickeln.
CSS Custom Properties (Variablen) mit Farben kombinieren
CSS Custom Properties (auch CSS-Variablen) sind ein mächtiges Werkzeug für konsistentes Farbmanagement in großen Projekten. Die Syntax: :root { --primary: #0011ff; --primary-light: hsl(231, 100%, 70%); } und dann: color: var(--primary). Für maximale Flexibilität kann man HSL-Komponenten separat als Variablen speichern: :root { --primary-hue: 231; --primary-sat: 100%; --primary-light: 50%; } und dann: color: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light)). Dark Mode per CSS: @media (prefers-color-scheme: dark) { :root { --bg: #1a1a2e; --text: #e0e0e0; } }. Dieser Ansatz erlaubt es, das gesamte Farbschema an einem Ort zu verwalten und Theme-Switching zu implementieren.
Häufig gestellte Fragen
- Wie konvertiere ich einen HEX-Wert manuell zu RGB?
- Teile die 6 HEX-Zeichen in drei Paare: RR, GG, BB. Konvertiere jedes Paar von Hexadezimal zu Dezimal. Beispiel: #FF6600 → R=FF=255, G=66=102, B=00=0 → rgb(255, 102, 0). Der WikiPlus Farbauswahl-Tool macht das automatisch.
- Welches Farbformat ist am besten für CSS-Animationen geeignet?
- Alle modernen CSS-Farbformate (HEX, RGB, HSL) können in CSS-Animationen verwendet werden. HSL ist oft am komfortabelsten, weil man Helligkeit oder Sättigung animieren kann ohne andere Farbkomponenten zu beeinflussen.
- Unterstützen alle Browser CSS-Farben mit Alpha-Kanal in HEX-Format (#RRGGBBAA)?
- Das 8-stellige HEX-Format mit Alpha wird von allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt. Für Legacy-Browser-Unterstützung (IE11) sollte man rgba() verwenden, da IE11 die achtstellige HEX-Schreibweise nicht unterstützt.