Zum Inhalt springen

CSS

Der ultimative CSS-Farbleitfaden: HEX vs. RGB vs. HSL

5 min read

Der ultimative CSS-Farbleitfaden: HEX vs. RGB vs. HSL

Farbe ist der grundlegende Baustein des Webdesigns. Sie bestimmt die Stimmung einer Website, lenkt die Interaktion der Benutzer, etabliert die Markenidentität und wirkt sich direkt auf Lesbarkeit und Barrierefreiheit aus. Wenn Entwickler sich jedoch hinsetzen, um CSS zu schreiben, stehen sie sofort vor einer technischen Entscheidung: Wie soll ich meine Farben deklarieren?

Jahrzehntelang verließ sich das Web fast ausschließlich auf HEX-Codes. Dann wurde RGB (und RGBA) zum Standard für den Umgang mit Transparenz. In jüngerer Zeit hat sich HSL als der Liebling der modernen, skalierbaren CSS-Architektur herauskristallisiert.

Aber was genau bedeuten diese Akronyme? Sind es nur verschiedene Möglichkeiten, genau dasselbe zu schreiben, oder erfüllen sie in der Frontend-Entwicklung spezifische, taktische Zwecke?

In diesem umfassenden Leitfaden werden wir die Mechanik von HEX, RGB und HSL aufschlüsseln. Wir werden untersuchen, wie Computer Farbe verstehen, die Vor- und Nachteile der einzelnen Formate analysieren und, was am wichtigsten ist, die modernen Best Practices für die Auswahl des richtigen Farbformats für Ihr nächstes Projekt aufzeigen.

1. HEX (Hexadezimal)

Das hexadezimale Farbformat ist der Urvater der Webfarben. Wenn Sie jemals Photoshop benutzt oder das CSS einer älteren Website untersucht haben, haben Sie einen HEX-Code gesehen. Er sieht so aus: #FF5733.

Wie HEX funktioniert

"Hexadezimal" ist ein Basis-16-Zahlensystem. Während unser normales Zählsystem 10 Ziffern (0-9) verwendet, verwendet das hexadezimale System 16 Ziffern (0-9 sowie A, B, C, D, E und F).

Ein Standard-HEX-Farbcode besteht aus einem Raute-Zeichen # gefolgt von sechs Zeichen. Diese sechs Zeichen sind eigentlich drei Zweierpaare:

  • Paar 1 (Rot): FF
  • Paar 2 (Grün): 57
  • Paar 3 (Blau): 33

00 bedeutet, dass diese Farbe absolut nicht vorhanden ist. FF bedeutet, dass die Farbe in ihrer absoluten maximalen Intensität vorliegt. Daher ist #FF0000 reines Rot, #00FF00 reines Grün und #000000 reines Schwarz (die Abwesenheit jeglichen Lichts).

Transparenz zu HEX hinzufügen

Im modernen CSS können Sie einem HEX-Code Transparenz (Alpha) hinzufügen, indem Sie am Ende zwei weitere Zeichen anhängen und so einen 8-stelligen Code erstellen. Beispielsweise wendet #FF573380 eine Deckkraft von 50 % auf die Farbe an (80 im Hexadezimalsystem ist ungefähr die Hälfte bis zu FF).

Vorteile von HEX

  • Unglaublich prägnant: Es ist kurz, lässt sich leicht kopieren und einfügen und wirkt in einem Stylesheet optisch kompakt.
  • Universelle Unterstützung: Buchstäblich jeder Browser, jedes Designtool und jedes Legacy-System unterstützt HEX-Codes perfekt.

