RGB erzielt engem Écran wéi vill Liicht ofgeliwwert muss ginn; HSL erzielt dir wéi d'Faarf effektiv ausgesäit. D'Konvertéiere vun de dräi Kanäl an Hue, Sättigung an Hellegkeet maacht eng Faarf einfach manuell unpassbar.
Wéi d'Konversioun vu RGB op HSL funktionéiert
- Deelt R, G an B duerch 255 sou datt all Wäert tëscht 0 an 1 läit.
- Hëlt den Maximum an den Minimum vun deenen dräi — hiren Duerchschnëtt ass d'Hellegkeet L.
- Wann Maximum an Minimum gläich sinn, ass d'Faarf gro: Hue an Sättigung sinn béid 0.
- Anerefalls dérivéiert S aus der Differenz tëscht Maximum an Minimum, a lies H vun deem Kanal deen dat Maximum hält.
Praktescht Beispill
Prinzipiell exakt. Well H, S an L normalerweis als geronne ganz Zuelen ugewise ginn, kann d'Zeréckkonvertéiere en Kanal ëm ee oder zwee Schrëtt verréckelen.
RGB an HSL erkläert
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()
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 RGB op HSL
Déi heefegst CSS-Faarwen, konvertéiert vu RGB op HSL.
| Faarf | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |