HEX-დან HSL-ში გადამყვანი: ფერების ინტუიტური მართვა ექვსციფრიანი კოდებიდან
ეს გვერდი ერთ კონკრეტულ დავალებას ასრულებს: თქვენ შეჰყავთ HEX ფერის კოდი – ან ექვსციფრიანი, როგორიცაა #1E90FF, ან სამციფრიანი შემოკლებული ფორმა, როგორიცაა #abc – და გვერდი მყისიერად აბრუნებს შესაბამის HSL მნიშვნელობას (შეფერილობა გრადუსებში, გაჯერება და სიმსუბუქე პროცენტებში). HSL გამოხატვა შექმნილია ადამიანის გონებისთვის, რაც სიმსუბუქის ან გაჯერების კორექტირებას უადვილებს, ხოლო შეფერილობა უცვლელი რჩება. იმავდროულად, გვერდი აჩვენებს ფერს ყველა სხვა მხარდაჭერილ ფორმატშიც (RGB, HSV, CMYK, LAB), რათა საჭიროებისამებრ დააკოპიროთ ის.
რა ხდის ამ გვერდს განსხვავებულს?
HEX არის RGB-ის უმი ნოტაცია – ექვსი თექვსმეტობითი ციფრი (ან სამციფრიანი შემოკლება), რომლებიც პირდაპირ გამოხატავს წითელი, მწვანე და ლურჯი მნიშვნელობებს. ის კომპაქტურია და ფართოდ გამოიყენება CSS-სა და დიზაინის ინსტრუმენტებში, მაგრამ არაა ინტუიტური ადამიანის მიერ გასაგები კორექტირებისთვის.
HSL შექმნილია ადამიანის გონებისთვის – შეფერილობა იზომება გრადუსებში (0–360), ხოლო გაჯერება და სიმსუბუქე – პროცენტებში. მხოლოდ სიმსუბუქის შეცვლა შეფერილობას უცვლელს ტოვებს – სწორედ ამიტომაა HSL ფერის პალიტრებისა და თემების შექმნის მთავარი ინსტრუმენტი.
ალფა არხი არ არსებობს – სტანდარტული HEX (ექვსციფრიანი ან სამციფრიანი) გამჭვირვალობის ინფორმაციას არ ატარებს, ისევე, როგორც HSL-ს არ გააჩნია ალფა კომპონენტი. გადაყვანა ყოველთვის ეხება მთლიანად გაუმჭვირვალე ფერებს.
HEX ფერის კოდები: როგორ მუშაობს ისინი
HEX ნოტაცია წარმოადგენს RGB ფერის მოდელს თექვსმეტობით (base-16) სისტემაში. 01-დან FF-მდე თითოეული წყვილი ციფრი (00-დან 255-მდე ათობით სისტემაში) შეესაბამება ერთ-ერთი სამი ძირითადი ფერის ინტენსივობას. მაგალითად, #4f46e5:
4f(79) – წითელი46(70) – მწვანეe5(229) – ლურჯი
სამციფრიანი შემოკლება, როგორიცაა #abc, მუშაობს ისე, რომ თითოეულ ციფრს გაორმაგებს: #abc ხდება #aabbcc. ეს ნიშნავს, რომ #abc და #aabbcc ერთსა და იმავე ფერს გამოხატავს. თუმცა, სამციფრიანი ფორმა ვერ გადმოსცემს 16,777,216 ფერს, რომელსაც ექვსციფრიანი HEX გვთავაზობს – იგი მხოლოდ 4096 უნიკალურ მნიშვნელობას იძლევა.
HEX-ის ძირითადი უპირატესობაა მისი კომპაქტური ფორმა, მაგრამ ნაკლი – გაუმჭვირვალე ბუნება: #1E90FF-ის დანახვით ძნელია იმის გაგება, თუ რამდენად გაჯერებული ან ღიაა ფერი. HSL-ში, იგივე ფერი (DodgerBlue) გამოიხატება, როგორც hsl(210°, 100%, 56%), რაც ბევრად უფრო ინფორმაციულია.
HSL-ის სამი განზომილება: შეფერილობა, გაჯერება, სიმსუბუქე
HSL (Hue, Saturation, Lightness) არის ფერის მოდელი, რომელიც RGB-ის ალტერნატივად შეიქმნა. მისი სამი კომპონენტია:
- შეფერილობა (Hue) – 0-დან 360 გრადუსამდე. 0° = წითელი, 120° = მწვანე, 240° = ლურჯი. 360° ისევ წითელს უბრუნდება.
- გაჯერება (Saturation) – 0%-დან 100%-მდე. 0% ნიშნავს ნაცრისფერს (ფერის გარეშე), 100% – ყველაზე ინტენსიურ ფერს.
- სიმსუბუქე (Lightness) – 0%-დან 100%-მდე. 0% = შავი, 100% = თეთრი, 50% = „ნორმალური" ფერი (ყველაზე ნათელი, ყოველგვარი შავი ან თეთრი მინარევის გარეშე).
HSL-ის ინტუიტურობა იმაში მდგომარეობს, რომ თქვენ შეგიძლიათ შეფერილობის (hue) შეცვლის გარეშე ფერის გაღიავება (Lightness-ის გაზრდით) ან გაჯერების შემცირება. ეს განსაკუთრებით სასარგებლოა, როდესაც ბრენდის ფერი ფიქსირებულია, მაგრამ გჭირდებათ hover-ის ან dark theme-ის ვარიაციები.
RGB-დან HSL-ში გადაყვანის მათემატიკა
HEX-დან HSL-ში გადასვლა იწყება HEX-ის RGB-ში გარდაქმნით. ეს კეთდება უბრალოდ: #4f46e5 იშლება R=0x4F=79, G=0x46=70, B=0xE5=229.
შემდეგ RGB მნიშვნელობები ნორმალიზდება 0-255-დან 0.0-1.0-მდე:
R = 79/255 ≈ 0.3098
G = 70/255 ≈ 0.2745
B = 229/255 ≈ 0.8980
HSL-ის გამოთვლა ხდება შემდეგნაირად:
სიმსუბუქე (L) = (max + min) / 2
გაჯერება (S) = 0, თუ max = min. სხვა შემთხვევაში: – S = (max - min) / (max + min), თუ L ≤ 0.5 – S = (max - min) / (2 - max - min), თუ L > 0.5
შეფერილობა (H) = 0, თუ max = min. სხვა შემთხვევაში, max-ის მიხედვით: – H = 60 × ((G - B) / (max - min)) mod 360, თუ max = R – H = 60 × (2 + (B - R) / (max - min)), თუ max = G – H = 60 × (4 + (R - G) / (max - min)), თუ max = B
#4f46e5-ისთვის max = B, min = G. L = (0.8980 + 0.2745) / 2 ≈ 0.5863. S = (0.8980 - 0.2745) / (2 - 0.8980 - 0.2745) ≈ 0.6235 / 0.8275 ≈ 0.753 (75.3%). H = 60 × (4 + (0.3098 - 0.2745) / (0.8980 - 0.2745)) ≈ 60 × (4 + 0.0353 / 0.6235) ≈ 60 × 4.0566 ≈ 243.4°. შედეგი: hsl(243.4°, 75.3%, 58.6%). ეს გადაყვანა ხდება თქვენს ბრაუზერში, JavaScript-ის გამოყენებით.
ზღვრული შემთხვევები და მნიშვნელოვანი წესები
-
ვალიდურობა: გვერდი იღებს მხოლოდ ვალიდურ ექვსციფრიან ან სამციფრიან HEX კოდებს (
#-ის გარეშეც), მაგ.#4f46e5ან#abc. ნებისმიერი არავალიდური მნიშვნელობის შეყვანისას გამოჩნდება შეცდომა: „Enter a hex color like #4f46e5 or #abc.” -
ალფა არხი: HEX-სა და HSL-ს ალფა არხი (გამჭვირვალობა) არ გააჩნიათ. 8-ციფრიანი HEX (როგორიცაა
#4f46e580) ან HSLA (HSL + Alpha) მხარდაჭერილი არ არის – გვერდი მხოლოდ მთლიანად გაუმჭვირვალე ფერებს გარდაქმნის. -
გამომავალი სივრცის ლიმიტები: თუ თქვენ გადახვალთ სხვა ფერის სივრცეში (როგორიცაა LAB ან CMYK) და შეიყვანთ მნიშვნელობას, რომელიც ვიზუალური RGB გამის მიღმაა, ფერი მორგებული იქნება უახლოეს ვიზუალურ ფერზე; ასეთი ფერის HEX-ში უკან გარდაქმნისას შეიძლება მცირე ცვლა წარმოიშვას. CMYJ K მნიშვნელობები მხოლოდ ეკრანული შეფასებაა – არ უნდა იქნას გამოყენებული პროფესიული ბეჭდვისთვის კალიბრაციის გარეშე.
-
მონაცემების უსაფრთხოება: ყველა გარდაქმნა ხდება თქვენს ბრაუზერში – არაფერი იტვირთება ან ინახება სერვერზე. თქვენი HEX-ის მნიშვნელობები ლოკალურად რჩება.
პრაქტიკული გამოყენება ვებ-დეველოპერებისა და დიზაინერებისთვის
HSL-ის ინტუიტურობა განსაკუთრებით სასარგებლოა:
CSS-ის ცვლადები (custom properties): HSL-ის გამოყენება CSS-ში შესაძლებელია ცვლადების მეშვეობით, რაც აადვილებს თემების შექმნას:
:root {
--hu: 243deg;
--sat: 75%;
--lig: 58%;
--color-primary: hsl(var(--hu), var(--sat), var(--lig));
}
.hover:hover {
--lig: 48%;
background: hsl(var(--hu), var(--sat), var(--lig));
}
Dark/light თემები: HSL-ით, dark theme-სთვის საკმარისია Lightness-ის შემცირება (35-40%-მდე), ხოლო light theme-სთვის – 60-65%-მდე. შეფერილობა (hue) იგივე რჩება, ამიტომ ბრენდის ფერი არ იცვლება.
ფერის პალიტრების გენერაცია: HSL-ის 60° ინკრემენტით (0°, 60°, 120°, 180°, 240°, 300°) იქმნება ეგრეთ წოდებული „ფერის ბორბლის" 6 ფერი, რაც 6-ფერიანი პალიტრის საფუძველია. 30° ინკრემენტი იძლევა 12-ფერიან ვარიანტს.
Web-ხელმისაწვდომობა (WCAG): WCAG 2.1-ის მიხედვით, კონტრასტის თანაფარდობა (contrast ratio) ტექსტისა და ფონის ფერებს შორის უნდა იყოს მინიმუმ 4.5:1 (AA) ან 7:1 (AAA). HSL-ში Lightness-ის შეცვლით (მაგ., 50%-დან 30%-მდე) კონტრასტი იზრდება 2.5:1-დან 5:1-მდე, ხოლო შეფერილობა იგივე რჩება. ეს აადვილებს WCAG-სთან შესაბამისობის მიღწევას.
UI/UX მატჩინგი: თუ თქვენ გაქვთ HEX კოდი (მაგ., #1E90FF) დიზაინის მაკეტიდან, HSL-ში გარდაქმნის შემდეგ (hsl(210°, 100%, 56%)) შეგიძლიათ სწრაფად შექმნათ 5-ეტაპიანი градацია Lightness-ის 10%-იანი ინკრემენტით: 36%, 46%, 56%, 66%, 76%. ეს იძლევა „light" და „dark" ვარიანტებს.
ხშირად დასმული კითხვები
1. რა განსხვავებაა HSL-სა და HSV-ს შორის?
HSL-სა და HSV-ს შორის მთავარი განსხვავებაა Lightness-ისა და Value-ს (Brightness-ის) განსაზღვრებაში. HSV-ში, V = max(R, G, B), ხოლო HSL-ში L = (max + min) / 2. HSV-ში, Saturation გამოითვლება V-სთან მიმართებაში, HSL-ში – სიმსუბუქესთან. მაგალითად, #FF0000 (100% წითელი) HSV-ში იქნება (0°, 100%, 100%), HSL-ში (0°, 100%, 50%). HSV უკეთ გადმოსცემს იმას, თუ რამდენად „ნათელი" (bright) არის ფერი, HSL – იმას, რამდენად „ღია" (light) ან „მუქი".
2. რატომ მივიღე hsl(243.4°, 75.3%, 58.6%) "DodgerBlue"-ისთვის?
DodgerBlue (#1E90FF) HSL-ში იქნება (210°, 100%, 56%). #4f46e5-ის მაგალითზე (hsl(243.4°, 75.3%, 58.6%)) – ეს იისფერ-ლურჯი ფერია, არა DodgerBlue. HSL მნიშვნელობები ყოველთვის სწორედ იმ HEX-ს შეესაბამება, რაც თქვენ შეიყვანეთ.
3. CMYK მნიშვნელობები ზუსტია ბეჭდვისთვის?
არა. CMYK მნიშვნელობები, რომლებსაც გვერდი აჩვენებს, არის მხოლოდ ეკრანული შეფასება, რომელიც RGB-დან CMYK-ში სტანდარტული (ISO Coated) ICC-профil-ის გარეშე, მიახლოებითი მათემატიკით გადადის. ნამდვილი CMYK ბეჭდვისთვის საჭიროა ICC-профil-ის print setup-ის გათვალისწინება (Coated FOGRA39, Uncoated FOGRA47, SWOP 2013 C3/C5 და ა.შ.). CMYK მნიშვნელობები მხოლოდ ინიციალური იდეას იძლევა.
4. HEX-სა HSL-ს შორის გადაყვანა იწვევს ინფორმაციის დაკარგვას?
თეორიულად, 16,777,216 (256³) HEX-ის RGB ფერი 360×101×101 (≈ 3,673,000) HSL მნიშვნელობაზე უფრო მეტია. HSL-დან HEX-ში უკან გადაყვანისას ხდება მრგვალება, რაც შეიძლება ±1 RGB მნიშვნელობამდე განსხვავებას იძლეოდეს. მაგრამ პრაქტიკაში, ეს განსხვავება ვიზუალურად შესამჩნევი მხოლოდ უკიდურეს შემთხვევებში (მაგ., #010101) ხდება.
5. შეძლებს ჩემი HEX კოდის HSL ვერსია WCAG AA/AAA სტანდარტის შემოწმებას?
HSL თავისთავად ვერ ითვლის კონტრასტის თანაფარდობას. მაგრამ HSL-ში Lightness-ის (L) ვიზუალური ინტერპრეტაცია ბევრად უფრო ინტუიტური ა, ვიდრე HEX-ის ან RGB-ის. WCAG კონტრასტი ითვლება ფერის „relat-sole luminance"-ის (Y) მიხედვით, რაც RGB-დან იწარმოება (Y = 0.2126R + 0.7152G + 0.0722B). HSL-ის Lightness (L) არ უდრის Y-ს. L-ის შეცვლა 10%-ით ზრდის ან ამცირებს Y-ს (და კონტრასტს) მიახლოებით 15-25%-ით, მაგრამ ზუსტი გაანგარიშებისთვის გჭირდებათ dedicated contrast calculator.
6. რატომ „adjust invalid input" err-ის მდგომარეობაში ვარ?
თუ err-ი იტყვის: “Enter a hex color like #4f46e5 or #abc”, მაშინ თქვენ სავარაუდოდ შეიყვანეთ something invalid: #4f46e5XX (8-цифр-იანი), #agbc (g banned character, since hex only A-F), rgb(79,70,229) (HEX vs RGB ფორმატი), ან #4f4 (3-цифр-იანი but with leading # without pattern: #fff OK). Remember: valid formats only: #abc, #aabbcc, abc, aabbcc. No spaces, no commas.