Nachteile von HEX

  • Für Menschen unlesbar: Es sei denn, Sie sind ein Cyborg, können Sie #8A2BE2 nicht ansehen und sofort wissen, dass es ein Lilaton ist.
  • Mental schwer zu manipulieren: Wenn Sie einen HEX-Code für einen blauen Button (#0055FF) haben und diesen für einen Hover-Zustand (beim Darübergleiten mit der Maus) 20 % dunkler machen möchten, können Sie diese Mathematik nicht im Kopf durchführen. Sie müssen ein Color-Picker-Tool (Farbauswahl) öffnen, einen dunkleren Farbton finden und den neuen HEX-Code kopieren.

2. RGB (Rot, Grün, Blau)

RGB ist die Art und Weise, wie digitale Bildschirme physikalisch Farbe erzeugen. Jeder Pixel auf Ihrem Monitor besteht aus drei winzigen Subpixeln: einem roten, einem grünen und einem blauen.

Wie RGB funktioniert

In CSS verwendet die Funktion rgb() ein Basis-10-System (Standardzahlen). Anstelle von 00 bis FF verwendet RGB Zahlen von 0 bis 255.

Die Syntax sieht so aus: rgb(255, 87, 51).

  • Rot: 255 (Maximum)
  • Grün: 87
  • Blau: 51

Reines Rot ist rgb(255, 0, 0). Reines Weiß (alle Farben leuchten mit maximaler Intensität) ist rgb(255, 255, 255).

Transparenz zu RGB hinzufügen

Historisch gesehen haben Sie rgba() verwendet, um einen Alpha-Kanal hinzuzufügen. Heute erlaubt Ihnen das moderne CSS, einfach rgb() zu verwenden und einen Schrägstrich für die Deckkraft hinzuzufügen: rgb(255 87 51 / 0.5) (Dies wendet eine Deckkraft von 50 % an).

Vorteile von RGB

  • Stimmt mit Hardware überein: Es repräsentiert genau, wie Monitore Farben anzeigen.
  • Etwas lesbarer als HEX: Es ist etwas einfacher zu erraten, dass rgb(200, 0, 0) ein dunkles Rot ist, als zu erraten, dass es #C80000 ist.
  • Animationsfreundlich: Browsern fällt es mathematisch leichter, Übergänge zwischen zwei RGB-Werten zu animieren als bei HEX-Werten.

Nachteile von RGB

  • Immer noch schwer zu manipulieren: Genau wie bei HEX können Sie, wenn Sie rgb(255, 87, 51) 20 % dunkler machen möchten, nicht einfach alle drei Zahlen gleichmäßig verringern, da dies den tatsächlichen Farbton (die Farbe selbst) verändert und nicht nur die Helligkeit.

3. HSL (Hue, Saturation, Lightness / Farbton, Sättigung, Helligkeit)

HSL ist der moderne Champion der CSS-Farben. Im Gegensatz zu HEX und RGB, die für Computer gebaut wurden, ist HSL für Menschen gebaut. Es beschreibt Farbe auf eine Weise, die der Wahrnehmung des menschlichen Gehirns entspricht.

Wie HSL funktioniert

Die Funktion hsl() nimmt drei verschiedene Werte an:

  1. Hue (Farbton): Ein Grad auf dem Farbkreis von 0 bis 360.
    • 0 (oder 360) ist Rot.
    • 120 ist Grün.
    • 240 ist Blau.
  2. Saturation (Sättigung): Ein Prozentsatz von 0% bis 100%.
    • 0 % ist komplett ausgewaschen (grau).
    • 100 % ist die lebendigste, reinste Version der Farbe.
  3. Lightness (Helligkeit): Ein Prozentsatz von 0% bis 100%.
    • 0 % ist pechschwarz.
    • 50 % ist die "normale" Farbe.
    • 100 % ist reines Weiß.

Syntax-Beispiel: hsl(14, 100%, 60%)

Transparenz zu HSL hinzufügen

Genau wie beim modernen RGB können Sie einen Alpha-Kanal mithilfe eines Schrägstrichs hinzufügen: hsl(14 100% 60% / 0.5)

Vorteile von HSL (Warum Entwickler es lieben)

  • Menschenlesbar: Wenn Sie hsl(240, ...) sehen, wissen Sie sofort, dass es Blau ist.
  • Unglaublich einfach zu manipulieren: Das ist die Superkraft von HSL. Wenn Sie eine primäre Button-Farbe von hsl(240, 80%, 50%) haben und einen Hover-Zustand wünschen, der 10 % dunkler ist, benötigen Sie keine Farbauswahl. Sie ändern einfach die Helligkeit: hsl(240, 80%, 40%).
  • Das Fundament von Design-Systemen: Da HSL mathematisch so einfach zu manipulieren ist, ist es das absolut beste Format zum Generieren von Farbpaletten, CSS-Variablen und dynamischen Themes (wie dem Dark Mode).

Nachteile von HSL

  • Etwas ausführlicher: Es nimmt in einer CSS-Datei mehr Zeichen ein als ein 6-stelliger HEX-Code.
  • Alte Werkzeuge (Legacy Tooling): Obwohl es in modernen Browsern zu 100 % unterstützt wird, exportieren einige sehr alte Grafikdesign-Tools Assets (Bilder) möglicherweise ausschließlich in HEX oder RGB.

Welches Format sollten Sie verwenden? (Best Practices)

Welche der drei verschiedenen Möglichkeiten, eine Farbe zu deklarieren, sollten Sie für Ihr nächstes Projekt wählen? Hier sind die modernen Industriestandards:

1. Aufbau einer UI-Komponentenbibliothek oder eines Design-Systems? Verwenden Sie HSL.

Wenn Sie ein globales Theme mithilfe von CSS Custom Properties (Variablen) definieren, ist HSL obligatorisch. Es ermöglicht Ihnen, eine einzige Basis-"Hue"-Variable (Farbton) zu definieren und dann alle Ihre Schattierungen (hell, dunkel, Hover, aktiv, Rahmen) zu berechnen, indem Sie einfach den Prozentsatz der Helligkeit mit CSS calc() anpassen.

:root {
  --brand-hue: 220; /* Ein schönes Blau */
  --color-primary: hsl(var(--brand-hue), 80%, 50%);
  --color-primary-hover: hsl(var(--brand-hue), 80%, 40%);
  --color-primary-light: hsl(var(--brand-hue), 80%, 90%);
}

Wenn Ihr Kunde plötzlich beschließt, dass die Markenfarbe jetzt Grün statt Blau ist, ändern Sie nur --brand-hue: 120;, und die gesamte Benutzeroberfläche wird perfekt aktualisiert. Das können Sie mit HEX oder RGB nicht tun.

2. Copy & Paste aus einer Design-Übergabe? Verwenden Sie HEX.

Wenn Ihnen ein Designer eine Figma-Datei übergibt und Ihre einzige Aufgabe darin besteht, eine statische Marketing-Landingpage nachzubauen, ist HEX völlig in Ordnung. Es lässt sich schnell kopieren, schnell einfügen und hält Ihre CSS-Dateien optisch aufgeräumt.

3. Umgang mit komplexer Farbmanipulation über JavaScript? Verwenden Sie RGB.

Wenn Sie eine komplexe Datenvisualisierung oder ein HTML5-Canvas-Spiel erstellen oder eine Bibliothek wie Three.js verwenden, wird oft RGB bevorzugt. Die zugrunde liegenden WebGL-APIs und Canvas-Pixelmanipulationsalgorithmen berechnen die Farbe mithilfe von 0-255-RGB-Matrizen.

Fazit

Das Verständnis des Unterschieds zwischen HEX, RGB und HSL ist mehr als nur CSS-Syntax; es geht darum, das richtige Werkzeug für die jeweilige Aufgabe auszuwählen.

  • HEX ist der alte König: schnell, prägnant und universell von jedem Tool der Welt verstanden.
  • RGB ist der Hardware-Standard: perfekt für programmatische Pixelmanipulation und Canvas-Grafiken.
  • HSL ist der beste Freund des modernen Entwicklers: für Menschen lesbar, unendlich skalierbar und der unangefochtene Champion von CSS-Design-Systemen und dynamischem Theming.

Da sich das Web in Richtung komplexerer, anpassbarer und benutzerdefinierbarer Oberflächen bewegt, sollte HSL Ihre Standardwahl für die moderne Frontend-Entwicklung sein. Wenn Sie HSL beherrschen, beherrschen Sie die Farbarchitektur im Web.

Buy me a coffee