HSL téh cara ramah pikeun milih warna, sedengkeun RGB nyaéta naon anu sabenerna dipaké ku layar, API canvas jeung kode gambar. Konverter ieu ngarobah unggal tripel hue, saturation jeung lightness jadi kanal 0–255 anu pas.
Kumaha konvérsi HSL ka RGB jalanna
- Robah S jeung L jadi fraksi sarta itung chroma C = (1 − |2L − 1|) × S.
- Bagikeun hue ku 60 pikeun manggihan segménna dina roda warna sarta itung nilai antara X = C × (1 − |(H/60 mod 2) − 1|).
- Tugaskeun C, X jeung 0 kana slot R, G jeung B nurutkeun segmén éta.
- Tambahkeun offset lightness L − C/2 ka tilu kanal sarta kalikeun ku 255.
Conto nu jalan
Hasilna pas nepi ka pembulatan ahir kana nilai bulat kanal. Nilai hue atawa saturation fraksional ditampi sarta bakal didekkeun kana tripel RGB pangcaketna.
HSL jeung RGB dijelaskeun
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
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()
tabel rujukan HSL ka RGB
Warna CSS anu paling umum, dikonversi ti HSL ka 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) |