Ի՞նչ է անում այս էջը
Էջը ստանում է գույն՝ արտահայտված HSL մոդելով (hue՝ երանգ 0–360 աստիճան, saturation՝ հագեցվածություն տոկոսներով, lightness՝ լուսավորություն տոկոսներով) և ակնթարթորեն ցույց է տալիս համարժեք RGB (0–255) արժեքները։ Այսպիսով, դուք կարող եք տեղափոխվել մարդկային տրամաբանության համար կառուցված գունային մոդելից (որտեղ լուսավորությունը փոխելիս երանգը մնում է անփոփոխ) դեպի այն ճշգրիտ թվերը, որոնք էկրանն օգտագործում է լույս արձակելու համար:
Բոլոր դաշտերը թարմացվում են միանգամից՝ HEX, RGB, HSL, HSV, CMYK և LAB: Օրինակ, մուտքագրելով 243, 75%, 59%, ստանում եք RGB 79, 70, 229 և համապատասխան HEX արժեք։ Փոխարկումը կատարվում է անմիջապես ձեր բրաուզերում. ոչ մի տվյալ չի բեռնվում սերվեր:
Ի՞նչն է տարբերակում այս էջը
Շատ գունային փոխարկիչներ միայն տալիս են թվային համարժեքները, սակայն այստեղ շեշտը դրված է այն փաստի վրա, որ HSL-ը նախագծված է մարդկային պատճառաբանության համար, մինչդեռ RGB-ը էկրանային գունային մաթեմատիկայի աշխատանքային տարածքն է։
- Լուսավորության փոփոխությունը HSL-ում պահպանում է երանգը։ Սա նշանակում է, որ դուք կարող եք ստեղծել թեմայի գունապնակ՝ պահելով նույն երանգը և միայն կարգավորելով լուսավորությունն ու հագեցվածությունը, և վստահ լինել, որ գույնի «ընտանիքը» չի փոխվի: Սա HSL-ը դարձնում է իդեալական գունապնակների և թեմաների գեներացման համար:
- Փոխարկումը կորուստ չունի։ Յուրաքանչյուր վավեր HSL արժեք (երանգ 0–360, հագեցվածություն 0–100%, լուսավորություն 0–100%) քարտեզագրվում է RGB եռյակի, որը գտնվում է ցուցադրման հնարավոր միջակայքում (0–255 յուրաքանչյուր բաղադրիչի համար): Հակառակ փոխարկումը նույնպես միարժեք է:
- Ոչ մի գամուտից դուրս գալու (out‑of‑gamut) սեղմում։ Ի տարբերություն LAB-ից կամ CMYK-ից RGB փոխարկումների, HSL-ի բոլոր արժեքներն արդեն իսկ RGB գամուտի ներսում են: Հետևաբար, գույնի տեղաշարժ հետադարձ փոխարկման ժամանակ տեղի չի ունենում:
- Սա նշանակում է, որ եթե դուք HSL-ով սահմանված գույնը վերածեք RGB-ի, այն կարող եք վերադարձնել HSL-ի և ստանալ ճիշտ նույն համարները:
Այլ մոդելներից փոխարկելիս, օրինակ LAB-ից կամ CMYK-ից RGB, որոշ գույներ կարող են դուրս գալ էկրանի վերարտադրման սահմաններից, և դրանք սեղմվում են (clipping)՝ առաջացնելով գույնի կորուստ: HSL-ի դեպքում այդ խնդիրը գոյություն չունի:
Ինչպե՞ս է աշխատում փոխարկումը
HSL-ը RGB-ի փոխարկելու համար կիրառվում է ստանդարտ ալգորիթմ, որը սահմանված է CSS գունային մոդուլում: Ահա հիմնական քայլերը.
- Լուսավորությունը (L) 0–100%–ից վերածվում է 0–1 միջակայքի:
- Հագեցվածությունը (S) նույնպես դառնում է 0–1:
- Երանգը (H) 0–360°–ից վերածվում է 0–1 միջակայքի (բաժանելով 360-ի):
- Կիրառվում է պայմանական բանաձև, որը կախված է H-ի վեց հատվածներից (0–60°, 60–120° և այլն):
- Ստացված R, G, B արժեքները (0–1) բազմապատկվում են 255-ով և կլորացվում:
Արդյունքը միշտ ամբողջ թիվ է 0–255 միջակայքում: Օրինակ, վերցնենք H = 243°, S = 75%, L = 59%:
- L = 0.59, S = 0.75, H = 0.675 (243/360):
- Հաշվարկից ստացվում է R ≈ 0.31, G ≈ 0.275, B ≈ 0.898:
- 255-ով բազմապատկելով՝ R = 79, G = 70, B = 229:
Այս ալգորիթմը կատարվում է JavaScript-ով ձեր բրաուզերում: Ոչ մի տվյալ չի ուղարկվում ցանց: Էջը կարող է ցույց տալ նաև HSV և LAB արժեքները, սակայն HSL-ից RGB-ի ուղիղ փոխարկումն է ամենաճշգրիտն ու արագը:
Մուտքեր և ելքեր
Մուտքային ձևաչափը պետք է խստորեն հետևի օրինակին. երեք արժեք՝ երանգը 0–360 ամբողջ թիվ, հագեցվածությունը և լուսավորությունը տոկոսներով, ստորակետերով առանձնացված: Օրինակ՝ 243, 75%, 59%:
Եթե մուտքագրումը սխալ է, էջը ցույց է տալիս հաղորդագրություն՝ «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%:»
Ելքեր՝ բոլորը թարմացվում են միաժամանակ.
| Մոդել | Տիրույթ | Օրինակ (243, 75%, 59%) |
|---|---|---|
| HEX | #RRGGBB | #4F46E5 |
| RGB | 0–255 յուրաքանչյուրը | 79, 70, 229 |
| HSL | H 0–360°, S 0–100%, L 0–100% | 243°, 75%, 59% |
| HSV | H 0–360°, S 0–100%, V 0–100% | 243°, 69%, 90% |
| CMYK | C 0–100%, M 0–100%, Y 0–100%, K 0–100% | 65%, 69%, 0%, 10% |
| LAB | L 0–100, a, b | 36, 42, -74 |
Կարևոր նշում CMYK-ի մասին. էկրանին ցուցադրվող CMYK արժեքը մոտավոր գնահատական է և կարող է զգալիորեն տարբերվել պրոֆեսիոնալ տպագրության մեջ օգտագործվող արժեքներից: Տպագրական արդյունքը կախված է թղթի տեսակից, թանաքից, տպիչի պրոֆիլից և այլ գործոններից: Այս գործիքը նախատեսված չէ տպագրության համար ճշգրիտ CMYK արժեքներ ստանալու համար:
Ո՞ւմ է պետք այս գործիքը
- Դիզայներներին, ովքեր կառուցում են գունապնակներ կամ թեմաներ և կարիք ունեն RGB արժեքների՝ կոդի մեջ օգտագործելու համար: HSL-ով աշխատելիս հեշտ է ստեղծել նույն երանգի մի քանի երանգավորում՝ փոխելով միայն լուսավորությունը: Այնուհետև այդ արժեքները պետք է թարգմանել RGB-ի՝ CSS-ում, SVG-ում կամ canvas-ում օգտագործելու համար:
- Front-end մշակողներին, ովքեր գունային արժեքներ են տեղափոխում դիզայնի գործիքից (որը հաճախ օգտագործում է HSL) դեպի CSS կամ այլ կոդ, որն ակնկալում է RGB:
- Բոլորին, ովքեր նախընտրում են գույնի մասին մտածել մարդկային ընկալմանը մոտեցող տերմիններով (երանգ, հագեցվածություն, լուսավորություն) և կարիք ունեն ճշգրիտ էկրանային թվերի:
Գործիքը հատկապես օգտակար է հասանելիության (accessibility) տեսանկյունից. օրինակ, HSL-ում լուսավորությունը փոխելով կարող եք ապահովել, որ տեքստի և ֆոնի հակադրությունը բավարարի WCAG չափանիշներին: Այնուհետև RGB արժեքները կարող եք ուղղակիորեն տեղադրել կոդի մեջ:
Նշումներ և սահմանափակումներ
- Գույնի մոդելների տարբերությունները. RGB-ն հավելումային մոդել է. գույնը ստեղծվում է լույսի ավելացմամբ (էկրաններ): CMYK-ը հանումային մոդել է. գույնը ստեղծվում է լույսի կլանմամբ (տպագրություն): HSL-ը և HSV-ն միջանկյալ մոդելներ են, որոնք ավելի մոտ են մարդկային ընկալմանը, սակայն դրանց թվային արժեքները ուղղակիորեն չեն համապատասխանում ֆիզիկական լույսի ինտենսիվությանը:
- Գամուտի սահմանափակումներ. HSL-ի բոլոր արժեքները գտնվում են sRGB գամուտի ներսում, ուստի էկրանին ցուցադրելիս խնդիր չի առաջանում: Սակայն LAB-ը կամ CMYK-ն ունեն ավելի լայն գամուտ, և այդ մոդելներից RGB փոխարկելիս որոշ գույներ կարող են դուրս մնալ էկրանի հնարավորություններից (out‑of‑gamut):
- Բրաուզերային փոխարկում. Բոլոր հաշվարկները կատարվում են ձեր սարքում: Սա ապահովում է գաղտնիություն և արագություն: Եթե ցանկանում եք ստուգել ալգորիթմի ճշգրտությունը, կարող եք համեմատել արդյունքները CSS-ի
hsl()ֆունկցիայի հետ (CSS-ում HSL-ն ուղղակիորեն աջակցվում է, սակայն երբեմն անհրաժեշտ է RGB-ի թվային արժեքը):
Հաճախ տրվող հարցեր
1. Կարո՞ղ եմ HSL արժեքը մուտքագրել առանց տոկոսանշանի («%»)
Ոչ, հագեցվածությունը և լուսավորությունը պետք է նշվեն տոկոսներով, ինչպես օրինակում՝ 243, 75%, 59%: Առանց տոկոսի արժեքը կդիտարկվի որպես սխալ:
2. Ինչո՞ւ CMYK արժեքը տարբերվում է տպագրականից Քանի որ էկրանային փոխարկումը չի հաշվի առնում կոնկրետ տպիչի, թանաքի և թղթի պրոֆիլը: Ստացված CMYK-ը մոտավոր է և հիմնված է ստանդարտ sRGB-ից CMYK փոխարկման բանաձևի վրա: Տպագրության համար օգտագործեք ICC պրոֆիլներով ճշգրիտ գործիքներ:
3. Հնարավո՞ր է RGB արժեքից վերադառնալ HSL և ստանալ նույն թիվը Այո, փոխարկումը կորուստ չունի, եթե RGB արժեքը ստացվել է HSL-ից: Սակայն եթե RGB արժեքը կլորացված է (ինչպես 79, 70, 229), հետադարձ փոխարկումը կտա մոտավոր, բայց ոչ միշտ ճիշտ նույն HSL թիվը (օրինակ, 243°-ի փոխարեն կարող է լինել 242.9°), քանի որ RGB-ն ամբողջ թվեր է, իսկ HSL-ն՝ իրական թվեր:
4. Կարո՞ղ եմ օգտագործել այս գործիքը մուգ թեմայի գույներ ստեղծելու համար Այո: HSL-ում պարզապես իջեցրեք L (lightness) արժեքը (օրինակ, 20–40%), և RGB արժեքը կհամապատասխանի մուգ տարբերակին: Դուք կարող եք մի քանի կրկնություններով ստեղծել գունային սանդղակ:
5. Ինչո՞ւ էկրանին ցուցադրված գույնը երբեմն տարբերվում է RGB թվերից Ձեր մոնիտորի կալիբրացիան, գունային պրոֆիլը և դիտման անկյունը կարող են ազդել ընկալման վրա: Թվային RGB արժեքները ճշգրիտ են sRGB գունային տարածության համար, սակայն ֆիզիկական ցուցադրությունը կարող է շեղվել:
6. Կա՞ արդյոք սահմանափակում մուտքագրվող HSL արժեքների ճշգրտության վրա
Դուք կարող եք մուտքագրել տասնորդական թվեր (օրինակ, 243.5, 75.2%, 59.8%), և գործիքը կաշխատի ճիշտ: Ելքային RGB-ը կլորացվում է մինչև ամբողջ թիվ, քանի որ էկրանային RGB-ն միայն ամբողջ արժեքներ է ընդունում (0–255):