HSL vs. HSV: Welches Farbmodell sollten Sie verwenden?

Wenn Sie jemals einen Farbwähler verwendet haben, haben Sie mit HSV oder HSL interagiert – meist ohne zu wissen, welches. Beide Modelle teilen zwei Achsen (Farbton und Sättigung), unterscheiden sich aber grundlegend darin, wie sie die dritte Dimension ausdrücken. Der Unterschied ist nicht nur Terminologie: Er erzeugt unterschiedliche visuelle Layouts, unterschiedliches Verhalten bei Gradienten und programmatischer Farberzeugung sowie unterschiedliche Stärken je nach Anwendungsfall. Dieser Leitfaden erklärt beide Modelle klar, zeigt die visuellen Unterschiede und gibt eine praktische Anleitung zur Auswahl des richtigen Modells.

HSL erklärt: Farbton, Sättigung, Helligkeit

HSL beschreibt eine Farbe mithilfe drei Komponenten: Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness). Es wurde mit Webentwicklern und Designern im Sinn konzipiert und entspricht ziemlich intuitiv der Art und Weise, wie die meisten Menschen über Farbe sprechen.

Farbton

Farbton ist die Position auf dem Farbrad, ausgedrückt in Grad von 0 bis 360. Das Rad ordnet sich wie folgt an:

Farbton ist in HSL und HSV identisch – es ist die eine Achse, die beide Modelle vollständig teilen.

Sättigung in HSL

In HSL steuert Sättigung, wie lebhaft die Farbe im Verhältnis zu einem Grau derselben Helligkeit ist. Bei 100 % Sättigung erhalten Sie die vollste mögliche Version dieses Farbtons. Bei 0 % Sättigung erhalten Sie ein neutrales Grau.

Das entscheidende Detail: Die Sättigungsachse in HSL verankert immer an einem Grau derselben Helligkeitsstufe, nicht an Schwarz oder Weiß. Bei hsl(220, 0%, 50%) erhalten Sie ein Mittelgrau #808080. Bei hsl(220, 100%, 50%) erhalten Sie ein vollständig gesättigtes Mittelblau #0055FF. Das Entsättigen von diesem Blau führt Sie zurück zu #808080, nicht zu Schwarz oder Weiß.

Helligkeit in HSL

Helligkeit steuert die Luminanz auf einer Skala von 0 % (Schwarz) bis 100 % (Weiß), mit 50 % als dem Mittelpunkt, wo die Farbe am lebendigsten ist. Jeder Farbton bei 50 % Helligkeit und 100 % Sättigung ist die „reine" Version dieser Farbe.

/* Reine Farbtöne bei L=50%, S=100% */
hsl(0,   100%, 50%)  /* #FF0000 — Rot */
hsl(120, 100%, 50%)  /* #00FF00 — Grün */
hsl(240, 100%, 50%)  /* #0000FF — Blau */

/* Dieselben Farbtöne bei verschiedener Helligkeit */
hsl(240, 100%, 20%)  /* #000066 — dunkles Marineblau */
hsl(240, 100%, 80%)  /* #9999FF — helles Lavendel */
hsl(240, 100%, 95%)  /* #E6E6FF — nahezu Weiß, blau getönt */

Die Achse ist intuitiv: niedrigere Helligkeit = dunkler, höher = heller, 0 % ist immer Schwarz, 100 % ist immer Weiß unabhängig vom Farbton.

HSL in CSS

HSL hat erstklassige native Unterstützung in CSS. Sowohl die ältere Funktionssyntax als auch die neuere leerzeichengetrennte Syntax funktionieren in allen modernen Browsern:

/* Traditionelle Komma-Syntax */
color: hsl(220, 80%, 55%);
background-color: hsl(220, 80%, 55%, 0.4); /* mit Alpha */

/* Moderne leerzeichengetrennte Syntax (CSS Color Level 4) */
color: hsl(220 80% 55%);
color: hsl(220 80% 55% / 0.4); /* mit Alpha */

/* Relative HSL (CSS Color Level 5 — von vorhandener Farbe anpassen) */
color: hsl(from var(--color-primary) h s calc(l - 10%));

Die relative Farb-Syntax – hsl(from ... h s calc(l - 10%)) – ist für Design-Systeme besonders leistungsstark: Sie ermöglicht es Ihnen, Töne und Schattierungen jeder variablen Farbe zu generieren, ohne deren numerische Werte im Voraus zu kennen.

HSV erklärt: Farbton, Sättigung, Wert

HSV (auch als HSB geschrieben, wobei B für Helligkeit steht) verwendet dieselbe Farbtonachse wie HSL, ersetzt aber Helligkeit durch Wert (Value) und definiert die Bedeutung von Sättigung neu.

Wert in HSV

Wert steuert, wie viel Licht die Farbe hat, von 0 % (Schwarz) bis 100 % (volle Helligkeit). Bei V=100 % ist die Farbe so hell wie möglich – das ist die vollständig gesättigte, vollständig beleuchtete Version des Farbtons. Bei V=0 % ist die Farbe schwarz, unabhängig von Farbton oder Sättigung.

Dies ist der wichtigste Unterschied zu HSL: In HSV führt die Maximalhelligkeit-Achse zur reinen Farbe, nicht zu Weiß.

Sättigung in HSV

In HSV steuert Sättigung die Menge an Farbe versus Weiß. Bei S=100 % ist die Farbe vollständig gesättigt – kein Weiß eingemischt. Bei S=0 % ist die Farbe vollständig weiß (bei V=100 %) oder grau/schwarz (bei niedrigeren Werten). Sättigung in HSV kann als „wie viel Weiß in die Farbe eingemischt ist" betrachtet werden.

Die praktische Konsequenz: In HSV liegt Weiß bei (beliebiger Farbton, 0%, 100%) – hoher Wert, null Sättigung. In HSL liegt Weiß bei (beliebiger Farbton, beliebige Sättigung, 100%).

Der HSV-Farbkörper

HSV bildet auf einen Zylinder ab, wobei:

• Der obere Kreis maximalen Wert (volle Helligkeit) darstellt
• Der untere Punkt Schwarz (V=0) ist
• Das Bewegen vom Umfang zur Mitte in Richtung Weiß entsättigt
• Das Bewegen am Zylinder nach unten in Richtung Schwarz abdunkelt

Diese Geometrie ist der Grund, warum fast jeder grafische Farbwähler – Photoshop, Figma, Sketch, Browser-DevTools, CSS-Farbwähler – HSV verwendet. Der in diesen Tools häufig zu sehende rechteckige Wähler ist ein 2D-Schnitt des HSV-Zylinders: Die horizontale Achse ist Sättigung (0–100 %) und die vertikale Achse ist Wert (0–100 %), mit einem separaten Farbtonregler. Dieses Layout ermöglicht es, zu Weiß (obere linke Ecke), Schwarz (unten), voller Sättigung+Helligkeit (obere rechte Ecke) oder irgendwo dazwischen zu ziehen.

HSV ist in CSS nicht verfügbar

Anders als HSL hat HSV keine CSS-Funktion. Sie können hsv(240, 100%, 100%) nicht in einem Stylesheet schreiben. HSV ist ein internes Farbmodell, das von Farbwähler-UIs und Grafiksoftware verwendet wird. Wenn Photoshop oder Figma eine Farbe exportiert, konvertiert es von HSV zu Hex, RGB oder HSL, bevor es Werte ausgibt, die Sie im Code verwenden können.

Wichtige visuelle Unterschiede

Die Modelle erzeugen denselben Farbsatz – jede in HSL ausdrückbare Farbe ist in HSV ausdrückbar – aber verschiedene Koordinaten beschreiben dieselben Farben unterschiedlich, und die Form des Farbraums ist unterschiedlich.

Der Weißpunkt

Dies ist der praktischste Unterschied. Betrachten Sie vollständig entsättigte Farben:

Beide erreichen Weiß. Aber schauen Sie, was bei 50 % Helligkeit/Wert passiert:

Gleiches Ergebnis hier. Aber betrachten Sie vollständig gesättigte Mittelpunkte:

In HSL ist der Mittelpunkt der Helligkeitsachse bei voller Sättigung der reine Farbton. In HSV erfordert das Erreichen des reinen Farbtons V=100 %, und der Mittelpunkt (V=50 %) erzeugt einen viel dunkleren Ton.

Gradientenverhalten

Erzeugen Sie in jedem Modell einen Gradienten von voller Sättigung zu null:

/* HSL: Entsättigung bewegt sich in Richtung Grau */
background: linear-gradient(to right,
  hsl(240, 100%, 50%),   /* #0000FF — reines Blau */
  hsl(240, 0%, 50%)      /* #808080 — Mittelgrau */
);

/* Äquivalente HSV-Entsättigung (als Hex) */
/* hsv(240, 100%, 100%) = #0000FF */
/* hsv(240, 0%, 100%)   = #FFFFFF — reines Weiß, nicht Grau */

In HSL führt das Entsättigen einer Mitteltonfarbe zu Grau. In HSV führt das Entsättigen bei vollem Wert zu Weiß. Deshalb hat HSVs quadratischer Farbwähler Weiß in der oberen linken Ecke.

Wann welches verwenden: HSL für CSS, HSV für Farbwähler

HSL in CSS und Design-Systemen verwenden

HSL ist die richtige Wahl für CSS, weil:

1. Es in CSS nativ unterstützt wird. Schreiben Sie hsl() direkt in Stylesheets.
2. Helligkeit ist für Theming intuitiv. Das Erhöhen oder Verringern der Helligkeit um einen festen Betrag erzeugt konsistente hellere oder dunklere Varianten einer Farbe – nützlich für Hover-Zustände, Fokusringe und Ton-/Schattengenerierung.
3. 50 % Helligkeit ist der „Standard"-Ton. In HSL sitzt die gesättigteste, kanonische Version jedes Farbtons bei 50 % Helligkeit – vorhersehbar und leicht zu verstehen.
4. Gradienten sind besser vorhersehbar. Das Entsättigen in HSL führt zu einem wahrnehmungsneutralen Mittelpunkt, während das Entsättigen in HSV zu Weiß führt, was überraschendes Gradientenverhalten erzeugen kann.
5. Relative Farbsyntax funktioniert mit HSL. CSS Color Level 5's hsl(from ...)-Syntax ermöglicht dynamische Farbableitung.

Für das Generieren von Tönen und Schattierungen im Code:

/* Hover-Zustand durch Abdunkeln um 10 % generieren */
:root {
  --blue: hsl(220, 80%, 55%);
}

.btn:hover {
  background: hsl(220, 80%, 45%); /* -10 % Helligkeit */
}

/* Oder mit relativer Farbsyntax */
.btn:hover {
  background: hsl(from var(--blue) h s calc(l - 10%));
}

Der Farbkonverter zeigt Ihnen die HSL-Aufschlüsselung jedes Hex-Codes – nützlich, wenn Sie Helligkeitswerte um einen bestimmten Prozentsatz für Ton-/Schattenvarianten anpassen müssen.

HSV in Farbwähler-UIs verwenden

HSV ist die richtige Wahl, wenn Sie einen Farbwähler bauen statt einen zu verwenden. Die Geometrie des HSV-Modells – ein Rechteck, in dem die obere rechte Ecke der reine Farbton, oben links Weiß und unten Schwarz ist – lässt sich sauber auf einen 2D-ziehbaren Bereich abbilden. Die Geometrie gibt Künstlern einen natürlichen Auswählpunkt: gesättigte+helle Farben im oberen rechten Quadranten, Pastellfarben oben links, Schatten unten links.

