CSS-Farben nach HSL-Schema

Dieses Script funktioniert NICHT im Privaten Fenster vom Safari-Browser. Ansonsten müssen Cookies aktiv sein.

hsl-Farbdefinitionen könnte man z. B. für eine Rollanimation anwenden.

Siehe auch

Colors Tutorial (www.w3schools.com/colors/) mit Konverter und allem drum und dran.
zur Berechnung: de.wikipedia.org/wiki/HSV-Farbraum

Zu Farbe H = 200, S = Sättigung, L = Helligkeit

background-color:hsl(200, S %, L %)

Klick auf Grauwert öffnet Ansicht mit Schriftproben. Hole neue Farbzahl per Eingabe nach Klick auf Farbwertfeld links oben.

Sättigung (saturation)
200	0%	10%	20%	30%	40%	50%	60%	70%	80%	90%	100%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
früher gewählte Farben nochmals ansehen
	11	10	9	8	7	6	5	4	3	2	1

Helligkeit (lightness)

Wähle Abstand zwischen den Farbtönen als Winkel (auf einem Farbkreis): °

Klicke in eine Farbzeile, um weiter oben deren Grauwerte zu sehen.

Sättigung (saturation): in Tabelle oben von links nach rechts hsl(H,S%,L=50%)					Farbe (hue):		Helligkeit (lightness): in Tabelle oben von rechts oben nach unten hsl(H,S=100%,L%)
0%	20%	40%	60%	80%	hsl (H	, S %, L %)	100%	80%	60%	40%	20%
					hsl (0	,100%, 50%)
					hsl (60	,100%, 50%)
					hsl (120	,100%, 50%)
					hsl (180	,100%, 50%)
					hsl (240	,100%, 50%)
					hsl (300	,100%, 50%)
					360° = 0°
					hsl (360	,100%, 50%)