Eng Faarf a HSL auswielen ass bequem, mee Stylesheets, Design-Übergaben an Brand-Dokumenter funktionéieren nach ëmmer mat HEX. Dësen Konverter iwwerbréckt de Gruef a gitt dir de sechsstéifegen Code fir all Kombinatioun aus Hue, Sättigung an Hellegkeet.
Wéi d'Konversioun vu HSL op HEX funktionéiert
- Maacht Sättigung an Hellegkeet zu Fraktiounen: 60% gëtt 0.6.
- Berechent de Chroma C = (1 − |2L − 1|) × S — dat seet wéi wäit d'Faarf vun der Groossläit läit.
- Benotzt d'Hue fir deen Chroma op fuss op de routen, grénge a bloen Kanal ze placéieren, da verschéckt all dräi ëm L − C/2.
- Multiplizéiert all Kanal mat 255, ronn se an schreift jiddereen als zwee hexadesimal Zifferen.
Praktescht Beispill
D'Ronnung geschitt eemol, am leschte Schrëtt, wann all Kanal op eng ganz 0–255 Zuel geschnappt gëtt. D'Resultat ass deen noosten HEX-Code zu denger HSL-Angab a normalerweis identesch mat deem wat e Design-Tool weist.
HSL an HEX erkläert
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
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
Referenztabell vu HSL op HEX
Déi heefegst CSS-Faarwen, konvertéiert vu HSL op HEX.
| Faarf | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |