HEX vs RGB vs HSL: Das richtige Farbformat für Ihr Projekt

Farbcodes in der Webentwicklung

Jede Farbe, die Sie im Web sehen, wird durch einen Code dargestellt. Diese Codes zu verstehen ist für Webentwickler und Designer unerlässlich – nicht nur um CSS zu schreiben, sondern auch um mit Designern zu kommunizieren, Layout-Probleme zu debuggen und barrierefreie Benutzeroberflächen zu erstellen.

Es gibt drei Hauptfarbformate, denen Sie täglich begegnen werden: HEX, RGB und HSL. Jedes hat Stärken und Schwächen, und zu wissen, wann man welches verwendet, macht Ihren Alltag deutlich einfacher.

HEX-Farben

HEX (hexadezimal) ist das gebräuchlichste Farbformat im Web. Es existiert seit den frühen Tagen von HTML und Sie werden es überall sehen – in CSS-Dateien, Design-Tools wie Figma und Sketch sowie in Markenrichtlinien.

Format: #RRGGBB

• Jedes Paar repräsentiert Rot, Grün und Blau (0-255)
• Werte reichen von 00 (0) bis FF (255)
• Das #-Präfix teilt dem Browser mit, dass es sich um eine HEX-Farbe handelt

Beispiele

• #FF0000 = Reines Rot
• #00FF00 = Reines Grün
• #0000FF = Reines Blau
• #FFFFFF = Weiß
• #000000 = Schwarz

Kurzschreibweise

Wenn jedes Paar identische Ziffern hat, können Sie kürzen: #FF6633 → #F63

Das funktioniert, weil der Browser jede Ziffer durch Verdoppelung expandiert: #F63 wird zu #FF6633. Aber #F37A21 kann nicht gekürzt werden, weil die Ziffern in jedem Paar unterschiedlich sind.

HEX mit Alpha (Transparenz)

Moderne Browser unterstützen 8-stellige HEX-Codes, bei denen die letzten zwei Ziffern die Deckkraft steuern:

color: #3B82F680;  /* Blau bei 50% Deckkraft */

Der Alpha-Wert 80 in Hexadezimal entspricht 128 im Dezimalsystem, was ungefähr 50% des maximalen Werts 255 ist. Einige häufige Alpha-Werte:

• FF = 100% (vollständig opak)
• BF = 75%
• 80 = 50%
• 40 = 25%
• 00 = 0% (vollständig transparent)

RGB-Farben

RGB steht für Rot, Grün, Blau. Es verwendet Dezimalzahlen (0-255) für jeden Kanal, was viele Menschen intuitiver finden als die Hexadezimalnotation.

Format: rgb(rot, grün, blau)

color: rgb(59, 130, 246);    /* Blau */
color: rgba(59, 130, 246, 0.5);  /* 50% transparentes Blau */

Die moderne RGB-Syntax

CSS hat eine neuere Syntax, die rgba() durch rgb() mit einem optionalen Alpha ersetzt:

/* Moderne Syntax -- funktioniert in allen aktuellen Browsern */
color: rgb(59 130 246);           /* ohne Kommas */
color: rgb(59 130 246 / 0.5);    /* Alpha mit Schrägstrich */
color: rgb(59 130 246 / 50%);    /* Alpha als Prozentsatz */

Diese sauberere Syntax wird in allen modernen Browsern vollständig unterstützt und ist es wert, übernommen zu werden, wenn Sie keine Legacy-Systeme unterstützen müssen.

Warum RGB nützlich ist

RGB glänzt, wenn Sie Farben programmgesteuert manipulieren müssen. Da jeder Kanal eine einfache Zahl von 0 bis 255 ist, lassen sich Farben in JavaScript oder jeder anderen Programmiersprache leicht anpassen:

// Eine Farbe aufhellen, indem alle Kanäle erhöht werden
function lighten(r, g, b, amount) {
  return [
    Math.min(255, r + amount),
    Math.min(255, g + amount),
    Math.min(255, b + amount)
  ];
}

RGB ist auch das native Format für die meisten Farbauswahl-APIs und Bildverarbeitungsbibliotheken, sodass Sie keinen Konvertierungsaufwand haben.

HSL-Farben

HSL steht für Farbton (Hue), Sättigung (Saturation), Helligkeit (Lightness). Es ist für Menschen intuitiver, weil es eng damit übereinstimmt, wie wir tatsächlich über Farbe nachdenken.

Format: hsl(farbton, sättigung%, helligkeit%)

• Farbton: 0-360 (Position auf dem Farbrad)
  • 0/360 = Rot
  • 120 = Grün
  • 240 = Blau
• Sättigung: 0-100% (grau bis lebhaft)
  • 0% = vollständig entsättigt (grau)
  • 100% = vollständig gesättigt (lebendige Farbe)
• Helligkeit: 0-100% (schwarz bis weiß)
  • 0% = reines Schwarz
  • 50% = die reine Farbe
  • 100% = reines Weiß

color: hsl(217, 91%, 60%);   /* Blau */
color: hsl(0, 100%, 50%);    /* Rot */
color: hsl(120, 100%, 50%);  /* Grün */

Warum HSL ein Wendepunkt für Design-Systeme ist

Die wahre Stärke von HSL zeigt sich, wenn Sie Farbvariationen erstellen müssen. Angenommen, Ihre primäre Markenfarbe ist hsl(217, 91%, 60%). Eine vollständige Farbskala zu erstellen ist trivial:

:root {
  --blue-50:  hsl(217, 91%, 97%);   /* Fast weiß */
  --blue-100: hsl(217, 91%, 93%);
  --blue-200: hsl(217, 91%, 84%);
  --blue-300: hsl(217, 91%, 72%);
  --blue-400: hsl(217, 91%, 60%);   /* Basisfarbe */
  --blue-500: hsl(217, 91%, 50%);
  --blue-600: hsl(217, 91%, 40%);
  --blue-700: hsl(217, 91%, 30%);
  --blue-800: hsl(217, 91%, 20%);
  --blue-900: hsl(217, 91%, 10%);   /* Fast schwarz */
}

Sie behalten den gleichen Farbton und die gleiche Sättigung und passen nur die Helligkeit an. Das Ergebnis ist ein harmonisches Set von Farbtönen, die zusammengehören. Versuchen Sie das mit HEX-Codes – Sie würden einen Rechner oder ein Design-Tool benötigen.

Farbharmonien mit HSL erstellen

Da der Farbton eine Position auf dem Farbrad ist (0-360 Grad), ist das Erstellen von Farbharmonien nur Arithmetik:

• Komplementär: 180 zum Farbton addieren (hsl(217, 91%, 60%) → hsl(37, 91%, 60%))
• Triadisch: 120 und 240 addieren (hsl(217, ...), hsl(337, ...), hsl(97, ...))
• Analog: 30 addieren/subtrahieren (hsl(187, ...), hsl(217, ...), hsl(247, ...))

Das ist einer der Gründe, warum viele Design-Systeme und CSS-Frameworks intern HSL verwenden.

HSL mit Alpha

Wie RGB unterstützt HSL Transparenz:

color: hsl(217, 91%, 60%, 0.5);      /* Alte Syntax */
color: hsl(217 91% 60% / 50%);       /* Moderne Syntax */

CSS-benannte Farben

CSS enthält außerdem 147 benannte Farben wie red, steelblue, papayawhip und rebeccapurple. Sie sind praktisch für das Prototyping oder schnelle Demos, werden aber selten im Produktionscode verwendet, weil:

• Sie unflexibel sind (Helligkeit oder Deckkraft lassen sich nicht einfach anpassen)
• Die Namen irreführend sein können (darkgray ist tatsächlich heller als gray)
• Ihre Markenfarben nie exakt mit einer benannten Farbe übereinstimmen

Das gesagt, sind transparent und currentColor zwei benannte Werte, die wirklich nützlich sind. currentColor erbt die aktuelle Textfarbe, was praktisch für SVG-Icons und Rahmen ist, die zum umgebenden Text passen sollen.

Wann welches Format verwenden

Format	Am besten für
HEX	Schnelle Inline-Farben, meiste CSS, Markenrichtlinien
RGB/RGBA	Programmgesteuerte Farbmanipulation, Canvas-Arbeit
HSL/HSLA	Design-Systeme, Farbskalen erstellen, Theming

Meine praktische Empfehlung: Verwenden Sie HSL als Standard für neue Projekte. Definieren Sie Ihre Themenfarben als HSL-benutzerdefinierte Eigenschaften und Sie erhalten mühelose Hell-/Dunkel-Modus-Umschaltung durch Anpassen der Helligkeitswerte. Beim Einfügen von Farben aus Design-Tools ist HEX in Ordnung – konvertieren Sie es einfach für Ihre Variablen in HSL.

Farbkonvertierungsformeln

HEX zu RGB

Teilen Sie die 6-stellige Hex-Zeichenkette in drei Paare auf und konvertieren Sie jedes von Hexadezimal zu Dezimal:

#3B82F6 → 3B = 59, 82 = 130, F6 = 246 → rgb(59, 130, 246)

RGB zu HSL

Diese Konvertierung beinhaltet mehr Mathematik. Die groben Schritte:

1. R, G, B auf den Bereich 0-1 normalisieren (durch 255 teilen)
2. Maximum- und Minimumwerte finden
3. Helligkeit = (max + min) / 2
4. Wenn max gleich min, ist die Sättigung 0 (grau)
5. Andernfalls Sättigung basierend auf der Helligkeit berechnen
6. Farbton basierend darauf berechnen, welcher Kanal das Maximum ist

Sie müssen das nicht auswendig lernen – verwenden Sie ein Tool. Aber das Verstehen der Beziehung hilft beim Debuggen von Farbproblemen.

Häufige Farbfehler und wie man sie vermeidet

1. Kontrastverhältnisse ignorieren

WCAG 2.1 erfordert ein Mindestkontrestverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Dieser hellgraue Text auf weißem Hintergrund sieht in Ihrem Mockup vielleicht elegant aus, verstößt aber gegen Barrierefreiheitsstandards und ist auf günstigen Monitoren oder in hellem Sonnenlicht wirklich schwer zu lesen.

2. Reines Schwarz auf reinem Weiß

#000000 auf #FFFFFF erzeugt maximalen Kontrast (21:1), der bei längerem Lesen Augenbelastung verursachen kann. Viele Design-Systeme verwenden eine etwas weichere Kombination wie #1a1a1a auf #FAFAFA, die noch WCAG AAA besteht, aber angenehmer für die Augen ist.

3. Farben nicht im Kontext testen

Eine Farbe, die als kleines Muster großartig aussieht, kann überwältigend wirken, wenn sie auf eine große Hintergrundfläche angewendet wird. Testen Sie Ihre Farben immer in der Größe – füllen Sie einen ganzen Bildschirm mit der Hintergrundfarbe und platzieren Sie echten Text darauf, bevor Sie sich festlegen.

4. Zu viele Farben

Ein häufiger Anfängerfehler ist die Verwendung zu vieler verschiedener Farben. Die meisten professionellen Websites beschränken sich auf 2-3 Primärfarben plus eine neutrale Palette (Grautöne). Wenn Sie sich dabei ertappen, nach einer sechsten oder siebten verschiedenen Farbe zu greifen, machen Sie einen Schritt zurück und vereinfachen.

5. Nur auf Farbe verlassen

Verwenden Sie niemals Farbe als einzige Möglichkeit, Informationen zu vermitteln. Wenn Fehlermeldungen nur mit rotem Text gekennzeichnet sind, werden farbenblinde Benutzer (etwa 8% der Männer) sie verpassen. Kombinieren Sie Farbe immer mit Icons, Mustern oder Textbeschriftungen.

Praktischer Farb-Workflow in der Praxis

Hier ist ein praktischer Workflow, der für die meisten Web-Projekte gut funktioniert:

1. Einen primären Farbton wählen in HSL (z.B. hsl(217, 91%, 60%))
2. Eine Farbskala generieren durch Variieren der Helligkeit von 5% bis 97%
3. Ein neutrales Grau wählen mit einem Hauch Ihrer Primärfarbe (z.B. hsl(217, 10%, 50%))
4. Graustufen auf dieselbe Weise generieren
5. Akzentfarben sparsam hinzufügen – eine für Erfolg (grün), eine für Fehler (rot), eine für Warnung (amber)
6. Kontrast prüfen für jede Text-/Hintergrundkombination
7. Alles als CSS-benutzerdefinierte Eigenschaften definieren, damit das Wechseln von Themes unkompliziert ist

:root {
  --primary: hsl(217, 91%, 60%);
  --primary-light: hsl(217, 91%, 93%);
  --primary-dark: hsl(217, 91%, 35%);
  --text: hsl(217, 15%, 15%);
  --text-muted: hsl(217, 10%, 45%);
  --surface: hsl(217, 20%, 98%);
  --error: hsl(0, 72%, 51%);
  --success: hsl(142, 71%, 45%);
}

Jetzt Farben konvertieren

Nutzen Sie unsere Farbauswahl & Konvertierung, um sofort zwischen HEX, RGB, HSL und RGBA zu konvertieren. Sie können auch Kontrastverhältnisse mit unserem Farbkontrast-Checker überprüfen.