RGB ngawartakeun layar sabaraha cahaya anu kudu dipancarkeun; HSL ngajelaskeun kumaha sabenerna warna katingalina. Ngarobah tilu saluran jadi hue, saturation jeung lightness ngajadikeun hiji warna gampang diatur ku leungeun.
Kumaha konvérsi RGB ka HSL jalanna
- Bagi R, G jeung B ku 255 sangkan unggal nilai aya antara 0 jeung 1.
- Candak nilai maksimum jeung minimum tina tilu — rata-ratana mangrupa lightness L.
- Lamun maksimum jeung minimum sarua, warnana abu-abu: hue jeung saturation duanana 0.
- Lamun henteu, turunkeun S tina sebaran antara maksimum jeung minimum, sarta baca H tina saluran anu jadi maksimum.
Conto nu jalan
Teu lepat dina prinsip. Kusabab H, S jeung L biasana ditingalkeun salaku angka bulat anu dibunderkeun, ngarobah deui bisa ngalihkeun hiji saluran ku hiji atawa dua léngkah.
RGB jeung HSL dijelaskeun
Naon éta RGB?
RGB ngajelaskeun warna salaku tilu kanal cahaya — beureum, héjo jeung biru — masing-masing ti 0 nepi ka 255. Ieu ngagambarkeun kumaha layar sabenerna gawé: katilu dina 255 jadi bodas, katilu dina 0 jadi hideung. RGB téh pilihan anu bener lamun anjeun kudu ngitung maké warna, sarta rgba() nambahkeun transparansi di luhur.
- Sintaks:
- rgb(R, G, B)
- Rentang:
- 0–255 per kanal
- Pangalusna pikeun:
- kode, canvas, transparansi kalawan rgba()
Naon éta HSL?
HSL mecah warna jadi hue (0–360° dina roda warna), saturation (sabaraha warna, 0–100%) jeung lightness (sabaraha caang, 0–100%). Kusabab masing-masing bagian cocog jeung cara jalma ngajelaskeun warna, HSL mangrupa format anu paling gampang pikeun nyieun tint, shade jeung palét anu konsisten — sacara manual atawa dina kode.
- Sintaks:
- hsl(H, S%, L%)
- Rentang:
- 0–360°, 0–100%, 0–100%
- Pangalusna pikeun:
- palét, tint jeung shade, theming
tabel rujukan RGB ka HSL
Warna CSS anu paling umum, dikonversi ti RGB ka HSL.
| Warna | 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%) |