rgb-to-hsl: როგორ გარდაქმნის გვერდი RGB მნიშვნელობებს HSL-ად
RGB-დან HSL-ში გარდაქმნა გვერდის მთავარი ფუნქციაა. მომხმარებელი შეიყვანს სამ რიცხვს 0-დან 255-მდე, რომელიც წარმოადგენს წითელი, მწვანე და ლურჯი განათების ინტენსივობის დონეს. ეს მნიშვნელობები დაუყოვნებლივ გარდაიქმნება HSL-ად: hue (ელფერი) გრადუსებში 0–360 დიაპაზონში, saturation (გაჯერება) და lightness (სიმსუბუქე) პროცენტებში. ერთდროულად გამოისახება იგივე ფერის HEX, HSV, CMYK (ეკრანის შეფასება) და LAB ვერსიები. ნებისმიერი ველის რედაქტირება მყისიერად აახლებს ყველა სხვა ველს. მთელი კონვერტაცია შესრულდება ბრაუზერში; არანაირი მონაცემი არ აიტვირთება.
შეყვანის წესები მკაცრია: RGB უნდა შეყვანილ იქნას როგორც სამი მთელი რიცხვი 0–255-მდე, გამოყოფილი მძიმეებით ან ინტერვალებით. მაგალითად: 79, 70, 229. თუ ეს მოთხოვნა არ დაკმაყოფილდება, გამოჩნდება შეტყობინება: „Enter RGB as three numbers 0–255, like 79, 70, 229.“ ანალოგიურად, HSL-ის პირდაპირი შეყვანა იწვევს საპირისპირო კონვერტაციას RGB-ში. HSL-ის სწორი ფორმატია: hue 0–360, saturation და lightness პროცენტულად (მაგ., 243, 75%, 59%). არასწორი ფორმატი იწვევს შეტყობინებას: „Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.“
HSL-ის მათემატიკა: როგორ გამოითვლება hue, saturation და lightness RGB-დან
RGB-დან HSL-ში გარდაქმნის მათემატიკური ალგორითმი ეფუძნება RGB მნიშვნელობების ნორმალიზებას 0–255-დან 0.0–1.0-მდე. შემდეგ განისაზღვრება მაქსიმალური (max) და მინიმალური (min) მნიშვნელობა, სხვაობა (delta) იპოვება როგორც max − min.
Lightness (L) გამოითვლება მარტივად: L = (max + min) / 2.
Saturation (S) დამოკიდებულია lightness-ზე. თუ max = min (ანუ delta = 0), saturation ნულია. წინააღმდეგ შემთხვევაში, თუ L ≤ 0.5, S = delta / (max + min). თუ L > 0.5, S = delta / (2 − max − min). შედეგი მრავლდება 100-ზე, რომ მიიღოთ პროცენტი.
Hue (H) გამოითვლება max-ის მიხედვით. თუ max = min, hue გაურკვეველია (ჩვეულებრივ 0). თუ max = R, H = (G − B) / delta + (G < B? 6: 0). თუ max = G, H = (B − R) / delta + 2. თუ max = B, H = (R − G) / delta + 4. შედეგი მრავლდება 60-ზე (რადგან 6-სეგმენტიანი ციკლი 360°-ს შეესაბამება) და მოდულით 360.
მაგალითი: RGB (79, 70, 229). ნორმალიზაციის შემდეგ (0.3098, 0.2745, 0.8980). max = 0.8980 (B), min = 0.2745 (G), delta = 0.6235. L = (0.8980 + 0.2745) / 2 = 0.5863 → 58.63%. L > 0.5, ამიტომ S = 0.6235 / (2 − 0.8980 − 0.2745) = 0.6235 / 0.8275 = 0.7535 → 75.35%. Hue: max = B → H = (0.3098 − 0.2745) / 0.6235 + 4 = 0.0353 / 0.6235 + 4 = 0.0566 + 4 = 4.0566. × 60 = 243.4 → 243°. HSL (243°, 75%, 59%). ზუსტი მნიშვნელობები შეიძლება ოდნავ განსხვავდებოდეს დამრგვალების მიხედვით.
HSL-ის უპირატესობები: პალიტრები, თემები, ხელმისაწვდომობა
HSL მოდელი აგებულია ადამიანის ფერის აღქმაზე. RGB-ში, სადაც ერთი არხის შეცვლა ხშირად ცვლის ფერის შთაბეჭდილებას, HSL-ში lightness-ის ცალ-ცალკე რეგულირება ინარჩუნებს hue-ს კონსტანტულად. ეს მას უპირატეს მოდელად აქცევს ფერების პალიტრების, თემებისა და ხელმისაწვდომი კონტრასტის ვარიაციების გენერირებისთვის.
UI/UX დიზაინერები იყენებენ HSL-ს იმისთვის, რომ შექმნან ხელმისაწვდომი ფერის პალიტრები, სადაც lightness უნდა იყოს ინდივიდუალურად მორგებული hue-სგან დამოუკიდებლად. ფრონტ-ენდ დეველოპერები ითარგმნებიან RGB-დან (მაგ., Figma-დან) HSL-ში CSS hsl() ფუნქციისთვის. თემის შემქმნელები ქმნიან ღია/მუქი ვარიაციებს ბრენდის ფერის შენარჩუნებით core hue-ს დაცვით. მონაცემთა ვიზუალიზაციის დიზაინერები იღებენ perceptually ordered ფერის სკალებს, სადაც lightness-ის არხი ინტუიტიურია sequential schemes-ისთვის.
RGB (79, 70, 229) HSL-ში (243°, 75%, 59%). lightness-ის 10%-ით (59%-დან 49%-მდე) დაწევა იძლევა მუქ ვარიანტს იგივე hue-თი (243°). RGB-ში ანალოგიური ცვლილება მოითხოვს სამივე არხის ხელახლა გამოთვლას.
HSL-ის გამოყენება accessibility-სთვის: lightness-ის რეგულირებით WCAG (Web Content Accessibility Guidelines) კონტრასტის კოეფიციენტების მიღწევა ხდება ფერის იდენტურობის შენარჩუნებით. მაგალითად, 18px-იანი ტექსტისთვის საჭიროა 4.5:1 კონტრასტი. lightness-ის 30%-მდე ან 70%-ზე მეტად შეცვლა ხშირად საკმარისია. HSL-ში ეს ერთი ცვლადის ცვლილებაა; RGB-ში ეს ოპერაცია გაცილებით რთულია.
RGB-სა და HSL-ს შორის: additive მოდელი vs. human-centric
RGB (Red, Green, Blue) არის additive მოდელი. ის მუშაობს 0–255 მასშტაბზე sRGB (standard Red Green Blue) სამუშაო სივრცეში. sRGB არის ფართოდ გავრცელებული წარმომადგენლობა, რომელიც განსაზღვრავს, თუ როგორ ხდება მონიტორის ეკრანზე თითოეული ფერის ქვეპიქსელის განათება. RGB-ში 0,0,0 ნიშნავს "სრულ სიბნელეს" (შავი), 255,255,255 "სრულ განათებას" (თეთრი). მაგალითად, RGB (79, 70, 229) წარმოადგენს ინტენსიურ ლურჯ-იისფერ ტონს, მაგრამ RGB-ის მნიშვნელობები არ გვაძლევს ინტუიტიურ გაგებას იმის შესახებ, რა "ფერი"ა ეს ადამიანის აღქმაში.
HSL (Hue, Saturation, Lightness) მოდელი მიზნად ისახავს ანალოგიური ინფორმაციის წარმოდგენას ისე, რომ ადამიანისთვის უფრო ინტუიტიური იყოს. Hue (ელფერი) განისაზღვრება 0–360°-იან წრეზე: 0° = წითელი, 120° = მწვანე, 240° = ლურჯი; 243° არის ლურჯ-იისფერი. Saturation (გაჯერება) 0%–100%: 0% = ნაცრისფერი (უფერო), 100% = სუფთა ფერი. Lightness (სიმსუბუქე) 0%–100%: 0% = შავი, 100% = თეთრი.
RGB-ის HSL-ში გადაყვანა გვაძლევს მკაფიო წარმოდგენას: hue = 243° (ლურჯ-იისფერი), saturation = 75% (საკმაოდ გაჯერებული, მაგრამ არა მაქსიმალური), lightness = 59% (საშუალო-კაშკაშა). ეს ინფორმაცია ბევრად უფრო ინფორმატიულია, ვიდრე RGB-ის ნედლეული 79, 70, 229.
ზღვრულ შემთხვევები: LAB/CMYK-დან გამოსვლა, CMYK-ის შეფასებითი ბუნება
LAB (CIELAB, CIE 1976, D50/2 ან D65/10) არის perceptually uniform მოდელი, რომელიც განასხვავებს L* (lightness), a* (მწვანე–წითელი) და b* (ლურჯი–ყვითელი). LAB-ის მნიშვნელობები შეიძლება იყოს RGB-ის (0–255) ან HSL-ის (0–360, 0–100%) ფარგლებს გარეთ. თუ LAB-ის ან CMYK-ის მნიშვნელობა მიეკუთვნება ხილული RGB-ის ფარგლებს გარეთ, გვერდი მას უახლოეს გამოსახულ ფერამდე არეგულირებს. ამ ფერის უკან გადაყვანამ (HSL-ში ან RGB-ში) შესაძლოა გამოიწვიოს მცირე shift. ეს ხდება იმის გამო, რომ თითოეულ მოდელს აქვს საკუთარი gamut (ფერების სივრცე), რომელიც მთლიანად არ ემთხვევა.
CMYK (Cyan, Magenta, Yellow, Key/Black) გამოიყენება სტამბურ ბეჭდვაში. CMYK-ის RGB-ში გადაყვანა გვერდზე არის on-screen estimate. ის ეფუძნება მარტივ მათემატიკურ ფორმულებს (C = 1 − R, M = 1 − G, Y = 1 − B, K = min(C, M, Y) ან მსგავსი), მაგრამ ეს არ ითვალისწინებს კონკრეტული მელნის, ქაღალდის, ან ICC (International Color Consortium) პროფილის გავლენას. CMYK-ის output: „CMYK output is an on‑screen estimate and should not be used for professional print without verification.“
HSL-ის ლიმიტაციები: perceptually uniform vs. human-centric
HSL-ის ძირითადი ლიმიტაცია ისაა, რომ ის არ არის perceptually uniform. იგივე lightness-ის მნიშვნელობას (მაგ., 50%) ყვითელი (hue ≈ 60°) და ლურჯი (hue ≈ 240°) ძალიან განსხვავებულად აღიქმებიან: ყვითელი გაცილებით კაშკაშა ჩანს. ეს ხდება იმის გამო, რომ HSL-ის lightness-ის ფორმულა (max + min) / 2 იგნორირებას უკეთებს იმ ფაქტს, რომ თვალის მგრძნობელობა ფერების მიმართ განსხვავებულია (LMS cone sensitivity).
ამის გამოსასწორებლად, LAB (CIELAB) ან LCh (Lightness, Chroma, Hue) მოდელები უფრო perceptually uniform-ია. HSL-ის ნაცვლად, მაღალი accessibility მოთხოვნების მქონე პროექტებში (მაგ., 18px ტექსტისთვის 4.5:1, 14px bold-ისთვის 3:1) LAB-ის lightness (L*) უკეთეს ინდიკატორს იძლევა. თუმცა, HSL-ის გამოყენება CSS-ში (hsl() ფუნქცია) ჯერ კიდევ გავრცელებულია, ნაკლებად რთული მანიპულაციებისთვის.
HSL-ის პრაქტიკული გამოყენება: CSS hsl(), JavaScript-ით მანიპულაცია
CSS-ში HSL-ის გამოყენება hsl() ფუნქციით: background-color: hsl(243, 75%, 59%). hsla() (alpha channel) საშუალებას იძლევა გამჭვირვალობის მითითების: hsla(243, 75%, 59%, 0.5). CSS-ში hue, saturation, lightness-ის ინტუიტიური მანიპულაცია მარტივია: hsl(243, 75%, 70%) ქმნის 61-ის (70-59) 11%-ით მსუბუქ ვერსიას.
JavaScript-ში, HSL-ის RGB-ში გადაყვანა ან RGB-დან HSL-ში გადაყვანა std-lib ფუნქციებით (მაგ., RGBtoHSL() ან HSLtoRGB()) შესაძლებელია. HSL-ის lightness-ის 20%-ით შემცირება: hsl(243, 75%, 39%) (59% – 20% = 39%). RGB-ში ანალოგიური ოპერაცია მოითხოვს გადათვლას.
FAQ
რა განსხვავებაა HSL-სა და HSV/HSB-ს შორის? HSV (Hue, Saturation, Value) ან HSB (Hue, Saturation, Brightness) იყენებს value-ს (brightness) lightness-ის ნაცვლად. HSV-ში value = max(R, G, B), HSL-ში lightness = (max+min)/2. HSV-ის saturation-ის ფორმულაც განსხვავებულია (S = delta / max). HSV ხშირად გამოიყენება 3D ვიზუალიზაციაში, HSL – CSS-სა და UI/UX-ში.
რატომ არის CMYK output მხოლოდ შეფასება? CMYK-ის RGB-ში გადაყვანა ეფუძნება მარტივ მათემატიკურ მოდელს, რომელიც არ ითვალისწინებს ICC (International Color Consortium) პროფილს, მელნის ფერებს, ქაღალდის ტიპს, ან printer’s gamut. ის განკუთვნილია quick preview-სთვის, არა professional print-ისთვის.
შესაძლებელია თუ არა იგივე RGB ან HSL მნიშვნელობის მიღება სხვადასხვა RGB მნიშვნელობიდან? არა. RGB–HSL–RGB forward/backward conversion (გამონაკლისებით LAB/CMYK out-of-gamut) ერთმნიშვნელოვნად 256³ ≈ 16.7M color-ს (sRGB gamut) ანიჭებს თითოეულ HSL მნიშვნელობას. HSL-ში hue-ს (0–360) 0.5°-იანი ნაბიჯი 720 hue-ს იძლევა; saturation-ის (0–100) 1% = 101, lightness-ის (0–100) 1% = 101; 720×101×101 ≈ 7.3M, რაც 16.7M-ზე ნაკლებია – ზოგიერთ HSL mდნიმნიშვნელობა იგივე RGB-ს მისცემს (clipping-ის გამო).
როგორ ვთარგმნო HSL-ში lightness-ის ცვლილება accessibility-სთვის? WCAG 2.1 AA (Level AA) მოითხოვს 4.5:1 (normal text) ან 3:1 (large text) contrast ratio-ს. HSL-ში lightness-ის 30%-ზე ქვემოთ ან 70%-ზე ზემოთ გადაყვანა ხშირად იძლევა 4.5:1-ს, მაგრამ hue-და saturation-ის მიხედვით (yellow-ის lightness threshold ≈ 60%). LAB lightness (L*) 50%-ზე დაბლა 50%–60% L* threshold-ზე მეტი contrast-ის იძლევა.
რატომ გამოვიყენო HSL RGB-ის ნაცვლად CSS-ში? HSL-ში lightness-ის ინტუიტიური რეგულირება: hsl(243, 75%, 70%) 11%-ით მსუბუქია hsl(243, 75%, 59%)-თან შედარებით. RGB-ში (79, 70, 229) 11%-იანი lightness-ის ზრდა მოითხოვს hue-ის (243°) და saturation-ის (75%) გამოთვლას – HSL-ში ეს ერთი ცვლადის (lightness) ცვლილებაა.
რა მოხდება, თუ LAB ან CMYK-ის მნიშვნელობა გამოდის RGB-ის ფარგლებს გარეთ? LAB-ის a* ან b* (ან CMYK-ის C, M, Y, K) ისეთი რიცხვი, რომელსაც RGB-ში (0–255) ან HSL-ში (0–360, 0–100%) ვერ მიეცემა, გამოიწვევს clipping-ს. გვერდი მას უახლოეს გამოსახულ ფერამდე არეგულირებს. ამის ზუსტი მნიშვნელობა RGB gamut-ის (sRGB) boundary-ზე იქნება.