RGB ngandhani layar pira cahya sing dikuwatake; HSL ngandhani kowe kados pundi warna katon. Ngonversi telung channel dadi hue, saturation lan lightness nggawe warna gampang diatur kanthi manual.
Carane konversi saka RGB dadi HSL
- Bagi R, G lan B karo 255 supaya saben nilai ana ing antarane 0 lan 1.
- Goleki maksimum lan minimum saka telu — rata-ratane iku lightness L.
- Yen maksimum lan minimum padha, warna iku abu-abu: hue lan saturation loro-lorone 0.
- Yen ora, turunkan S saka jarak antar maksimum lan minimum, lan waca H saka channel sing dadi maksimum.
Conto kerja
Pas ing prinsip. Amarga H, S lan L biasane ditampilake minangka angka bulat, ngowahi bali bisa mindhah salah siji channel karo siji utawa loro langkah.
RGB lan HSL dijlentrehake
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()
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
Tabel referensi saka RGB menyang HSL
Werna CSS sing paling umum, dikonversi saka RGB menyang 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%) |