Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

HSL Farver

Reference til hvordan du bruger HSL farver i HTML og CSS.

Redigeret: 2016-01-14 04:38

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

Det er lettere at ændre HSL farver - for eksempel, hvis du kun ønsker at ændre lysstyrken af en farve, kan du blot ændre lys (Lightness) værdien - med RGB og HEX Farver er det lidt svære, fordi du nok skal kende teorien bag, før du kan ændre ting som Farvemætning og Lys.

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

Et eksempel på hvordan man angiver HSL Farver ses 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>

Se også

  1. Farver i HTML og CSS