Az RGB megmondja a képernyőnek, mennyi fényt adjon; az HSL megmutatja, hogyan is néz ki a szín. A három csatorna tónussá, telítettséggé és világossággá alakítása kézi finomítással könnyen kezelhetővé teszi a színt.
Hogyan működik a RGB → HSL átalakítás
- Oszd el R-t, G-t és B-t 255-tel, hogy minden érték 0 és 1 közé essen.
- Vedd a három közül a maximumot és a minimumot — ezek átlaga adja a világosságot L.
- Ha a maximum és a minimum megegyezik, a szín szürke: a tónus és a telítettség is 0.
- Ellenkező esetben számítsd ki S-t a maximum és minimum közti különbségből, és olvasd le H-t attól a csatornától, amelyik a maximum.
Példa a gyakorlatban
Elvileg pontos. Mivel az H, S és L-t általában kerek egész számokként jelenítik meg, a visszaalakítás során egy csatorna egy-két lépéssel elmozdulhat.
RGB és HSL magyarázata
Mi az a RGB?
Az RGB egy színt három fénysávként ír le — vörös, zöld és kék — mindegyik 0–255 között. Ez tükrözi, hogyan működnek a képernyők: mindhárom 255-nél fehér, mindhárom 0-nál fekete. Az RGB a jó választás, amikor számolni kell a színnel; az rgba() pedig átlátszóságot ad hozzá.
- Szintaxis:
- rgb(R, G, B)
- Tartomány:
- 0–255 csatornánként
- Legjobb erre:
- kód, canvas, átlátszóság rgba()-vel
Mi az a HSL?
A HSL a színt három részre bontja: hue (0–360° a színségen), saturation (mennyire színes, 0–100%) és lightness (mennyire világos, 0–100%). Mivel minden rész megfelel annak, ahogy az emberek a színt leírják, a HSL a legegyszerűbb formátum árnyalatok, tónusok és egységes paletták kézi vagy kód alapú létrehozásához.
- Szintaxis:
- hsl(H, S%, L%)
- Tartomány:
- 0–360°, 0–100%, 0–100%
- Legjobb erre:
- paletták, tónusok és árnyalatok, témázás
RGB → HSL referencia táblázat
A leggyakoribb CSS-színek, átalakítva RGB-ról HSL-ra.
| Szín | 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%) |