HSL-ის HEX-ში კონვერტერი

HSL–HEX–ე კონვერტაცია: Hue, Saturation, Lightness‑დან Hex‑ის ფორმატში

HSL–HEX–ე გვერდი მომხმარებელს სთავაზობს მყისიერ გარდაქმნას HSL (Hue, Saturation, Lightness) ღირებულებებისHEX (hexadecimal) ფერთა კოდში. Hue (ელფერი) იზომება გრადუსებში 0–360 დიაპაზონში, Saturation (გაჯერება) – 0%–დან 100%–ამდე, Lightness (სიკაშკაშე) – 0%–დან 100%–ამდე. გვერდი მყისიერად გენერირებს 6‑ნიშნა HEX კოდს (მაგ. #1E90FF), ხოლო თუ RGB–ის თითოეული არხი ერთი ჰექსადეციმალური ციფრით გამოისახება, იგი აჩვენებს 3‑ნიშნა შემოკლებულ ფორმასაც (მაგ. #abc). ყველა ცვლილება – HSL–ში, RGB–ში, HSV–ში, CMYK–სა თუ LAB–ში – ერთდროულად განახლდება.

HSL–HEX–ის უნიკალური მახასიათებლები

HSL ფერთა მოდელი შექმნილია ისე, რომ იგი მაქსიმალურად ინტუიციური იყოს ადამიანის აღქმისთვის. Lightness–ის (სიკაშკაშე) ცვლილება ინარჩუნებს Hue–ს (ელფერი), რაც განსაკუთრებით ფასეულობას ანიჭებს მას ფერთა პალიტრებისა და თემების გენერაციაში. HEX – ექვსნიშნა (ან სამნიშნა) RGB ნოტაცია – არ შეიცავს alpha–არხს (თუ არა რვანიშნა ფორმას). HSL–HEX–ე პირდაპირი და lossless (დაკარგვის გარეშე) კონვერტაციაა sRGB გამის ფარგლებში. ეს მნიშვნელოვნად განსხვავდება LAB ან CMYK–ს ტრანსფორმაციებისაგან, სადაც ხშირად ხდება ფერების გამიღმა (out‑of‑gamut) კორექტირება. HSL–HEX–ეზე ეს პრობლემა არ წარმოიშვება: HSL–ის ნებისმიერი მნიშვნელობა 0–360°, 0–100%, 0–100% იძლევა sRGB–ის ფარგლებში მოქცეულ RGB ფერს.

შეყვანის წესები, მაგალითები და 3‑ნიშნა HEX–ის ჩვენება

შეყვანილ მონაცემებს უნდა ჰქონდეთ ზუსტად ორი % ნიშანი – Saturation–ზე და Lightness–ზე. Hue უნდა იყოს 0–360, Saturation 0–100%, Lightness 0–100%. რიცხვებსა და პროცენტებს შორის შეიძლება იყოს მძიმე ან გამოყოფა. მაგალითი: 243, 75%, 59% იძლევა HEX–ს #4f46e5.

თუ RGB–ის თითოეული არხი (0–255) გამოისახება ერთი ჰექსადეციმალური ციფრით (0–15), ანუ თითოეული მნიშვნელობა 16–ის ჯერადია (0, 17, 34, … 255), მაშინ 6‑ნიშნა #112233–ის ნაცვლად იქნება #123. ეს აადვილებს CSS–ში ჩაწერას. ასეთი ფერები იშვიათია, მაგრამ #fff (white) ან #000 (black) ყველაზე ცნობილი მაგალითებია.

შენიშვნა: HEX–ი case‑insensitive – “#1E90FF” ან “#1e90ff” ერთი და იგივეა.

Edge Cases – Out‑of‑Range, Error Messages, CMYK

• Range violations: თუ Hue < 0, Hue > 360, Saturation < 0%, Saturation > 100%, Lightness < 0% ან Lightness > 100%, ან % ნიშნები ან მათი რაოდენობა არასწორია, გვერდი აჩვენებს ზუსტ შეცდომის ტექსტს:

  “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”
  (ქართულად: “შეიყვანეთ HSL hue 0–360 საზღვრებში, ორი %–ით, მაგ. 243, 75%, 59%.”)

• CMYK – ფერის მეორე მოდელი, რომელიც ნაჩვენებია გვერდზე, მხოლოდ on‑screen მიახლოებაა. მისი ღირებულება შესაძლოა განსხვავდებოდეს პროფესიული ბეჭდვის CMYK–ისაგან.
• HSL–HEX–ე sRGB–ის ფარგლებში – როგორც ზემოთ იყო ნათქვამი, ყოველი HSL მნიშვნელობა sRGB–ში იოლად გამოისახება. არ ხდება gamut clipping.
• 8‑ნიშნა HEX: HSL–HEX–ე არ გამოიყენებს 8‑ნიშნა (alpha) HEX–ს; მხოლოდ 6‑ნიშნა (ან 3‑ნიშნა) ვარიანტს.
• Alpha: HSL–HEX–ე არ შეიცავს alpha–არხს. თუ გჭირდებათ alpha, უნდა გამოიყენოთ rgba() ან 8‑ნიშნა HEX (მაგ. #ff0000ff), მაგრამ ეს გვერდი არ უზრუნველყოფს alpha–ს.

HSL → RGB → HEX: ფარული ალგორითმი

კონვერტაციის მათემატიკა HSL‑HEX–ე იყენებს 3 ეტაპს:

1. HSL‑დან RGB‑ში

   • Saturation (S) 0‑100% → decimal (0.0–1.0); Lightness (L) 0‑100% → decimal (0.0–1.0).
   • C = (1 – |2L – 1|) × S
   • X = C × (1 – |(H / 60) % 2 – 1|)
   • m = L – C / 2
   • R', G', B' = (0, X, C), (C, 0, X), (X, C, 0) … (H–ის 60‑გრადუსიანი ინტერვალის მიხედვით)
   • R = (R' + m) × 255; G = (G' + m) × 255; B = (B' + m) × 255.

2. RGB‑დან HEX‑ში

   • R, G, B (0–255) მრგვალდება, იწერება 16‑ური ციფრების წყვილად (00–FF).
   • # + RRGGBB.

3. 3‑ნიშნა shorthand: თუ R, G, B 16‑ის ჯერადია (0, 16, 32, … 240), მაშინ #RRGGBB–ის ნაცვლად #RGB (R/16, G/16, B/16). მაგ. #ff0000 → #f00.

პრაქტიკული მაგალითი (243°, 75%, 59%):

• L = 0.59, S = 0.75 → C ≈ 0.2865, X ≈ 0.158, m ≈ 0.456.
• H=243° (6‑იანი ინტერვალი: 240–300, B'=C, R'=0, G'=X) → R ≈ 0.456×255≈116, G ≈ 0.614×255≈157, B ≈ 0.7425×255≈189 → #4f46e5 (R=0x4F=79, G=0x46=70, B=0xE5=229). HEX‑ი #4f46e5.

ვის ესაჭიროება HSL‑HEX–ე?

• Designers (დიზაინერები): HSL–ში ფერთა პალიტრის აწყობისას, ხშირად სჭირდებათ HEX კოდი Figma, Sketch–ში ან Adobe XD–ში ჩასაწერად.
• Front‑end developers (ფრონტენდ დეველოპერები): Figma–დან ან Sketch–დან HSL მნიშვნელობის მიღებისას, მათ უწევთ CSS–ის #XXXXXX–ში გარდაქმნა.
• Accessibility (ხელმისაწვდომობა): WCAG (Web Content Accessibility Guidelines) კონტრასტის თანაფარდობის გამოსათვლელად, უმარტივესია Lightness–ის (L) მოდიფიკაცია HSL–ში, შემდეგ HEX–ის მიღება. HSL–HEX–ე იცავს Hue–ს, ხოლო Lightness–ის ცვლილება აადვილებს WCAG AA/AAA–ს მიღწევას.

FAQ

Q: HSL–HEX–ე იყენებს alpha–ს (8‑ნიშნა HEX)?
A: არ. HSL–HEX–ე იძლევა მხოლოდ 6‑ნიშნა (ან 3‑ნიშნა) HEX–ს. alpha–არხის დასამატებლად საჭიროა rgba() ან 8‑ნიშნა ფორმატის სხვა ხელსაწყო.

Q: CMYK–ის მნიშვნელობები, რომლებიც ნაჩვენებია, ზუსტია?
A: არა – ისინი on‑screen approximation (ეკრანის მიახლოებითი)ა და შეიძლება საგრძნობლად განსხვავდებოდეს პროფესიული ბეჭდვის CMYK–ისაგან.

Q: მუშაობს HSL–HEX–ე ოფლაინ?
A: დიახ. მთელი პროცესი – HSL–HEX–ის, RGB–ის, HSV–ის, CMYK–ის, LAB–ის გამოთვლა – ხდება თქვენს ბრაუზერში. არაფერი აიტვირთება სერვერამდე.

Q: რა ხდება, თუ Saturation ან Lightness 100%–ია?
A: Saturation=100% → C = 1 – |2L – 1|, Lightness=100% → White (#ffffff). Lightness=0% → Black (#000000). Saturation=0% → Grey (R=G=B, L–ის მიხედვით).

Q: შემიძლია გამოვიყენო 3‑ნიშნა HEX CSS–ში?
A: დიახ. ყველა თანამედროვე ბრაუზერი მხარს უჭერს 3‑ნიშნა HEX–ს (e.g., #abc = #aabbcc).

Q: რატომ ვხედავ ზოგჯერ CMYK–ის 100%–ს?
A: მაგალითად, HSL: 0°, 100%, 50% (წითელი) → CMYK–ში: 0% Cyan, 100% Magenta, 100% Yellow, 0% Key. HSL–HEX–ე მუშაობს sRGB–დან CMYK–ზე, რომელიც gamut‑dependent – sRGB–ის ზოგიერთი ფერი CMYK–ში 100%–ზე მაღალია, მაგრამ ის მაინც 100%–ით ნაჩვენებია.

HSL‑HEX–ე vs. HSL‑RGB vs. HSL‑HSV

HSL–HEX–ე პირდაპირ გადადის HEX–ზე, მაგრამ იმავე ინტერფეისში RGB, HSV, CMYK, LAB–ის მნიშვნელობები ერთდროულად განახლდება. ეს განსაკუთრებით გამოსადეგია, როდესაც ერთი HSL–ის შეყვანით იღებთ ოთხ სხვადასხვა ფერთა მოდელს.

HSL–HEX–ის მაგალითები:

HEX–ის 3‑ნიშნა ვარიანტი case‑insensitive (შეიძლება იყოს #ABC ან #abc); HTML/CSS–ში ორივე ვარიანტი მუშაობს.

HEX–ის განსხვავებები HSL–ისაგან

• HEX (6‑ნიშნა) იძლევა 256³ = 16 777 216 ფერს. HSL–HEX–ეზე იგივე სიზუსტე ინარჩუნებს: Hue–ს 360, Saturation 101, Lightness 101 ≈ 3 672 360 unique HSL points, მაგრამ ისინი აისახება 16 777 216 RGB/HEX–ის ფერად.
• HSL უალფა, HEX – უალფა. HSL–HEX–ე არ გვაძლევს alpha–ს.
• Lightness (HSL) – არ = Brightness (HSV). HSL–HEX–ე იყენებს Lightness–ს, რაც ცვლის ფერს, ხოლო HSV–ს Brightness (V) მხოლოდ 0–100%–ია. HSL–HEX–ე – HSL–ის მიხედვით მუშაობს.

HSL–HEX–ე: შეცდომის ტექსტი

თუ მომხმარებელი ცდილობს 243, 75% ან 243, 75%, 59 (პროცენტის გარეშე), მიიღებს:

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

(ქართულად: “შეიყვანეთ HSL hue 0–360–ის ფარგლებში, ორი %–ით, მაგ. 243, 75%, 59%.”)

3‑ნიშნა HEX–ის მიღება – მაგ. #f00 – #ff0000–სთვის. HSL–HEX–ე აჩვენებს 3‑ნიშნა ფორმას, თუ R, G, B 16–ის ჯერადია. წინააღმდეგ შემთხვევაში, 6‑ნიშნა.

HSL‑HEX–ე: Browser‑based vs Server‑based

HSL–HEX–ე მუშაობს მთლიანად client‑side (ყოველი გამოთვლა ხდება JavaScript–ის მეშვეობით, ინტერნეტის გარეშეც). CMYK–ის on‑screen მიახლოება, HSV, LAB – იგივე. Monopoly: HSL–HEX–ე არ აიტვირთება მონაცემები. HSL–HEX–ე არ იყენებს API–ს.

HSL–HEX–ე vs. LAB / LCH

LAB ან LCH–ის HSL–HEX–ეზე gamut‑clipping–ის გარეშე ვერ გადაიყვანება, რადგან LAB–ის ზოგიერთი მნიშვნელობა sRGB–ს გარეთაა. HSL–HEX–ე sRGB gamut–ში clipping–ს არ იყენებს, რადგან 0–100% Saturation + 0–100% Lightness sRGB–ის ყველა ფერია.

HSL–HEX–ის ფორმატი: #ffcc00, #fc0. HSL–HEX–ე – 6 3–ნიშნა (shorthand) – case‑insensitive, 0–9 + A–F.

HSL–HEX–ე: Lightness (L) – WCAG Contrast

Accessibility–თვის (WCAG 2.1), relative luminance (Y) 0–1 გამოითვლება RGB–დან. HSL–HEX–ე HSL–ის L–ის ცვლილებით იძლევა Y–ის ცვლილებას, რაც აადვილებს contrast ratio–ს (L1+0.05)/(L2+0.05) გამოთვლას. HSL–HEX–ე – HEX–ის შესაქმნელად, იმავდროულად Lightness–თვის.

HSL–HEX–ე: ნიმუშები

HEX – CSS–ში #40bfbf. HSL–HEX–ე HEX–ზე pixel‑perfect.

HSL–HEX–ე: Browser Compatibility

HEX (6‑ნიშნა) – CSS 1‑დან; 3‑ნიშნა – CSS2‑დან. HSL–HEX–ე – HEX–ს case‑insensitive.

HSL–HEX–ე: CMYK Output

CMYK (0%-100%): On‑screen estimate. HSL–HEX–ე – sRGB–დან CMYK–ზე, gamut‑dependent.

HSL–HEX–ე: Error Prevention

%–ის 2 ნიშანი, Hue 0–360.

HSL–HEX–ე – HEX–ის instantaneous (მყისიერი) კონვერტაცია.