HSL ass déi frëndlech Manéier eng Faarf erauszewielen, RGB ass dat, wat Bildschirmer, Canvas-APIs an Bildcode tatsächlech konsuméieren. Dësen Converter verwandelt all Hue-, Saturatioun- a Liichtegkeets-Triple an exakt 0–255 Kanäl.
Wéi d'Konversioun vu HSL op RGB funktionéiert
- Konvertéier S a L an Fraktiounen a berechne d'Chroma C = (1 − |2L − 1|) × S.
- Deel den Hue duerch 60 fir säin Segment um Faarfrad ze fannen an berechne den intermediary Wärt X = C × (1 − |(H/60 mod 2) − 1|).
- Weis C, X an 0 de R-, G- an B-Plazen zou ofhängeg vun deem Segment.
- Gitt den Liichtegkeets-Offset L − C/2 zu alle dräi Kanäl dobäi an multiplizéier mat 255.
Praktescht Beispill
De Resultat ass exakt bis op déi final Arronderung op ganz Kanäl. Bruchwäerter fir Hue oder Saturatioun ginn ënnerstëtzt an landen einfach um noosten RGB-Triple.
HSL an RGB 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 RGB?
RGB beschreift eng Faarf als dräi Liichtkanäl — rout, gréng a blo — all vun 0 bis 255. Et spigelt wéi Bildschirmer effektiv funktionéieren: all dräi op 255 ginn wäiss, all op 0 ginn schwaarz. RGB ass déi richteg Wiel wann s du mat Zuele berechne muss, an rgba() füügt Transparenz derbäi.
- Syntax:
- rgb(R, G, B)
- Beräich:
- 0–255 pro Kanal
- Beschte fir:
- Code, Canvas, Transparenz mat rgba()
Referenztabell vu HSL op RGB
Déi heefegst CSS-Faarwen, konvertéiert vu HSL op RGB.
| Faarf | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |