HSL står för nyans, mättnad och lätthet.
I CSS kan en färg anges med nyans, mättnad och ljushet (HSL) i formen:
hsl(nyans, mättnad, ljushet)
Nyans är en grad på färghjulet från 0 till 360. 0 är röd, 120 är grön och 240 är blå.
Mättnad är ett procentuellt värde. 0 % betyder en grå nyans och 100 % är helfärgen.
Lätthet är också en procentsats. 0 % är svart, 50 % är varken ljust eller mörkt, 100 % är vitt
Experimentera genom att blanda HSL-värdena nedan:
HUE
SATURATION
LIGHTNESS
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HSL values</h1>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>
</body>
</html>
Mättnad kan beskrivas som intensiteten hos en färg.
100% är ren färg, inga nyanser av grått.
50 % är 50 % grått, men du kan fortfarande se färgen.
0 % är helt grått; du kan inte längre se färgen.
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>HSL Saturation</h1>
<p>The second parameter of hsl() defines the saturation. Less saturation mean less color. 0% is completely gray:</p>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>
<h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>
<h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>
<h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>
<h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>
</body>
</html>
En färgs ljushet kan beskrivas som hur mycket ljus du vill ge färgen, där 0% betyder inget ljus (svart), 50% betyder 50% ljus (varken mörkt eller ljust) och 100% betyder full ljushet (vit).
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>HSL Lightness</h1>
<p>The third parameter of hsl() defines the lightness. 0% means black, and 100% means white:</p>
<h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>
<h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2>
<h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2>
<h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2>
</body>
</html>
Nyanser av grått definieras ofta genom att ställa in nyansen och mättnaden till 0, och justera ljusheten från 0 % till 100 % för att få mörkare/ljusare nyanser:
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>With HSL, shades of gray are made by setting the saturation to 0%, and adjusting the lightness from 0% to 100%:</p>
<h2 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h2>
<h2 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h2>
<h2 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h2>
<h2 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h2>
<h2 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h2>
<h2 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h2>
</body>
</html>
HSLA-färgvärden är en förlängning av HSL-färgvärden med en alfakanal - som anger opaciteten för en färg.
Ett HSLA-färgvärde är specificeras med:
hsla(nyans, mättnad, ljushet, alfa)
Alfaparametern är ett tal mellan 0,0 (helt transparent) och 1,0 (inte alls transparent):
Experimentera genom att blanda HSLA-värdena nedan:
HUE
SATURATION
LIGHTNESS
ALPHA
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>Make transparent colors with HSLA</h1>
<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>
</body>
</html>