Praxisleitfaden für Farbmodelle
HSB vs HSL vs HSV: Unterschiede und richtige Anwendung
Die drei Namen nutzen denselben Farbkreis, beschreiben aber nicht immer dieselben Koordinaten. Dieser Leitfaden erklärt die dritte Achse, unterschiedliche Ergebnisse bei gleichen Prozenten und eine verlässliche Übergabe an Webcode.
HSB vs HSL vs HSV
Sind HSB, HSV und HSL dasselbe?
HSB und HSV bezeichnen gewöhnlich dasselbe RGB-basierte Modell: Brightness und Value sind zwei Namen für den dritten Kanal. HSL ist eine andere Transformation. Dort liegt ein voll gesättigter reiner Farbton bei 50 % Lightness und Weiß bei 100 %. HSB oder HSV zeigt den reinen Farbton bei 100 % Brightness und erreicht Weiß nur bei null Sättigung. Gib deshalb zu jedem Prozent-Tripel den Modellnamen an.
Die kurze Antwort
- Behandle HSB und HSV erst nach Prüfung von Anwendung, Wertebereichen, Farbprofil und Rundung als gleich.
- Kopiere HSB-Sättigung und -Brightness nicht direkt in HSL-Sättigung und -Lightness.
- Nutze HSB oder HSV für intuitive Picker-Korrekturen und HSL, wenn seine Struktur und CSS hsl() zur Aufgabe passen.
- Speichere für die Übergabe einen exakten HEX- oder RGB-Wert und prüfe Kontrast und Farbabstand mit eigenen Methoden.
Eine Farbfamilie, drei unterschiedliche Aufgaben
Die Modelle ordnen Bildschirmfarben für verschiedene Entscheidungen neu. Diese Ankerwerte zeigen den Unterschied, bevor Zahlen zwischen Werkzeugen wandern.
| Modell | Dritter Kanal | Nützliche Anker | Typische Rolle |
|---|---|---|---|
| HSB / HSV | Brightness / Value | Reinfarbe bei S 100 %, B/V 100 %; Schwarz bei B/V 0 % | Farbwähler, Bildwerkzeuge, visuelle Anpassung von Farbton, Intensität und Dunkelheit |
| HSL | Lightness | Reinfarbe bei S 100 %, L 50 %; Schwarz bei L 0 %; Weiß bei L 100 % | CSS hsl() und helle oder dunkle Varianten um einen Mittelpunkt |
| HEX / RGB | Rot-, Grün- und Blaukanäle | Ein eindeutiges sRGB-Kanaltripel nach der Umrechnung | Stabile Webübergabe, Design-Tokens und Implementierungsdokumentation |
Warum die Namen austauschbarer wirken, als sie sind
HSB, HSV und HSL beginnen alle mit dem Farbton, meist als Winkel auf einem Farbkreis. Außerdem enthalten alle einen Kanal namens Sättigung. Durch diese gemeinsame Sprache scheinen die Koordinaten auf den ersten Blick kompatibel. Tatsächlich ordnet jedes Modell RGB-Anzeigekoordinaten neu; keines misst physisches Licht unabhängig. Die ursprüngliche Arbeit zu HSV- und HSL-Transformationen beschrieb zwei verschiedene Geometrien, mit denen sich ein RGB-Würfel leichter bedienen lässt. Gleiche Bezeichnungen machen daher weder die Berechnung noch die Bezugspunkte oder Koordinaten austauschbar.
Am sichersten ist eine operative Lesart. Ein Modell sagt einem Werkzeug, wie es drei Regler in rote, grüne und blaue Ausgaben umwandelt. Verwenden zwei Anwendungen dieselbe Transformation und Rundung, können ihre finalen RGB- oder HEX-Werte übereinstimmen, obwohl eine HSB und die andere HSV schreibt. Sobald ein Feld HSL verwendet, ändern sich Sättigungs- und Drittkanalberechnung. Das Kopieren von 210°, 70 %, 80 % kann deshalb eine andere Fläche erzeugen, obwohl alle sichtbaren Zahlen gleich bleiben. Modellname und umgerechneter Ausgabewert gehören gemeinsam in die Übergabe.
Wie HSB und HSV Brightness oder Value beschreiben
Im üblichen HSV-Modell ist Value der größte der normierten Rot-, Grün- und Blaukanäle. HSB nennt denselben Regler meist verständlicher Brightness. Bei voller Sättigung und voller Brightness erreicht der gewählte Farbton seine stärkste RGB-Randfarbe. Wird Brightness kleiner, bewegt sich das Ergebnis zu Schwarz. Sinkt die Sättigung, wird es neutraler, während die obere Brightness-Grenze erhalten bleibt. Bei null Sättigung und maximaler Brightness entsteht Weiß statt einer kräftigen Farbe. Die drei Kanäle sind keine getrennten Qualitätswerte, sondern bestimmen gemeinsam eine Bildschirmfarbe.
Diese Struktur passt gut zu einem zweidimensionalen Picker: Farbton auf einem Streifen auswählen, horizontal die Sättigung und vertikal Brightness ändern. Der aktuelle Adobe Color Picker dokumentiert genau diese HSB-Bedienung mit 0–360° Farbton sowie Prozentwerten für Sättigung und Brightness. Intuitiv bedeutet jedoch nicht messtechnisch. Brightness ist weder gemessene Luminanz noch eine Garantie für wahrgenommene Helligkeit. Gelb und Blau können beide B 100 % anzeigen und trotzdem stark unterschiedliche relative Luminanz besitzen. Der Regler unterstützt Bearbeitung, keine Wahrnehmungs- oder Barrierefreiheitsfreigabe.
Wie HSL Mittelpunkt und Endpunkte verändert
HSL behält den Farbkreis, definiert aber eine Lightness-Achse mit Schwarz bei 0 %, Weiß bei 100 % und der voll gesättigten Reinfarbe bei 50 %. Oberhalb des Mittelpunkts bewegt sich die Farbe zu Weiß, darunter zu Schwarz. Diese Symmetrie hilft bei hellen und dunklen Varianten um eine Basis. Sie erklärt zugleich, warum HSB Brightness 100 % nicht durch HSL Lightness 100 % ersetzt werden darf: Der erste Wert kann ein kräftiges Rot oder Blau sein, der zweite ist unabhängig von Farbton und Sättigung immer Weiß.
Auch Sättigung erhält in dieser Geometrie eine andere Bedeutung. Bei sehr hoher oder niedriger HSL-Lightness steht nur wenig Chroma zur Verfügung, selbst wenn das Sättigungsfeld 100 % zeigt. HSV berechnet Sättigung relativ zu Value. Die W3C-Spezifikation CSS Color definiert hsl() als Methode für sRGB-Farben und veröffentlicht das Browser-Verhalten der Umrechnung. Eine standardisierte CSS-Funktion hsv() oder hsb() definiert sie nicht. Eine im HSB-Picker gewählte Farbe muss daher in HEX, RGB, HSL oder eine andere akzeptierte CSS-Notation umgerechnet und im Browser kontrolliert werden.
Wann HSL in CSS und bei systematischen Varianten hilft
HSL ist praktisch, wenn die Implementierung hsl() direkt akzeptiert und ein Team Farben um einen Lightness-Mittelpunkt beschreiben möchte. Helle und dunkle Interface-Varianten derselben Farbfamilie lassen sich damit oft verständlicher besprechen als rohe RGB-Kanäle. CSS Color 4 unterstützt die moderne, leerzeichengetrennte hsl()-Syntax und einen optionalen Alphawert; der Browser löst das Ergebnis als sRGB-Farbe auf. Die native, prüfbare Notation ist ein echter Vorteil, wenn Werte direkt in Stylesheets, Variablen oder Design-Tokens liegen und ihre Absicht im Code lesbar bleiben soll.
Bequemlichkeit macht HSL jedoch weder zu einer Wahrnehmungsskala noch zu einem automatischen Palettensystem. Dieselbe Sättigung und Lightness über alle Farbtöne kann Flächen mit deutlich unterschiedlichem visuellen Gewicht erzeugen. Eine Hover-Farbe muss auf ihrem Hintergrund geprüft und ein Theme-Token in jedem realen Zustand auf Kontrast getestet werden. Neuere wahrnehmungsorientierte CSS-Räume können für manche systematische Palette besser passen, doch ein Modellwechsel beseitigt nicht die Prüfung von Gamut, Browserunterstützung, Produktgrenzen und konkreten Komponenten. Auswahlgrund und Fallback bleiben Teil der Spezifikation.
Wie eine Farbe eindeutig vom Picker in den Code gelangt
Notiere zuerst Modell, Anwendung, Farbprofil oder Webannahme und das exakte Tripel. Speichere anschließend den resultierenden sechsstelligen HEX- oder RGB-Wert. Dieser finale Kanalwert ist die sicherste Übergabe, weil ein anderes Werkzeug HSB-Prozente nicht unbemerkt als HSL interpretieren kann. Bevorzugt ein CSS-Autor hsl(), sollte er aus dem freigegebenen RGB umrechnen und das Browser-Ergebnis vergleichen, statt Felder nach Position zu kopieren. Bewahre genügend Präzision für die Reproduktion, ohne vorzugeben, zusätzliche Dezimalstellen könnten ein unkalibriertes Display oder eine komprimierte Quelle korrigieren.
Benenne abschließend, welche Entscheidung jeder Wert unterstützen darf. HSB oder HSL kann eine Bearbeitungsrichtung erklären. HEX oder RGB konserviert ein digitales Token. Delta E fasst den Abstand eines Farbpaares unter einer genannten Formel zusammen. WCAG-Kontrast nutzt relative Luminanz und definierte Kriterien für Vorder- und Hintergrund. Kein Ergebnis ersetzt automatisch ein anderes. Eine verlässliche Dokumentation enthält Quelle, Modell, Umrechnungswert, sichtbaren Kontext, Bewertungsmethode, Eigentümer der finalen Regel und die nächste erwartete Aktion. So bleibt nicht nur die Zahl, sondern auch ihre Aussagegrenze reproduzierbar.
Ein modellsicherer Farbablauf in fünf Schritten
Verwende diese Reihenfolge, wenn eine Farbe aus Picker, Screenshot oder Designdatei in Code oder eine gemeinsame Palette wechselt.
1. Modell benennen
Schreibe HSB, HSV, HSL, RGB oder das genaue Modell neben die Werte, statt ein unbeschriftetes Tripel zu teilen.
2. Quelle bewahren
Behalte das freigegebene Token oder Original und notiere, ob die Farbe aufgenommen, umgerechnet oder visuell erstellt wurde.
3. RGB oder HEX speichern
Erfasse die konvertierte Ausgabe, damit ein anderes Programm dieselben sRGB-Kanäle ohne Modellraten reproduziert.
4. Im Kontext prüfen
Betrachte die Farbe in realer Größe, Theme, Nachbarschaft, Zustand und auf dem Zielbildschirm vor der Freigabe.
5. Richtigen Test ausführen
Nutze Kontrast, Delta E, Druckmessung oder die zuständige Projektregel statt eines Picker-Kanals als Beweis.
Smith · W3C · Adobe
Primärquellen und Plattformdefinitionen
Diese Quellen dokumentieren die ursprünglichen Transformationen, den aktuellen HSB-Picker, die Browser-HSL-Syntax und die getrennte Kontrastregel.
Modelle vergleichen und die echte Farbe prüfen
Fragen zu HSB, HSV und HSL
Sind HSB und HSV immer identisch?
Meist bezeichnen sie dasselbe Modell, wobei Brightness und Value alternative Namen sind. Prüfe Dokumentation, Bereiche, Profil und Rundung vor exakter Übertragung.
Warum ist HSB B 100 % nicht HSL L 100 %?
HSB kann bei B 100 % eine voll gesättigte Reinfarbe zeigen. HSL reserviert L 100 % für Weiß und platziert die Reinfarbe bei L 50 %.
Kann CSS HSB oder HSV direkt verwenden?
CSS Color definiert hsl(), aber keine Standardfunktion hsb() oder hsv(). Konvertiere die Farbe in HEX, RGB, HSL oder ein anderes akzeptiertes CSS-Format.
Welches Modell eignet sich für einen Farbwähler?
HSB oder HSV ist für Farbtonstreifen und Sättigungs-Brightness-Feld üblich. HSL kann für CSS-Varianten lesbarer sein. Entscheidend sind Aufgabe und exakte Ausgabe.
Garantiert gleiche HSB- oder HSL-Helligkeit gleichen Kontrast?
Nein. Kein Kanal ist ein WCAG-Kontrastverhältnis. Bewerte das reale Vorder- und Hintergrundpaar mit der geforderten relativen Luminanzmethode.