A HSL a színárnyalat, telítettség és világosság rövidítése.
A CSS-ben a szín a színárnyalat, telítettség és világosság (HSL) segítségével határozható meg a nyomtatvány:
hsl(színárnyalat, telítettség, világosság)
A színárnyalat egy fok a színkörön 0 és 360 között. A 0 a vörös, a 120 a zöld és a 240 a kék.
A telítettség százalékos érték. A 0% a szürke árnyalatát jelenti, a 100% pedig a teljes színt.
A könnyedség is százalék. 0% fekete, 50% nem világos vagy sötét, 100% fehér
Kísérletezzen az alábbi HSL-értékek keverésével:
HUE
SATURATION
LIGHTNESS
Próbálja ki Ön is →
<!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>
A telítettség egy szín intenzitásaként írható le.
100% tiszta szín, nincs szürke árnyalat.
50% 50% szürke, de még mindig látható a szín.
0% teljesen szürke; már nem látod a színt.
Próbálja ki Ön is →
<!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>
Egy szín világossága úgy írható le, hogy mennyi fényt szeretne adni a színnek, ahol a 0% azt jelenti, hogy nincs fény (fekete), 50% azt jelenti, hogy 50% világos (sem sötét, sem világos) a 100% pedig teljes világosságot jelent (fehér).
Próbálja ki Ön is →
<!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>
A szürke árnyalatait gyakran úgy határozzák meg, hogy az árnyalatot és a telítettséget 0-ra állítják, és állítsa a világosságot 0% és 100% között, hogy sötétebb/világosabb árnyalatokat kapjon:
Próbálja ki Ön is →
<!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>
A HSLA színértékek a HSL színértékek alfa-csatornával rendelkező kiterjesztései - amely egy szín átlátszatlanságát határozza meg.
A HSLA színértéke az meghatározva:
hsla(színárnyalat, telítettség, világosság, alfa)
Az alfa paraméter egy szám 0,0 (teljesen átlátszó) és 1,0 (egyáltalán nem átlátszó) között:
Kísérletezzen az alábbi HSLA-értékek keverésével:
HUE
SATURATION
LIGHTNESS
ALPHA
Próbálja ki Ön is →
<!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>