RGB imauza skrini kuchuluka kwa kuwala komwe iyenera kutulutsa; HSL imakuuzani momwe utoto umasowa kugwirira ntchito. Kusintha ma channel atatu kukhala hue, saturation ndi lightness kumapangitsa utoto kukhala wosavuta kusintha pamanja.
Mmene kusintha kwa RGB kukhala HSL kumagwirira ntchito
- Gawani R, G ndi B pa 255 kuti value iliyonse ikhale pakati pa 0 ndi 1.
- Tenga maximum ndi minimum mwa atatu — avareji yawo ndi lightness L.
- Ngati maximum ndi minimum ndizofanana, utoto ndi grey: hue ndi saturation ndizithunziko 0.
- Koma ngati sizingofanana, pewani S kuchokera kusiyana pakati pa maximum ndi minimum, ndipo werengani H kuchokera ku chanel yomwe ili maximum.
Chitsanzo chomwe chagwira ntchito
Cholondola mu mfundo. Popeza H, S ndi L nthawi zambiri zimawonetsedwa ngati manambala okwanira, kubwerera kumatha kusuntha chanel ndi sitepe imodzi kapena ziwiri.
RGB and HSL explained
Kodi RGB ndi chiyani?
RGB imafotokozera mtundu monga njira zitatu za kuwala — red, green ndi blue — iliyonse kuchokera ku 0 mpaka 255. Izi zikufanana ndi momwe ma skrini amagwirira ntchito: zonse zitatu pa 255 zikupereka white, zonse pa 0 zikupereka black. RGB ndi yabwino pamene mukufunika kuwerenga manambala ndi mtundu, ndipo rgba() imawonjezera translucent.
- Syntax:
- rgb(R, G, B)
- Range:
- 0–255 pa channel
- Best for:
- code, canvas, kusintha kuwonekera ndi rgba()
Kodi HSL ndi chiyani?
HSL imagawira mtundu kukhala hue (0–360° pa wheel ya mitundu), saturation (kuti ndi wokongola bwanji, 0–100%) ndi lightness (kuti ndi wotentha bwanji, 0–100%). Poona kuti gawo lililonse limafananira ndi momwe anthu amakhala akufotokoza mitundu, HSL ndi yosavuta kupanga tints, shades ndi mapaleti okhazikika — pamanja kapena mu code.
- Syntax:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Best for:
- mapaleti, tints ndi shades, theming
RGB to HSL reference table
Mitundu yophweka kwambiri ya CSS, yasinthidwa kuchokera ku RGB kupita ku HSL.
| Mtundu | 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%) |