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

Ինչ է RGB‑ից HSL փոխարկիչը

Այս էջը թույլ է տալիս մուտքագրել RGB գույնը՝ երեք թիվ 0‑ից 255 միջակայքում, և ակնթարթորեն տեսնել դրա համարժեքը HSL ձևաչափով (երանգ՝ 0–360°, հագեցվածություն և լուսավորություն՝ տոկոսներով)։ Փոխարկիչը ցույց է տալիս նաև նույն գույնը HEX, HSV, CMYK (էկրանային գնահատական) և LAB ձևաչափերում, այնպես որ կարող եք պատճենել ձեր նախագծին հարմար արժեքը։

Էջի հիմնական առանձնահատկությունը RGB‑ից HSL անցումն է. RGB‑ն էկրանային աշխատանքային մոդել է, որը հիմնված է լույսի ավելացման վրա, մինչդեռ HSL‑ը նախագծված է գույնի մասին մարդկային պատկերացման համար։ RGB‑ում մեկ ալիքի փոփոխությունը հաճախ փոխում է ընկալվող երանգը, իսկ HSL‑ում կարող եք առանձին կարգավորել լուսավորությունը՝ պահելով երանգը անփոփոխ։ Ահա թե ինչու HSL‑ն նախընտրելի է գունային գունապնակներ, թեմաներ և հասանելիության համար կոնտրաստային տարբերակներ ստեղծելիս։

Բոլոր փոխարկումները կատարվում են բրաուզերում. ոչ մի տվյալ չի վերբեռնվում սերվեր։ Կարող եք խմբագրել ցանկացած դաշտ, և մնացած բոլոր դաշտերն ակնթարթորեն թարմացվում են։

Ինչու HSL‑ն ավելի մարդկային մոդել է

RGB‑ն աշխատում է էկրանի ներքին տրամաբանությամբ՝ կարմիր, կանաչ և կապույտ լույսի ալիքների խառնում։ 0‑ն նշանակում է ալիքի անջատում, 255՝ առավելագույն ինտենսիվություն։ Սա հիանալի է մոնիտորի համար, բայց մարդու ուղեղը գույնը չի ընկալում երեք անկախ ինտենսիվությամբ:

HSL մոդելը ներկայացնում է գույնը երեք ինտուիտիվ պարամետրով.

• Hue (երանգ)՝ անկյուն գունային անիվի վրա 0‑ից 360°: 0° = կարմիր, 120° = կանաչ, 240° = կապույտ:
• Saturation (հագեցվածություն)՝ տոկոս 0% (մոխրագույն) մինչև 100% (մաքուր գույն):
• Lightness (լուսավորություն)՝ տոկոս 0% (սև) մինչև 100% (սպիտակ), 50% = «նորմալ» գույն:

Այս կառուցվածքը թույլ է տալիս, օրինակ, վերցնել ընկերության կապույտ գույնը (hue = 220°) և ստեղծել նրա բաց (lightness = 70%) և մուգ (lightness = 30%) տարբերակները՝ առանց երանգը փոխելու։ RGB‑ում նման վերահսկումը պահանջում է բարդ հաշվարկներ, քանի որ բացությունն ավելացնելիս պետք է համաչափ բարձրացնել բոլոր երեք ալիքները, ինչը հաճախ փոխում է գույնի երանգը:

Գործնական օրինակ. RGB(79, 70, 229) մուտքագրելիս ստանում եք HSL(243°, 75%, 59%): Եթե ցանկանում եք ավելի բաց տարբերակ, բավական է lightness‑ը դարձնել 75%՝ պահելով 243°, 75%: RGB‑ի լեզվով դա կլինի մոտավորապես (163, 159, 240), որը դժվար է ինտուիտիվ գտնել:

Ինչպես մուտքագրել RGB արժեքները և ստանալ արդյունքներ

Մուտքագրումը պարզ է. մուտքագրեք երեք ամբողջ թիվ 0‑ից 255 սահմաններում՝ առանձնացված ստորակետերով կամ բացատներով։ Օրինակ՝ 79, 70, 229 կամ 79 70 229:

• Վավեր մուտքագրում՝ ծրագիրը ցույց է տալիս HSL, HEX, HSV, CMYK և LAB արժեքները։
• Անվավեր մուտքագրում (օրինակ՝ տառեր, դուրս միջակայքից)՝ ցուցադրվում է սխալի հաղորդագրություն.
  «Enter RGB as three numbers 0–255, like 79, 70, 229.»

Կարող եք նաև մուտքագրել HSL արժեքը ուղղակիորեն (օրինակ՝ 243, 75%, 59%), և գործիքը կվերահաշվարկի RGB‑ն ու մյուս ձևաչափերը։ HSL‑ի համար անվավեր մուտքի դեպքում ցուցադրվում է.
«Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%»

CMYK արժեքը էկրանային գնահատական է. այն հիմնված է sRGB գամուտի վրա և չպետք է օգտագործվի պրոֆեսիոնալ տպագրության մեջ առանց հաստատման: Եթե մուտքագրեք LAB կամ CMYK արժեք, որը դուրս է տեսանելի RGB միջակայքից, գործիքը կարգավորում է մոտակա ցուցադրվող գույնը: Այդ գույնը հետ փոխարկելիս կարող է առաջանալ աննշան շեղում:

RGB‑HSL փոխակերպման մաթեմատիկան

Փոխարկումը սկսվում է RGB արժեքների նորմալացումով 0‑255 միջակայքից 0‑1 միջակայք (բաժանել 255‑ի): Այնուհետև գտնում ենք նվազագույնն ու առավելագույնը:

Ենթադրենք R, G, B ∈:
min = min(R, G, B), max = max(R, G, B):
Լուսավորություն L = (max + min) / 2:

Հագեցվածություն S՝
— Եթե max = min, ապա S = 0 (գույնը մոխրագույն է, երանգը սահմանված չէ):
— Այլապես, Δ = max - min:
եթե L ≤ 0.5, ապա S = Δ / (max + min)
եթե L > 0.5, ապա S = Δ / (2 - max - min)

Երանգ H՝
— Եթե max = min, H = 0 (անորոշ):
— Այլապես,
եթե max = R, ապա H = 60° × ((G - B) / Δ mod 6)
եթե max = G, ապա H = 60° × ((B - R) / Δ + 2)
եթե max = B, ապա H = 60° × ((R - G) / Δ + 4)

Արդյունքը տրվում է աստիճաններով (0‑360), հագեցվածությունն ու լուսավորությունը՝ տոկոսներով (0%‑100%):

Օրինակ RGB(79, 70, 229):
R = 79/255 ≈ 0.310, G ≈ 0.275, B ≈ 0.898:
max = 0.898 (B), min = 0.275 (G): L = (0.898+0.275)/2 = 0.5865 (58.65%)
Δ = 0.898 - 0.275 = 0.623: L>0.5, ուստի S = 0.623/(2-0.898-0.275) = 0.623/0.827 ≈ 0.753 (75.3%)
H = 60° × ((R - G)/0.623 + 4) = 60° × ((0.310-0.275)/0.623 + 4) = 60° × (0.056 + 4) = 60° × 4.056 ≈ 243.4°

Ո՞ւմ է պետք այս գործիքը

UI/UX դիզայներներ – հասանելիության համար գունային գունապնակներ ստեղծելիս, որտեղ լուսավորությունը պետք է կարգավորվի անկախ երանգից: WCAG կոնտրաստի հարաբերակցությունները պահանջում են մուգ տեքստ բաց ֆոնի վրա կամ հակառակը. HSL‑ի միջոցով հեշտ է փոխել lightness‑ը՝ պահպանելով գույնի ինքնությունը:

Front‑end մշակողներ – դիզայնի թոքենները RGB‑ից (օրինակ՝ Figma‑ից) HSL‑ի փոխարկելու համար CSS hsl() ֆունկցիայում: CSS‑ն աջակցում է HSL‑ը, և JavaScript‑ով դինամիկ ոճավորումը ավելի պարզ է, երբ գույնը ներկայացված է որպես անկյուն և տոկոս:

