Kuchagua rangi kwa HSL ni rahisi, lakini stylesheet, kuwasilisha muundo na nyaraka za chapa bado zinaendesha kwa HEX. Kigeuzi hiki kinaziba pengo na kukupa msimbo wa tarakimu sita kwa mchanganyiko wowote wa hue, saturation na lightness.
Jinsi uongozaji wa HSL hadi HEX unavyofanya kazi
- Geuza saturation na lightness kuwa sehemu: 60% inakuwa 0.6.
- Hesabu chroma C = (1 − |2L − 1|) × S — hiyo inaonyesha umbali wa rangi kutoka kijivu.
- Tumia hue kuweka chroma kwenye channel za nyekundu, kijani na bluu, kisha pindisha zote tatu kwa L − C/2.
- Zidisha kila channel kwa 255, uzungenishe, na uiandike kama tarakimu mbili za hexadecimal.
Mfano uliofanya kazi
Kuzaa kunafanyika mara moja, katika hatua ya mwisho, wakati kila channel inavikwa kwenye thamani kamili ya 0–255. Matokeo ni msimbo wa HEX uliokaribu zaidi na ingizo lako la HSL na kwa kawaida sawa na kile chombo cha muundo kinachoonyesha.
HSL na HEX obofye
Ni nini HSL?
HSL inaigawanya rangi katika hue (0–360° kwenye gurudumu la rangi), saturation (ukali wa rangi, 0–100%) na lightness (uwazi/angaza, 0–100%). Kwa kuwa kila sehemu inafanana na jinsi watu wanavyotoa sifa za rangi, HSL ni muundo rahisi zaidi kwa kujenga tints, shades na paleti zenye muendelezo — kwa mkono au kwa code.
- Sintaksia:
- hsl(H, S%, L%)
- Wigo:
- 0–360°, 0–100%, 0–100%
- Bora kwa:
- paleti, tints na shades, theming
Ni nini HEX?
Msimboli wa HEX ni nambari ya hexadecimal yenye tarakimu sita ambayo huhifadhi channel za red, green na blue za rangi nyuma ya alama ya kuongoza #. Kila jozi ya tarakimu inashughulikia channel moja, kutoka 00 (hakuna) hadi FF (kamilifu), ambayo inatoa rangi milioni 16.7 sawa na RGB kwa noti fupi zaidi. HEX ndilo chaguo chaguo msingi katika CSS, zana za muundo na miongozo ya chapa.
- Sintaksia:
- #RRGGBB
- Wigo:
- 00–FF kwa kila channel
- Bora kwa:
- CSS, kupeana muundo, miongozo ya chapa
HSL to HEX reference table
Rangi za CSS zinazotumika zaidi, zimetumika kutoka HSL hadi HEX.
| Rangi | 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 |