HSL ndi njira yosangalatsa yopangira mtundu, RGB ndiomwe mawonekedwe a skrini, canvas APIs ndi code ya zithunzi zimadya. Wosinthira uyu amasintha hue, saturation ndi lightness kukhala njira zenizeni za chiteshi cha 0–255.
Mmene kusintha kwa HSL kukhala RGB kumagwirira ntchito
- Sinthani S ndi L kukhala ma fraction ndi kuwerengera chroma C = (1 − |2L − 1|) × S.
- Gawani hue ndi 60 kuti muone gawo lake pa wheel ya mitundu ndikuwerengera mtengo wapakati X = C × (1 − |(H/60 mod 2) − 1|).
- Patsani C, X ndi 0 ku ma slot a R, G ndi B molingana ndi gawo lomweli.
- Onjezani offset ya lightness L − C/2 ku ma channel onse atatu kenako multiliply ndi 255.
Chitsanzo chomwe chagwira ntchito
Zotsatira ndizowona mpaka pakuyika pamwamba pa ma channel total. Ma fractional hue kapena saturation amathandizidwa ndipo amangotsala pa RGB triple yofala kwambiri.
HSL and RGB explained
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
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()
HSL to RGB reference table
Mitundu yophweka kwambiri ya CSS, yasinthidwa kuchokera ku HSL kupita ku RGB.
| Mtundu | 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) |