HSL cara sing ramah kanggo milih warna, RGB iku sing digunakake layar, canvas API lan kode gambar. Konverter iki ngowahi sembarang hue, saturation lan lightness dadi saluran 0–255 sing pas.
Carane konversi saka HSL dadi RGB
- Owahi S lan L dadi fraksi lan itung chroma C = (1 − |2L − 1|) × S.
- Bagi hue karo 60 kanggo nemtokake segmén ing roda warna lan itung nilai antarane X = C × (1 − |(H/60 mod 2) − 1|).
- Pasang C, X lan 0 menyang slot R, G lan B miturut segmén kasebut.
- Tambah offset lightness L − C/2 menyang ketiga saluran lan kali karo 255.
Conto kerja
Asilé pas nganti pambunderan pungkasan dadi saluran utuh. Nilai hue utawa saturation fraksional didhukung lan bakal mendarat ing triple RGB paling cedhak.
HSL lan RGB dijlentrehake
Apa iku HSL?
HSL mecah warna dadi hue (0–360° ing roda warna), saturation (sepira werna, 0–100%) lan lightness (sepira padhang, 0–100%). Amarga saben bagean cocog karo cara wong njlèntrèhaké warna, HSL dadi format sing paling gampang kanggo nggawe tint, shade lan palet sing konsisten — kanthi manual utawa ing kode.
- Sintaksis:
- hsl(H, S%, L%)
- Rentang:
- 0–360°, 0–100%, 0–100%
- Paling cocog kanggo:
- palet, tint lan shade, theming
Apa iku RGB?
RGB nerangake warna minangka telung channel cahya — abang, ijo lan biru — saben siji saka 0 nganti 255. Iki nggambarake cara kerja layar: kabeh telu ing 255 menehi putih, kabeh ing 0 menehi ireng. RGB pilihan sing pas nalika kowe butuh ngitung nganggo warna, lan rgba() nambah transparansi ing ndhuwur.
- Sintaksis:
- rgb(R, G, B)
- Rentang:
- 0–255 saben channel
- Paling cocog kanggo:
- kode, canvas, transparansi karo rgba()
Tabel referensi saka HSL menyang RGB
Werna CSS sing paling umum, dikonversi saka HSL menyang RGB.
| Warna | 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) |