Թեմաներ ստեղծողներ – բրենդային գույնի բաց/մուգ տարբերակներ ստեղծելիս: Օրինակ, Slack‑ի մանուշակագույնը (hue 243°) կարելի է լուսավորել 59%‑ից մինչև 70%` առանց երանգը կորցնելու:

Տվյալների վիզուալացման դիզայներներ – ընկալման համար կարգավորված գունային սանդղակներ ստեղծելիս: HSL‑ի lightness ալիքը ինտուիտիվ է հաջորդական սխեմաների համար, թեև ավելի ճշգրիտ մոդելներ (օրինակ՝ LAB) գոյություն ունեն:

HSL‑ի սահմանափակումները և այլ մոդելներ

HSL‑ը մարդկային ընկալման մոտարկում է, բայց ոչ կատարյալ: Այն ոչ միատեսակ ընկալվող է. դեղինն ու կապույտը նույն lightness արժեքով (օրինակ՝ 50%) տեսողականորեն տարբեր պայծառություն ունեն: Դեղինը մարդու աչքի համար ավելի պայծառ է երևում, քան կապույտը: Հետևաբար, HSL‑ով ստեղծված գրադիենտները կարող են ունենալ տեսողական «ծանրություն»:

Սրա համար գոյություն ունի LAB (CIELAB) մոդել, որը նախագծված է մարդկային տեսողության գծային ընկալմանը համապատասխանեցնելու համար: LAB‑ի L* ալիքն ավելի ճշգրիտ է ներկայացնում պայծառությունը: Գործիքը ներառում է նաև LAB արժեքը, որպեսզի կարողանաք համեմատել:

CMYK տպագրական մոդելը տրվում է միայն որպես էկրանային գնահատական: Ճշգրիտ տպագրության համար պահանջվում է ICC պրոֆիլների կիրառում:

HSV (HSB) նման է HSL‑ին, սակայն Value (արժեք) կամ Brightness (պայծառություն) ալիքը ազդում է գույնի մաքրության վրա: HSL‑ում lightness‑ի փոփոխությունը ազդում է ինչպես մուգ, այնպես էլ բաց տարբերակների վրա, իսկ HSV‑ում միայն մուգ կողմի վրա:

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

1. Կարո՞ղ եմ մուտքագրել HEX արժեք և ստանալ HSL:
Այո, բայց ոչ ուղղակի: HEX արժեքը պետք է նախ վերածեք RGB‑ի (կարող եք մուտքագրել HEX‑ը այլ գործիքում): Այս էջն աջակցում է միայն RGB կամ HSL ուղղակի մուտքագրում:

2. Ինչու՞ CMYK արժեքը կարող է տարբերվել տպագրական ծրագրերից:
Քանի որ գործիքը օգտագործում է sRGB գամուտի պարզեցված մոդել: Իրական տպագրական սարքերն ունեն տարբեր ICC պրոֆիլներ, ինչը ազդում է CMYK‑ի վերջնական թվերի վրա:

3. Կարո՞ղ եմ ապավինել HSL արժեքին WCAG կոնտրաստի համար:
HSL‑ը օգնում է սկզբնական ընտրության մեջ, սակայն կոնտրաստի ճշգրիտ հաշվարկի համար պետք է օգտագործել հարաբերական լուսավորություն (relative luminance), որը RGB‑ից է ստացվում: HSL‑ի lightness ալիքը գծային չէ:

4. Ի՞նչ է տեղի ունենում, եթե մուտքագրեմ միայն երկու RGB թիվ:
Գործիքը սպասում է երեք թիվ: Սխալի դեպքում կհայտնվի նախազգուշացում: Անհրաժեշտ է մուտքագրել հենց երեք արժեք:

5. Ո՞րն է տարբերությունը HSL‑ի և HSB‑ի (HSV) միջև:
HSB‑ում B (Brightness) ալիքը ներկայացնում է գույնի մաքսիմում ալիքի ինտենսիվությունը (0% = սև, 100% = մաքուր գույն): HSL‑ում L (Lightness) = 50% մաքուր գույնի համար, 0% = սև, 100% = սպիտակ: HSB‑ն հաճախ օգտագործվում է գրաֆիկական խմբագրիչներում, HSL‑ը՝ CSS‑ում:

6. Կարո՞ղ եմ արտահանել արժեքները միանգամից:
Դուք կարող եք պատճենել յուրաքանչյուր ձևաչափի արժեքը: Գործիքը չի ապահովում խմբային արտահանում, սակայն բոլոր արժեքները տեսանելի են էկրանին: