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.
Edited: 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.
| Hue | Tager imod en numerisk værdi fra 0-360. Værdier udenfor vil starte forfra, så -60 vil være det samme som 300. |
| Saturation | Tager imod en værdi fra 0% til 100%. En værdi af 0% laver en grå variant. |
| Lightness | Tager 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 Kode | Resultat | Farvenavn |
|---|---|---|
| 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>
Fortæl os hvad du tænker: