HSL beschreift eng Faarf wéi Mënschen doriwwer schwätzen: wéi Hue, wéi faarweg, wéi hell. Eng HEX op HSL konvertéieren ass déi séierst Manéier, eng Faarf an eng Form ze kréien, déi du wierklech nach upasse kanns — liicht maachen, entsättigen oder eng ganz Skala opbauen.
Wéi d'Konversioun vu HEX op HSL funktionéiert
- Konvertéier de HEX-Code op RGB a deelt all Kanal duerch 255, sou datt all dräi Wäerter tëscht 0 an 1 läien.
- Fannt den gréisste an den klengste vun deenen dräi Wäerter. Hiren Duerchschnëtt ass d'Hellegkeet L.
- D'Differenz tëscht hinnen bestëmmt d' Sättigung S: deelt se duerch (2 − max − min) fir hell Faarwen, oder duerch (max + min) fir däischter.
- De Kanal mat dem Maximum entscheet d'Hue H — rout bei 0°, gréng bei 120°, blo bei 240° — an déi aner zwee Kanäl placéieren d'Hue bannent deem Segment.
Praktescht Beispill
D'Mathematik ass exakt, mee HSL-Wäerter ginn normalerweis op ganz Grad an Prozenten geronn. Zeréckkonvertéieren kann deemno e oder zwou RGB-Schrëtt vum Original ewechbréngen — an der Praxis onsichtbar, awer derwäert ze wëssen wanns du Faarwen dacks hin an hier schécks.
HEX an HSL erkläert
Wat ass HEX?
En HEX-Code ass eng sechsstellëg hexadezimal Zuel déi d'rout-, gréng- an blo-Kanäl vun enger Faarf no engem féierende # späichert. All Parallel deckt eng Kanal of, vu 00 (keen) bis FF (voll), wat déi selwecht 16,7 Millioune Faarwen wéi RGB an enger vill méi kuerzer Notatioun ergëtt. HEX ass d'Default an CSS, Design-Tools a Markenrichtlinnen.
- Syntax:
- #RRGGBB
- Beräich:
- 00–FF pro Kanal
- Beschte fir:
- CSS, Design-Übergab, Markenrichtlinnen
Wat ass HSL?
HSL deelt eng Faarf an Hue (0–360° um Faarfrad), Saturatioun (wéi faarweg, 0–100%) an Liichtegkeet (wéi hell, 0–100%). Well all Deel esou beschriwwe gëtt wéi Leit Faarwen duerstellen, ass HSL dat einfachst Format fir Tënten, Schied an konsistent Palette ze bauen — manuell oder am Code.
- Syntax:
- hsl(H, S%, L%)
- Beräich:
- 0–360°, 0–100%, 0–100%
- Beschte fir:
- Palette, Tënten a Schied, Theming
Referenztabell vu HEX op HSL
Déi heefegst CSS-Faarwen, konvertéiert vu HEX op HSL.
| Faarf | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |