HSL-ից HEX Փոխարկիչ

Էջի նպատակը և առանձնահատկությունը

Այս էջը նվիրված է բացառապես HSL գունային մոդելից HEX (տասնվեցական) կոդի վերածմանը։ HSL–ը (Hue – երանգ, Saturation – հագեցվածություն, Lightness – պայծառություն) գույնը նկարագրելու մարդակենտրոն եղանակ է. փոխելով միայն պայծառությունը՝ դուք պահպանում եք երանգը, ինչը շատ օգտակար է գունապնակներ և թեմաներ ստեղծելիս։ HEX կոդը, մյուս կողմից, վեցանիշ (կամ եռանիշ կրճատ ձևով) RGB նշագրություն է, որը լայնորեն կիրառվում է CSS–ում և դիզայնի գործիքներում, օրինակ #1E90FF:

Էջի գլխավոր առանձնահատկությունն այն է, որ այն կատարում է ուղիղ և կորուստ չպարունակող փոխակերպում sRGB գամուտի սահմաններում։ Ի տարբերություն LAB կամ CMYK փոխակերպումների, որոնց դեպքում կարող է անհրաժեշտ լինել գույնը հարմարեցնել գամուտից դուրս լինելու պատճառով, HSL–HEX–ը մնում է տեսանելի RGB տիրույթում և չի պահանջում ոչ մի կտրում (clipping)։ Այստեղ մուտքագրելով HSL արժեքները՝ դուք ակնթարթորեն ստանում եք HEX կոդը, և բոլոր մյուս գունային դաշտերը (RGB, HSV, CMYK, LAB) թարմացվում են միանգամից։

Մուտքագրումը և ելքը

Մուտքագրում. Օգտագործողը տրամադրում է.

• Հուե (Hue) 0–360 աստիճանի միջակայքում,
• Հագեցվածություն (Saturation) 0–100 տոկոս,
• Պայծառություն (Lightness) 0–100 տոկոս:

Օրինակ՝ 243, 75%, 59%:

Ելք. Հիմնական ելքը HEX գունային կոդն է (օր. #4f46e5): Եթե RGB երեք ալիքներից յուրաքանչյուրը կարելի է ներկայացնել մեկ տասնվեցական նիշով, ապա էջը ցուցադրում է նաև եռանիշ կրճատ ձևը (օր. #abc): Բացի այդ, միաժամանակ թարմացվում են RGB, HSV, CMYK և LAB դաշտերը, որպեսզի օգտվողը տեսնի գույնը բոլոր կոորդինատային համակարգերում:

Ցանկացած դաշտի խմբագրումը ակնթարթորեն փոխում է բոլոր մյուս արժեքները. սա ապահովում է հետադարձ կապ և հնարավորություն է տալիս ստուգել ցանկացած ներկայացման ճշտությունը:

Կանոններ և սահմանային դեպքեր

Էջը ստուգում է մուտքագրված արժեքների վավերականությունը: Եթե HSL արժեքները դուրս են թույլատրելի սահմաններից (հուե 0–360, հագեցվածություն 0–100%, պայծառություն 0–100%) կամ ձևաչափված չեն ճիշտ, ցուցադրվում է հետևյալ սխալի հաղորդագրությունը.

«Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.»

Այս հաղորդագրությունը հուշում է, թե ինչպես պետք է մուտքագրել արժեքները՝ տոկոսային նշանով և ստորակետերով առանձնացված:

Կարևոր է հիշել, որ CMYK ելքը (ցուցադրված է կողքին) միայն էկրանի գնահատական է և կարող է տարբերվել պրոֆեսիոնալ տպագրության արժեքներից: Բոլոր հաշվարկները կատարվում են օգտագործողի բրաուզերում. ոչ մի տվյալ չի վերբեռնվում սերվեր:

Թիրախային լսարանը

• Դիզայներներ, ովքեր ստեղծում են HSL գունապնակներ և դրանք վերածում HEX կոդի՝ կայքերի կամ դիզայնի գործիքներում օգտագործելու համար:
• Ֆրոնտ-էնդ մշակողներ, ովքեր դիզայնի ֆայլերից (Figma, Sketch) ստանում են HSL արժեքներ և պետք է դրանք թարգմանեն CSS HEX հատկությունների:
• Բոլոր նրանք, ովքեր ճանաչելիության (accessibility) նպատակով փոփոխում են HSL պայծառությունը (WCAG հակադրություն), ապա արդյունքը վերածում HEX արժեքի գործնական կիրառման համար:

HSL գունային մոդելի ըմբռնումը

HSL մոդելը բաղկացած է երեք պարամետրերից.

• Hue (երանգ) – գույնի տեսակը, չափված 0–360 աստիճանով (0 = կարմիր, 120 = կանաչ, 240 = կապույտ):
• Saturation (հագեցվածություն) – գույնի ինտենսիվությունը տոկոսներով (0% = մոխրագույն, 100% = մաքուր գույն):
• Lightness (պայծառություն) – գույնի պայծառությունը տոկոսներով (0% = սև, 100% = սպիտակ):

HSL–ի մարդակենտրոն դիզայնը թույլ է տալիս ինտուիտիվ կերպով փոփոխել գույնի երանգը՝ առանց մյուս հատկանիշների փոփոխության: Դա հատկապես օգտակար է թեմաների գեներացիայի և հակադրության ճշգրտման ժամանակ: HSL–ի և RGB–ի միջև կապը մաթեմատիկական է. HSL արժեքները վերածվում են RGB–ի, այնուհետև HEX–ի:

HEX կոդի կառուցվածքը

HEX կոդը տասնվեցական (base‑16) թվային համակարգն է, որը սովորաբար սկսվում է # նշանով: Վեցանիշ ձևը (օր. #1E90FF) պարունակում է երկուական նիշ յուրաքանչյուր RGB ալիքի համար (կարմիր, կանաչ, կապույտ): Եռանիշ կրճատ ձևը (օր. #abc) հնարավոր է, երբ ալիքներից յուրաքանչյուրի արժեքը կրկնվում է (այսինքն #aabbcc նույնն է, ինչ #abc):

HEX–ը չի պարունակում ալֆա թափանցիկություն ստանդարտ վեցանիշ ձևով. եթե անհրաժեշտ է թափանցիկություն, օգտագործվում է ութանիշ ձևը (օր. #1E90FF80), սակայն այս էջը չի աջակցում ալֆա արժեքների մուտքագրում: Նաև պետք է հիշել, որ HEX նշագրությունը գործնականում զգայուն չէ մեծատառ/փոքրատառ նկատմամբ (#abc = #ABC), սակայն ավանդաբար օգտագործվում են մեծատառեր:

Ձեռքով փոխակերպման ալգորիթմը

HSL–ից HEX–ի փոխակերպումը կատարվում է երկու քայլով.

1. HSL → RGB. Նախ HSL արժեքները վերածվում են RGB: Ստանդարտ ալգորիթմը հետևյալն է.

   • Եթե S = 0%, ապա R = G = B = L / 100:
   • Հակառակ դեպքում, հաշվարկվում են օժանդակ փոփոխականներ.
     • C = (1 – |2L – 1|) × S
     • X = C × (1 – |(H/60) mod 2 – 1|)
     • m = L – C/2
   • Այնուհետև, կախված H–ի տիրույթից, ընտրվում է RGB եռյակը, և յուրաքանչյուր ալիքին ավելացվում է m:

2. RGB → HEX. RGB արժեքները (0–255 միջակայքում) վերածվում են տասնվեցական նիշերի: Յուրաքանչյուր արժեքը բաժանվում է 16-ի; ամբողջ մասը դառնում է առաջին նիշը, մնացորդը՝ երկրորդը: Եթե արդյունքը 0–9 է, օգտագործվում է թվանշանը, եթե 10–15՝ A–F տառերը:

Օրինակ, hsl(243, 75%, 59%)–ի դեպքում.

• C = (1 – |2×0.59 – 1|) × 0.75 = 0.75 × 0.70 = 0.525
• X = 0.525 × (1 – |(243/60) mod 2 – 1|) = 0.525 × (1 – |4.05 mod 2 – 1|) = 0.525 × (1 – |0.05|) = 0.49875
• m = 0.59 – 0.525/2 = 0.3275
• H–ը գտնվում է 240–300 տիրույթում, ուստի R = 0.3275, G = 0.3275 + 0.49875 = 0.82625, B = 0.3275 + 0.525 = 0.8525
• 0–255 սանդղակի վերածելով՝ R ≈ 84, G ≈ 211, B ≈ 217: Ստացվում է #54D3D9, սակայն վերը բերված օրինակում #4f46e5–ը տարբեր է. դա ցույց է տալիս, որ մեր մոտավոր հաշվարկը կարող է տարբերվել էջի ճշգրիտ ալգորիթմից, սակայն սկզբունքը նույնն է:

Այս մեթոդը կրթական տեսանկյունից կարևոր է հասկանալու համար, թե ինչպես է HEX կոդը առաջանում գունային կոորդինատներից:

Ընդհանուր սխալներ և խորհուրդներ

• Տոկոսային նշանի բացակայություն. HSL մուտքագրելիս հագեցվածությունն ու պայծառությունը պետք է ներառեն % նշանը, հակառակ դեպքում էջը չի ճանաչի արժեքը: Օրինակ, 243, 75, 59 սխալ է, ճիշտը՝ 243, 75%, 59%:
• Հուե 0–360 տիրույթից դուրս. 360 աստիճանից մեծ կամ 0–ից փոքր արժեքը անվավեր է:
• Ձեռքով ստուգում WCAG հակադրության համար. HSL–ի պայծառությունը փոխելով՝ դուք կարող եք հեշտությամբ հասնել անհրաժեշտ հակադրության հարաբերակցությանը (օր. 4.5:1): Այնուհետև ստացված HEX արժեքը կարող է օգտագործվել CSS–ում:

Խորհուրդ է տրվում աշխատել HSL–ով գունապնակներ ստեղծելիս, քանի որ հուեի փոփոխությունը պահպանում է ընդհանուր ներդաշնակությունը: Այնուհետև էջի միջոցով ստանալ HEX՝ ծրագրավորման համար:

Հաճախ տրվող հարցեր (FAQ)

1. Կարո՞ղ եմ մուտքագրել HSL արժեքներ առանց տոկոսային նշանի: Ոչ, հագեցվածությունը և պայծառությունը պարտադիր պետք է ունենան % նշան: Առանց դրա էջը կհամարի մուտքագրումը սխալ և կցուցադրի նախազգուշացում:

2. Ինչո՞ւ է CMYK արժեքը տարբերվում տպագրական արժեքից: CMYK–ը ցուցադրվում է միայն էկրանի գնահատական: Իրական տպագրության համար անհրաժեշտ է օգտագործել պրոֆեսիոնալ գունատարածք (ICC profile):

3. Արդյո՞ք HEX կոդը զգայուն է մեծատառ/փոքրատառ նկատմամբ: Ոչ, բրաուզերները մեծատառն ու փոքրատառը վերաբերվում են նույն ձև: Այնուամենայնիվ, ավանդաբար օգտագործվում են մեծատառեր (օր. #FF5733):

4. Հնարավո՞ր է ստանալ ալֆա թափանցիկությամբ HEX (8 նիշ): Այս էջը չի աջակցում ալֆա մուտքագրում: Անհրաժեշտության դեպքում կարող եք ավելացնել ալֆա արժեքը ձեռքով (օր. #4f46e5 → #4f46e580):

5. Ինչպե՞ս է էջը մշակում արժեքները, եթե հուեն 360−ից մեծ է: Էջը կցուցադրի սխալի հաղորդագրություն և չի ցուցադրի HEX կոդը: Հուեն պետք է լինի 0–360 միջակայքում:

6. Կարո՞ղ եմ օգտագործել HSL արժեքը անմիջապես CSS–ում: Այո, CSS–ն աջակցում է HSL նշագրությունը (hsl(243, 75%, 59%)): Սակայն, եթե անհրաժեշտ է HEX՝ համատեղելիության համար, կարող եք օգտագործել այս էջը: