HSL on sõbralikum viis värvi valimiseks, RGB on see, mida ekraanid, canvas API‑d ja pildikood tegelikult tarbivad. See teisendaja võtab mistahes hue, saturation ja lightness kolmiku ja annab täpsed 0–255 kanalid.
Kuidas HSL -> RGB teisendamine toimib
- Muuda S ja L murdudeks ja arvuta chroma C = (1 − |2L − 1|) × S.
- Jaga hue 60‑ga, et leida selle segment värvirattal, ja arvuta vahev��ärtus X = C × (1 − |(H/60 mod 2) − 1|).
- Määra C, X ja 0 R, G ja B kohtadele vastavalt sellele segmendile.
- Lisa kõigile kolmele kanalile lightness offset L − C/2 ja korruta 255‑ga.
Töötav näide
Tulemus on täpne kuni lõpliku ümardamiseni täiskanaliteks. Murdlikud hue või saturation väärtused on toetatud ja langevad lihtsalt lähima RGB kolmikuni.
HSL ja RGB selgitatud
Mis on HSL?
HSL jagab värvi tooniks (0–360° värvirattal), küllastuseks (kui erksas, 0–100%) ja heleduseks (kui hele, 0–100%). Kuna iga osa peegeldab seda, kuidas inimesed värve kirjeldavad, on HSL kõige lihtsam vorming varjundite, toonide ja järjepidevate palettide loomiseks — käsitsi või koodis.
- Süntaks:
- hsl(H, S%, L%)
- Vahemik:
- 0–360°, 0–100%, 0–100%
- Parim jaoks:
- paletid, toonid ja varjundid, teematöö
Mis on RGB?
RGB kirjeldab värvi kolme valguskanaliga — red (punane), green (roheline) ja blue (sinine) — igaüks vahemikus 0 kuni 255. See peegeldab, kuidas ekraanid tegelikult töötavad: kõik kanalid 255 annavad valge, kõik 0 annavad musta. RGB on õige valik, kui pead värgiga arvutusi tegema; rgba() lisab selle juurde läbipaistvuse.
- Süntaks:
- rgb(R, G, B)
- Vahemik:
- 0–255 per kanal
- Parim jaoks:
- kood, canvas, läbipaistvus rgba() abil
HSL -> RGB võrdlustabel
Kõige levinumad CSS-värvid, teisendatud HSL formaadist RGB formaati.
| Värv | 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) |