HSL-Farben

Bei RGB- und Hexfarben ist schwer zu erraten, welche Farbe eine Zahlenfolge ergibt oder wie man sie ändert, um eine hellere oder dunklere Version zu bekommen. HSL-Farben beschreiben eine Farbe so, wie Menschen sie sich vorstellen. HSL steht für hue (Farbton), saturation (Sättigung) und lightness (Helligkeit):

• Der Farbton ist die Position auf dem Farbkreis, in Grad von 0 bis 360: 0 ist Rot, 120 Grün, 240 Blau und 360 wieder Rot.
• Die Sättigung sagt, wie lebhaft die Farbe ist: 0 % ist Grau, 100 % ist die lebhafteste Version des Farbtons.
• Die Helligkeit sagt, wie hell die Farbe ist: 0 % ist immer Schwarz, 100 % immer Weiß, und 50 % ist die Farbe selbst, weder aufgehellt noch abgedunkelt.

h1 {
	color: hsl(180, 100%, 50%);
}

Diese Überschrift wäre cyan, ein leuchtendes Grünblau: Farbton 180°, unten auf dem Farbkreis, volle Sättigung und Helligkeit 50 %.

Der große Vorteil von HSL: Für eine hellere oder dunklere Version einer Farbe änderst du nur die Helligkeit. Unser Grün der Überschriften, rgb(71, 105, 88), ist in HSL etwa hsl(150, 19%, 35%). Mit gleichem Farbton und gleicher Sättigung und einer Helligkeit von 20 % bekommen wir eine dunklere Version desselben Grüns, mit 60 % eine hellere:

hsl(150, 19%, 20%) hsl(150, 19%, 35%) hsl(150, 19%, 60%)