Deshalb verwenden Photoshop, Figma und Chrome DevTools intern alle HSV. Wenn Sie einen benutzerdefinierten Farbwähler in JavaScript für eine Grafik- oder Designanwendung implementieren, arbeiten Sie in HSV und konvertieren zu Hex oder HSL für die Ausgabe:

function hsvToHsl(h, s, v) {
  // h: 0-360, s: 0-1, v: 0-1
  const l = v * (1 - s / 2);
  const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
  return { h, s: sl * 100, l: l * 100 };
}

function hsvToHex(h, s, v) {
  const { h: hh, s: ss, l: ll } = hsvToHsl(h, s / 100, v / 100);
  return hslToHex(hh, ss, ll);
}

Wenn Sie ein Webdesign-Tool bauen, bei dem Ausgaben in CSS fließen, könnte Ihr Farbwähler intern HSV verwenden, aber immer HSL-Werte anzeigen und exportieren – damit Designer die intuitive HSV-Wähler-Erfahrung haben und gleichzeitig CSS-fertige Werte ausgegeben bekommen.

CSS-Farbunterstützung im Überblick

CSS Color Level 4 enthält HWB (Farbton, Weißanteil, Schwarzanteil), das konzeptionell HSV mehr ähnelt als HSL. In HWB:

• W (Weißanteil) = Menge an eingemischtem Weiß (entspricht HSV: (1 - Sättigung))
• B (Schwarzanteil) = Menge an eingemischtem Schwarz (entspricht (1 - Wert))

/* HWB-Äquivalente */
hwb(240 0% 0%)    /* Reines Blau #0000FF — kein Weiß, kein Schwarz */
hwb(240 0% 50%)   /* Dunkles Marineblau #000080 — kein Weiß, 50 % Schwarz */
hwb(240 50% 0%)   /* Helles Blau-Weiß #8080FF — 50 % Weiß, kein Schwarz */

Wenn Sie die HSL-Helligkeitsachse intuitiv weniger finden und HSV-ähnliches Denken bevorzugen, ist HWB die nächste CSS-Farbfunktion. Verwenden Sie den Farbkonverter, um jede Farbe zwischen Hex, RGB, HSL und anderen unterstützten Formaten zu übersetzen.

Praktische Konvertierungsreferenz

Beachten Sie, wie die reinen Farbton-Varianten (Rot, Koralle) in HSL bei 50–71 % Helligkeit clustern, während sie in HSV bei V=100 % liegen. Der Farbkonverter führt diese Konvertierungen automatisch durch – geben Sie einen beliebigen Hex-Code ein und erhalten Sie die vollständige Aufschlüsselung.

Wichtigste Erkenntnisse

• HSL (Farbton, Sättigung, Helligkeit) und HSV (Farbton, Sättigung, Wert) beschreiben dieselben Farben, aber mit unterschiedlicher interner Geometrie, die unterschiedliche Koordinaten für denselben Hex-Wert erzeugt.
• In HSL ist 50 % Helligkeit bei voller Sättigung der „reine" kanonische Farbton. In HSV ist 100 % Wert bei voller Sättigung der reine Farbton – was Mittelpunktwerte in HSV viel dunkler macht.
• HSL entsättigt zu Grau bei derselben Helligkeit; HSV entsättigt zu Weiß bei vollem Wert. Deshalb sind HSL-Gradienten und Ton-/Schattengenerierung für UI-Arbeit besser vorhersehbar.
• HSL hat native CSS-Unterstützung über hsl(). HSV hat keine CSS-Funktion und existiert nur als internes Modell in Grafik- und Designanwendungen.
• Verwenden Sie HSL für CSS-Benutzereigenschaften, Ton-/Schattengenerierung und Theming. Verwenden Sie HSV, wenn Sie Farbwähler-UIs bauen, bei denen das zweiachsige Rechteck natürlich zur Geometrie des Modells passt.
• Der Farbkonverter übersetzt jeden Hex-Code sofort zu HSL, RGB, CMYK und OKLCH – ein schneller Weg, HSL-Werte zu prüfen, wenn Sie nur einen Hex-Code haben.