HEX-ը HSL-ի վերածող գործիք. ինչպես է այն աշխատում և ինչու է այն օգտակար
Ինչ է HEX-ը և ինչպես է այն կոդավորում գույնը
HEX (վեցանկյուն) գույնի կոդը RGB տարածության կոմպակտ ներկայացումն է, որն օգտագործում է 16-ական (base-16) թվանշաններ: Վեցանիշ ձևաչափում, օրինակ #1E90FF, յուրաքանչյուր երկու նիշ ներկայացնում է կարմիր, կանաչ և կապույտ բաղադրիչները (00-ից FF, այսինքն 0-255 տասնորդական): Եռանիշ սղագրությունը, ինչպես #abc, ընդլայնվում է կրկնապատկելով յուրաքանչյուր թվանշանը, այսինքն #aabbcc:
HEX-ը լայնորեն օգտագործվում է CSS-ում և դիզայնի գործիքներում, քանի որ այն կարճ է և ճշգրիտ: Սակայն այն դժվար է ընկալել մարդու համար. մտովի հարմարեցնել լուսավորությունը կամ հագեցվածությունը՝ նայելով վեցանկյուն կոդին, գրեթե անհնար է: Այստեղ է, որ HSL-ը գալիս է օգնության:
HSL-ի կառուցվածքը. գույնի մարդկային ընկալման լեզուն
HSL-ը (Hue, Saturation, Lightness) գույնը նկարագրում է երեք պարամետրով.
- Hue (երանգ) – գույնի անկյունը գունավոր անիվի վրա, չափվում է աստիճաններով (0–360): 0°-ը կարմիրն է, 120°-ը՝ կանաչը, 240°-ը՝ կապույտը, իսկ 360°-ը կրկին կարմիրն է:
- Saturation (հագեցվածություն) – գույնի ինտենսիվությունը տոկոսներով (0% – մոխրագույն, 100% – ամբողջական գույն):
- Lightness (լուսավորություն) – պայծառությունը սևից սպիտակ սանդղակով (0% – սև, 100% – սպիտակ, 50% – մաքուր գույն):
HSL-ի առանցքային առավելությունն այն է, որ փոխելով միայն լուսավորությունը (lightness) դուք պահպանում եք նույն երանգը: Սա հնարավորություն է տալիս հեշտությամբ ստեղծել թեմաների ստվերային տարբերակներ, hover-էֆեկտներ կամ ամբողջ գունապնակներ՝ առանց գույնի բուն էությունը կորցնելու:
Ինչպես է աշխատում HEX-ից HSL փոխարկումը
Փոխարկման գործընթացը տեղի է ունենում ձեր բրաուզերում, ոչ մի տվյալ չի ուղարկվում սերվեր: Ալգորիթմը հետևյալն է.
- Վեցանկյուն կոդը վերածվում է RGB արժեքների (0–255 միջակայքում):
- RGB-ն նորմալացվում է 0–1 միջակայքի, ապա հայտնաբերվում է max, min և delta = max – min:
- Երանգը (H) հաշվարկվում է ըստ max-ի բաղադրիչի.
- Եթե delta = 0, H = 0:
- Եթե max = R, H = (60 × ((G – B) / delta) + 360) % 360:
- Եթե max = G, H = (60 × ((B – R) / delta) + 120) % 360:
- Եթե max = B, H = (60 × ((R – G) / delta) + 240) % 360:
- Հագեցվածությունը (S) հաշվարկվում է` S = delta / (1 - |2 × lightness - 1|) × 100%, որտեղ lightness = (max + min) / 2:
- Լուսավորությունը (L) արտահայտվում է տոկոսներով:
Օրինակ, #4f46e5 (ինդիգո երանգ) փոխակերպվում է HSL(242°, 77%, 59%):
Գործիքը միաժամանակ ցուցադրում է գույնը նաև RGB, HSV, CMYK և LAB ձևաչափերում, այնպես որ կարող եք պատճենել ձեզ անհրաժեշտ ցանկացած ներկայացում:
Ծայրամասային դեպքեր, գամուտ և սխալների կառավարում
Գործիքն ընդունում է միայն վավեր վեցանիշ կամ եռանիշ հեքս կոդեր, # նշանով կամ առանց դրա: Եթե մուտքագրում եք սխալ արժեք (անվավեր նիշ, սխալ երկարություն), ցուցադրվում է սխալի հաղորդագրություն. «Մուտքագրեք հեքս գույն #4f46e5 կամ #abc ձևաչափով»:
Կարևոր սահմանափակում. ստանդարտ HEX-ը (վեցանիշ կամ եռանիշ) չի պարունակում ալֆա (թափանցիկություն) տեղեկատվություն, և HSL-ը նույնպես ալֆա բաղադրիչ չունի: Փոխարկումը միշտ վերաբերում է ամբողջովին անթափանց գույներին (alpha = 1):
Եթե անցնեք այլ գունային տարածություն (օրինակ՝ CMYK կամ LAB) և մուտքագրեք արժեք, որը դուրս է տեսանելի RGB գամուտից, գույնը կհարմարեցվի մոտակա ցուցադրելի գույնին: Սա նշանակում է, որ հետադարձ փոխարկելով այն HEX-ի, կարող է առաջանալ փոքր տեղաշարժ: Բացի այդ, CMYK արժեքները միայն էկրանային գնահատում են և չպետք է օգտագործվեն պրոֆեսիոնալ տպագրության համար առանց տրամաչափման:
HEX, HSL, HSV, CMYK, LAB – համեմատական վերլուծություն
| Ձևաչափ | Նկարագրություն | Առավելություն | Թերություն |
|---|---|---|---|
| HEX | 6 (կամ 3) վեցանկյուն նիշ | Կարճ, CSS-ում ստանդարտ | Դժվար է մտովի ճշգրտել |
| RGB | 3 բաղադրիչ 0–255 | Հստակ ներկայացնում է էկրանի գույները | Մարդու համար ոչ ինտուիտիվ |
| HSL | H 0–360°, S 0–100%, L 0–100% | Հեշտ հասկանալի, տրամաբանական ճշգրտում | Չի պարունակում ալֆա |
| HSV | H, S, V (արժեք/պայծառություն) | Օգտակար է գրաֆիկական դիզայնում | L-ի և V-ի տարբերությունը շփոթեցնող է |
| CMYK | C, M, Y, K | Տպագրության ստանդարտ | Ոչ ճշգրիտ էկրանին, գամուտի սահմանափակումներ |
| LAB | L, a, b | Ընդգրկում է մարդկային տեսանելի ամբողջ գամուտը | Բարդ հասկանալի, ոչ CSS-ում |
HSL vs HSV – երկուսն էլ օգտագործում են նույն աստիճանային երանգը, բայց վերաբերում են «պայծառությանը» տարբեր կերպ: HSV-ի V (value) բաղադրիչը չափում է առավելագույն բաղադրիչի ինտենսիվությունը, մինչդեռ HSL-ի L-ն միջին արժեքն է: Այս տարբերությունը հանգեցնում է նրան, որ HSL-ը ավելի լավ է մոտենում մարդկային ընկալմանը, հատկապես միջին լուսավորություններում:
HSL-ի կիրառումը վեբ մշակման մեջ և մատչելիություն
Front-end մշակողները հաճախ ստանում են գույներ HEX ձևաչափով դիզայնի մոկափերից: HSL-ի փոխարկելով նրանք կարող են.
- CSS custom properties-ում պահել hsl() ֆունկցիան, ապա փոխել միայն L-ը dark/light թեմաների համար:
- Ստեղծել hover-էֆեկտներ՝ ավելացնելով 10% lightness-ի փոփոխություն:
- Կառուցել ամբողջ գունապնակներ (complementary, analogous, monochromatic)՝ մանիպուլյացիայի ենթարկելով միայն H կամ S արժեքները:
Մատչելիության տեսանկյունից HSL-ն օգնում է արագ ստուգել հակադրության գործակիցները: WCAG ստանդարտներին համապատասխանելու համար բավական է պահպանել նույն երանգը և բարձրացնել լուսավորության տարբերությունը տեքստի և ֆոնի միջև: HSL-ի դեպքում դուք տեսողականորեն հստակ պատկերացնում եք, թե ինչքան «light» կամ «dark» է գույնը:
Հաճախ տրվող հարցեր (FAQ)
1. Կարո՞ղ եմ մուտքագրել hex կոդ առանց # նշանի:
Այո, գործիքն ընդունում է ինչպես #4f46e5, այնպես էլ 4f46e5 ձևաչափերը:
2. Ինչու՞ է CMYK-ի արժեքը միայն գնահատական:
Քանի որ CMYK-ը տպագրական տարածություն է, իսկ էկրանը ցուցադրում է RGB: Փոխարկումը հիմնված է իդեալական մոդելի վրա, սակայն իրական տպագրության արդյունքը կախված է տպիչի, թղթի և թանաքի բնութագրերից:
3. Ինչպե՞ս վարվել, եթե մուտքագրած գույնը գամուտից դուրս է:
Գործիքն ավտոմատ կերպով կարգավորում է գույնը, որպեսզի այն ցուցադրվի էկրանին: Սակայն եթե ձեզ անհրաժեշտ է ճշգրիտ գույն, խորհուրդ է տրվում մնալ ստանդարտ RGB գամուտի սահմաններում:
4. Հնարավո՞ր է վերադարձնել HSL-ը HEX-ի:
Այո, գործիքը ցուցադրում է նաև HEX արժեքը, այնպես որ կարող եք պատճենել այն: Փոխարկումը երկկողմանի է:
5. Ի՞նչ է պատահում, եթե մուտքագրեմ 4 նիշանոց hex (օրինակ #1234):
Սա ստանդարտ CSS-ում ալֆա ալիքով hex է (RGBA), բայց մեր գործիքն աջակցում է միայն 3 կամ 6 նիշանոց ձևաչափերին: 4 նիշանոց (կամ 8 նիշանոց) կոդը ճանաչվում է որպես անվավեր:
6. Արդյո՞ք գործիքը պահում է իմ մուտքագրած գույնի տվյալները:
Ոչ: Բոլոր հաշվարկները կատարվում են ձեր բրաուզերում (client-side): Ոչ մի տեղեկություն չի ուղարկվում կամ պահպանվում սերվերում: