Ved at bruge denne side acceptere du brugen af cookies.

Læs mere

Del via:

HSL Farver

Når man bruger HSL er det nemt at ændre på lys og farvemætningen for en farve. Læs mere i denne artikel.

Redigeret: 2017-09-02 23:48

HSL Farver angives som Hue, Saturation og Lightness, og er, ligesom RGB og HEX, en måde at angive farver på i HTML og CSS.

Med HSL angivelser har vi den fordel, at det er lettere at styre Lys-værdien på farven. Hvis for eksempel du kun ønsker at ændre lysstyrken af en farve, kan du med HSL nøjes med at ændre på (Lightness) værdien. Med RGB og HEX Farver er det lidt svære, fordi du skal kende teorien bag, før du kan ændre ting som Farvemætning og Lys.

Når du vælger farver, er det nemmest at bruge et grafisk program, som kan vise dig HEX eller RGB koden til farver.

Mulige Værdier

HSL tager imod tre værdier - den første er Hue, den anden er Saturation, og den tredje er Lightness. Hue skal gives i grader, imens farvemætning og lysstyrke skal gives i procent.

HueTager imod en numerisk værdi fra 0-360. Værdier udenfor vil starte forfra, så -60 vil være det samme som 300.
SaturationTager imod en værdi fra 0% til 100%. En værdi af 0% laver en grå variant.
LightnessTager imod en værdi fra 0% til 100%. En 0% lightness er sort, imens en 100% lightness er hvid, og 50% er normal.

HSL Farve Eksempler

CSS KodeResultatFarvenavn
hsl(0, 100%, 50%)Red
hsl(60, 100%, 50%)Yellow
hsl(120, 100%, 50%)Lime
hsl(180, 100%, 50%)Aqua
hsl(240, 100%, 50%)Blue
hsl(300, 100%, 50%)Fuchsia
hsl(360, 100%, 50%)Red

Koden til ovenstående tabel er vist nedenfor:

<table>
 <tr><th>Code</td><th>Result</th><th>Color name</th></tr>
 <tr><td>hsl(0, 100%, 50%)</td><td style="background:hsl(0, 100%, 50%);"></td><td>Red</td></tr>
 <tr><td>hsl(60, 100%, 50%)</td><td style="background:hsl(60, 100%, 50%)"></td><td>Yellow</td></tr>
 <tr><td>hsl(120, 100%, 50%)</td><td style="background:hsl(120, 100%, 50%);"></td><td>Lime</td></tr>
 <tr><td>hsl(180, 100%, 50%)</td><td style="background:hsl(180, 100%, 50%);"></td><td>Aqua</td></tr>
 <tr><td>hsl(240, 100%, 50%)</td><td style="background:hsl(240, 100%, 50%);"></td><td>Blue</td></tr>
 <tr><td>hsl(300, 100%, 50%)</td><td style="background:hsl(300, 100%, 50%);"></td><td>Fuchsia</td></tr>
 <tr><td>hsl(360, 100%, 50%)</td><td style="background:hsl(360, 100%, 50%);"></td><td>Red</td></tr>
</table>