HSL apraksta krāsu tā, kā par to runā cilvēki: kāds tonis, cik piesātināta, cik gaiša. HEX pārvēršana HSL ir ātrākais veids, kā iegūt krāsu formā, ko var reāli regulēt — izcelt, nomierināt vai izveidot no tās veselu skalu.
Kā darbojas HEX uz HSL konvertēšana
- Pārvērt HEX kodu RGB un katru kanālu dala ar 255, lai visi trīs būtu diapazonā no 0 līdz 1.
- Atrodi no trijām vērtībām lielāko un mazāko. To vidējā vērtība ir gaišums L.
- To starpība nosaka piesātinājumu S: dalīt ar (2 − max − min) gaišajām krāsām vai ar (max + min) tumšajām.
- Kanāls, kas satur maksimumu, nosaka toni H — sarkans 0°, zaļš 120°, zils 240° — un pārējie divi kanāli pozicionē toni šajā segmentā.
Praktisks piemērs
Matemātika ir precīza, bet HSL vērtības parasti noapaļo līdz veselām grādiem un procentiem. Pārvēršot atpakaļ, rezultāts var atšķirties par vienu vai diviem RGB soļiem — praksē nemanāmi, bet vērts zināt, ja krāsas regulāri griež šurpu‑turpu.
HEX un HSL izskaidrojums
Kas ir HEX?
HEX kods ir sešciparu heksadecimāls skaitlis, kas aiz vadības zīmes # glabā krāsas sarkanās, zaļās un zilās kanāla vērtības. Katra ciparu pāris attēlo vienu kanālu no 00 (nav) līdz FF (pilna), kas dod tos pašus 16.7 miljonus krāsu kā RGB, bet īsākā pierakstā. HEX ir noklusējums CSS, dizaina rīkos un zīmola vadlīnijās.
- Sintakse:
- #RRGGBB
- Diapazons:
- 00–FF per channel
- Vislabāk piemērots:
- CSS, dizaina nodošana, zīmola vadlīnijas
Kas ir HSL?
HSL sadala krāsu toņos (0–360° krāsu ritenī), piesātinājumā (cik krāsaina, 0–100%) un gaišumā (cik spilgta, 0–100%). Tā kā katra daļa atbilst tam, kā cilvēki apraksta krāsu, HSL ir visvienkāršākais formāts tintiņu, nokrāsu un konsekventu paletju veidošanai — gan manuāli, gan kodā.
- Sintakse:
- hsl(H, S%, L%)
- Diapazons:
- 0–360°, 0–100%, 0–100%
- Vislabāk piemērots:
- paletes, tintiņas un nokrāsas, tēmu veidošana
HEX uz HSL atsauces tabula
Visizplatītākās CSS krāsas, konvertētas no HEX uz HSL.
| Krāsa | 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%) |