HSL inaelezea rangi jinsi watu wanavyoongea: hue gani, jinsi rangi ilivyo yenye rangi (saturation), na jinsi inavyong’aa (lightness). Kubadilisha msimbo wa HEX kwenda HSL ni njia ya haraka kupata rangi kwa fomati ambayo unaweza kuirekebisha — kuiweka ang’avu, kuiweka laini, au kujenga skeli nzima kutoka kwake.
Jinsi uongozaji wa HEX hadi HSL unavyofanya kazi
- Badilisha msimbo wa HEX kuwa RGB na ugawanye kila channel kwa 255, ili tatu ziwe kati ya 0 na 1.
- Tafuta kubwa zaidi na ndogo zaidi ya thamani hizo tatu. Wastani wao ni urefu wa mwanga L.
- Tofauti kati yao ndio inaamua saturation S: igawanye kwa (2 − max − min) kwa rangi zilizo ang’avu, au kwa (max + min) kwa zile zinazo ngumu.
- Channel yenye thamani ya juu inachagua hue H — nyekundu kwa 0°, kijani kwa 120°, bluu kwa 240° — na channel nyingine mbili huweka hue ndani ya segimenti hiyo.
Mfano uliofanya kazi
Hesabu ni sahihi, lakini thamani za HSL kawaida zinakaribiwa kwa nyanja nzima za digrii na asilimia. Kubadilisha tena kunaweza kusababisha tofauti ya hatua moja au mbili za RGB kutoka asilia — haioniwi kwa vitendo, lakini ni muhimu kujua ikiwa unazungusha rangi mara kwa mara.
HEX na HSL obofye
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
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
HEX to HSL reference table
Rangi za CSS zinazotumika zaidi, zimetumika kutoka HEX hadi HSL.
| Rangi | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |