Kusankha utoto mu HSL ndikupezeka bwino, koma stylesheet, kutengedwa kwa mapangidwe ndi zikalata za mtundu zikugwiritsanso ntchito HEX. Wosinthira uyu amathetsa kukhudzana kumeneko ndipo amakupatsani code ya masitolo asanu ndi asanu ndi atatu ya hue, saturation ndi lightness iliyonse.
Mmene kusintha kwa HSL kukhala HEX kumagwirira ntchito
- Sinthani saturation ndi lightness kukhala ma fraction: 60% ikakhala 0.6.
- Pezani chroma C = (1 − |2L − 1|) × S — izi ndi mmene utoto uli kutali ndi grey.
- Gwiritsani ntchito hue kuti muike chroma yomweyo pa red, green ndi blue channels, kenako kubwezeretsa onse atatu ndi L − C/2.
- Pezani chanel iliyonse ndi kuikweza pa 255, kuzungulira, ndi kulemba ngati ma hexadecimal digits awiri.
Chitsanzo chomwe chagwira ntchito
Kuzungulira kumachitika kamodzi, mu sitepe yomaliza, pomwe chanel iliyonse imaponyedwera pa 0–255 yokwanira. Zotsatira ndi HEX yabwino kwambiri ku HSL yomwe mwapereka ndipo nthawi zambiri imafanana ndi zomwe chida cha design chimasonyeza.
HSL and HEX 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 HEX ndi chiyani?
HEX ikhala nambala ya hexadecimal ya manambala asanu ndi atatu yomwe imasunga njira za red, green ndi blue za mtundu yomwe imayamba ndi #. Pa maziko, ma pair a manambala akusunga chanel imodzi, kuyambira 00 (palibe) mpaka FF (kathunthu), zomwe zimapereka mitundu 16.7 miliyoni mofanana ndi RGB koma m'kutanthauzira kofupikitsa. HEX ndiyachizolowezi mu CSS, zida za design ndi malamulo a mtundu.
- Syntax:
- #RRGGBB
- Range:
- 00–FF pa channel
- Best for:
- CSS, kupereka mapulani a design, malamulo a mtundu
HSL to HEX reference table
Mitundu yophweka kwambiri ya CSS, yasinthidwa kuchokera ku HSL kupita ku HEX.
| Mtundu | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |