რა არის RGB-დან Hex-ში გადამყვანი გვერდი?
ეს გვერდი იღებს სამ რიცხვს – წითელს (Red), მწვანეს (Green) და ლურჯს (Blue) – თითოეული 0-დან 255-მდე დიაპაზონში, და მყისიერად აჩვენებს შესაბამის თექვსმეტობით (hex) ფერის კოდს, მაგალითად #1E90FF. ინსტრუმენტი ერთდროულად განაახლებს ფერის ნიმუშს (swatch) და ყველა სხვა მხარდაჭერილ ფორმატს: HSL, HSV, CMYK, LAB და ფერის ამომრჩევს.
რაც ამ გვერდს გამორჩეულს ხდის, არის ის, რომ RGB-დან hex-ში გარდაქმნა ხდება ზუსტად, ყოველგვარი გამოთვლითი შეცდომების ან გამა-სფეროს (gamut) შეკუმშვის გარეშე. ორივე ფორმატი – RGB (ათობითი, 0–255) და hex (თექვსმეტობითი, ექვსნიშნა) – წარმოადგენს ზუსტად იმავე ფერთა სივრცეს, sRGB-ს, რომელსაც თანამედროვე ეკრანების უმეტესობა იყენებს. ამიტომ გარდაქმნა შექცევადია: 79, 70, 229 ყოველთვის მისცემს #4F46E5-ს, და #4F46E5-ის RGB-ში დაბრუნება ისევ 79, 70, 229 იქნება.
Hex-ის გამომავალი ყოველთვის იწყება #-ით და შეიცავს ექვს ციფრს – ინსტრუმენტი არ ამოკლებს მას სამნიშნა ფორმამდე (მაგალითად #AABBCC არ გახდება #ABC). თუმცა hex-ის შეყვანის ველი იღებს სამნიშნა შემოკლებას (როგორიცაა #abc) და ავტომატურად აფართოებს მას ექვსნიშნამდე. ყველა დამუშავება ხდება თქვენს ბრაუზერში – არაფერი იტვირთება სერვერზე.
RGB ფერის მოდელი და 0–255 მასშტაბი
RGB არის დანამატი ფერის მოდელი (additive color model), სადაც სამი ძირითადი ფერი – წითელი, მწვანე, ლურჯი – სინათლის წყაროების სახით ერთდებიან. რაც უფრო მაღალია თითოეული არხის მნიშვნელობა, მით უფრო ნათელია ფერი. მაქსიმალური (255, 255, 255) იძლევა თეთრს, მინიმალური (0, 0, 0) – შავს.
რატომ 0–255? ეს რიცხვითი დიაპაზონი 8-ბიტიან კოდირებას ეფუძნება. ერთი ბაიტი (8 ბიტი) იძლევა 256 შესაძლო მნიშვნელობას (2^8 = 256), რომელიც 0-დან 255-მდე ითვლება. ეს არის ინდუსტრიის სტანდარტი ციფრული გამოსახულების და ეკრანებისათვის. 256 გრადაცია თითოეული არხისთვის საკმარისია ადამიანის თვალის მიერ განსხვავებული ფერების უმეტესობის წარმოსაჩენად sRGB სივრცეში.
RGB-ის იმპუტად მიღება შესაძლებელია მძიმით ან სივრცით გამოყოფილი რიცხვების სახით – მაგალითად 79, 70, 229 ან 79 70 229. ინსტრუმენტი მათ შესაბამისად აანალიზებს. თუ მნიშვნელობები გასცდებიან 0–255 დიაპაზონს ან იწერება არასწორი ფორმატით, გამოჩნდება შეცდომის შეტყობინება: „Enter RGB as three numbers 0–255, like 79, 70, 229.“ – ეს ერთადერთი გაფრთხილებაა, რადგან ყველა სხვა ვალიდაცია ჩაშენებულია HTML-ის input ელემენტებში.
Hex კოდის სტრუქტურა და გარდაქმნის მათემატიკა
Hex ფერის კოდი იწერება #-ის შემდეგ ექვსი თექვსმეტობითი (hexadecimal) ციფრით: RRGGBB. თითოეული წყვილი შეესაბამება RGB არხის მნიშვნელობას. გარდაქმნის მათემატიკა მარტივია:
- აიღე ათობითი რიცხვი (0–255).
- გაყავი 16-ზე. მთელი ნაწილი იძლევა პირველ hex ციფრს, ნაშთი – მეორეს.
- მაგალითად: 255 ÷ 16 = 15 (ნაშთი 15) → 15 თექვსმეტობითში არის
F, ამიტომ 255 =FF. - 0 ÷ 16 = 0 (ნაშთი 0) →
00. - 79 ÷ 16 = 4 (ნაშთი 15) →
4F(79 = 4×16 + 15). - 70 ÷ 16 = 4 (ნაშთი 6) →
46. - 229 ÷ 16 = 14 (ნაშთი 5) →
E5(14 = E, 5 = 5).
ამრიგად, RGB(79, 70, 229) → #4F46E5. ციფრები A-დან F-მდე წარმოადგენს 10-დან 15-მდე მნიშვნელობებს, და ისინი შეიძლება იწერებოდეს როგორც დიდი, ისე პატარა ასოებით – #4F46E5 და #4f46e5 ექვივალენტურია ყველა ბრაუზერში.
Hex-ის შეყვანის ველი იღებს როგორც ექვსნიშნა (#RRGGBB), ისე სამნიშნა (#RGB) ფორმატს. სამნიშნა ფორმატში თითოეული ციფრი ორმაგდება: #abc → #aabbcc. მაგალითად #f00 (წითელი) გაფართოვდება #ff0000-მდე. თუმცა ინსტრუმენტის გამომავალი ყოველთვის ექვსნიშნაა – არასდროს იქნება #ABC. ეს შეგნებული გადაწყვეტილებაა, რადგან CSS-სა და დიზაინის ინსტრუმენტებში ყველაზე გამჭვირვალეა სრული 6-ნიშნა კოდი.
sRGB ფერის სივრცე და ზუსტი კონვერტაცია
sRGB (standard Red Green Blue) არის ფერის სივრცე, რომელიც 1996 წელს შექმნეს Hewlett-Packard-მა და Microsoft-მა. ის განსაზღვრავს, თუ როგორ უნდა იყოს RGB-ის რიცხვითი მნიშვნელობები გადაყვანილი ხილულ ფერად, მათ შორის გამა კორექციის (gamma correction) გათვალისწინებით. ყველა თანამედროვე ბრაუზერი, ოპერაციული სისტემა და ეკრანი იყენებს sRGB-ს, თუ სხვა სივრცე (როგორიცაა Display P3) ცალსახად არ არის მითითებული.
რადგან RGB (0–255) და hex (#RRGGBB) ორივე sRGB-ზეა დაფუძნებული, მათ შორის გარდაქმნა ზუსტია – არ არის საჭირო გამა-სფეროს შეზღუდვა ან ფერის მოჭრა (clipping). LED-ან LCD-ეკრანებზე ნაჩვენები ფერი იდენტური იქნება, იქნება ის RGB-ში 79, 70, 229, hex-ში #4F46E5, ან HSL-ში hsl(243, 75%, 59%) (HSL-ში 0%–100% მნიშვნელობებში). თუმცა, თუ RGB-ს CMYK-ში გადაიყვანთ (როგორც ჩვენი ინსტრუმენტიც აკეთებს), ზოგიერთი ნათელი sRGB ფერი შეიძლება ვერ დაიბეჭდოს მელნით – ეს უკვე CMYK-ის შეზღუდვაა, არა RGB-ის.
ჩვენი ინსტრუმენტი hex-ის გარდაქმნისას არ იყენებს ფერის სივრცის კონვერტაციის მატრიცებს – უბრალოდ 0–255-დან 00–FF-მდე. ეს ნიშნავს, რომ ინსტრუმენტი ზუსტია sRGB-ის 16.7 მილიონი ფერისთვის.
შეყვანის ფორმატი და შეცდომების მართვა
RGB-ის იმპუტისათვის მომხმარებელმა უნდა შეიყვანოს სამი მთელი რიცხვი, თითოეული 0–255 დიაპაზონში, გამოყოფილი მძიმით ან სივრცით. ინსტრუმენტი მიიღებს ორივე ვარიანტს: 79, 70, 229 ან 79 70 229. მძიმის შემდეგ შეიძლება იყოს დამატებითი სივრცე – ყოველ შემთხვევაში ანალიზატორი გაწმენდს მათ.
განსაკუთრებული ყურადღება მივაქციოთ ლიმიტებს. ნებისმიერი მნიშვნელობა:
- 0-ზე ნაკლები ან 255-ზე მეტი
- ან იმპუტში 3-ზე მეტი ან ნაკლები რიცხვი
- ან იმპუტი, რომელიც საერთოდ არ შეიცავს რიცხვებს (მაგ.,
abc)
გამოიწვევს შეცდომის შეტყობინებას: „Enter RGB as three numbers 0–255, like 79, 70, 229.“ შეცდომა არ იწერება hex-ის ველში – ის ჩნდება RGB-ის იმპუტის გვერდით, ხოლო hex-ის ველი ცარიელი რჩება ან ძველი მნიშვნელობა ინახება.
Hex-ის იმპუტისათვის ვალიდაციაც მსგავსია: თუ ფორმატი არასწორია (მაგ., #GGGGGG ან #12345), ინსტრუმენტი გამოუშვებს მსგავს შეტყობინებას. Hex-ის ველი იღებს #-იან ან #-იან 3- ან 6-ნიშნა ჩანაწერს. 8-ნიშნა hex (#RRGGBBAA) არ იქნება მხარდაჭერილი, თუმცა ინსტრუმენტი მას ცალკე ვეგზალ ფორმატად არ გამოაქვს – alpha-ს გამოყენება მხოლოდ HSL-ს ან color picker-ის გამჭვირვალობის რეგულატორის მეშვეობითაა შესაძლებელი.
ვის სჭირდება ეს ინსტრუმენტი?
| აუდიტორია | გამოყენების შემთხვევა |
|---|---|
| Front-end Developers | CSS-ში color, background-color, border-color – hex ფორმატი ყველაზე ხშირად გამოიყენება. |
| UI/UX Designers | Figma-დან, Sketch-იდან ან Adobe XD-დან RGB-ის ნიმუშების hex-ში გადაყვანა. |
| Graphic Designers (Web) | Photoshop-ის ან GIMP-ის color picker-დან RGB (0–255) მნიშვნელობების hex-ში გადატანა. |
| Students / Hobbyists | CPSC ინსტიტუციების კურსებში ფერის მოდელების პრაქტიკული გაცნობა. |
| Color Pickers | ნებისმიერი ინსტრუმენტი, რომელიც RGB-ს აბრუნებს, მაგრამ hex-ს მოითხოვს. |
გარდა ამისა, ინსტრუმენტი ერთდროულად აახლებს HSL, HSV, CMYK, LAB ფორმატებსაც, რაც სასარგებლოა, როდესაც გჭირდებათ იგივე ფერი სხვადასხვა კონტექსტში.
ხშირად დასმული კითხვები
1. რატომ არის hex-ის კოდი ყოველთვის 6 ნიშანი, 3-ნიშნის ნაცვლად?
ინსტრუმენტი განზრახ ინარჩუნებს 6-ნიშნა ფორმატს, რადგან CSS-ის ბევრი სტილის ფურცელი იყენებს 6-ნიშნა კოდს. 3-ნიშნა ფორმატი მხოლოდ მაშინ მუშაობს, როცა თითოეული წყვილი ერთმანეთის ტოლია (მაგ., #AABBCC ← #ABC). თუ 3-ნიშნა კოდს შეიყვანთ hex-ის ველში, ინსტრუმენტი მას აფართოებს.
2. რა მოხდება, თუ RGB-ის მნიშვნელობებს 0–255-ის გარეთ შევიყვან? ინსტრუმენტი აჩვენებს შეცდომის შეტყობინებას: „Enter RGB as three numbers 0–255, like 79, 70, 229.“ ვერანაირი hex–ის გამოთვლა არ მოხდება.
3. შეუძლია თუ არა ინსტრუმენტს 8-ნიშნა hex-ის (alpha-თი) გარდაქმნა? არა. ინსტრუმენტი მხოლოდ 6-ნიშნა hex-ს გამოიმუშავებს. alpha-ს მნიშვნელობის მისაღებად გამოიყენეთ HSL-ის ან color picker-ის alpha control.
4. ხომ არ იგზავნება ჩემი მონაცემები სერვერზე? არა. ყველა გამოთვლა შესრულებულია თქვენს ბრაუზერში (client-side JavaScript). არაფერი იტვირთება ინტერნეტში.
5. რა განსხვავებაა hex-ის #RRGGBB-სა და #RRGGBBAA-ს შორის?
#RRGGBB არის 6-ნიშნა, alpha-ს გარეშე (სრულად გაუმჭვირვალე). #RRGGBBAA (8-ნიშნა) შეიცავს alpha-ს – გამჭვირვალობის მნიშვნელობას 00–FF. ინსტრუმენტი მხარს უჭერს მხოლოდ 6-ნიშნა ვერსიას.
6. რატომ იწერება ზოგჯერ hex-ის #FF-ის ნაცვლად #ff?
ორივე ფორმატი ვალიდურია CSS-ში. ინსტრუმენტი ინახავს იმ ფორმატს, რომელსაც თქვენ შეიყვანთ (case-sensitive). მაგალითად, თუ RGB-ში 255, 0, 0 შეიყვანთ, hex-ის ველში გამოჩნდება #FF0000 (ალბათ დიდი ასოები), მაგრამ შეგიძლიათ ხელით შეიყვანოთ #ff0000 – ინსტრუმენტი განაახლებს ყველა სხვა ფორმატს იმავე კოდით.
7. შემიძლია თუ არა hex-ის შეყვანა #-ის გარეშე?
დიახ, ინსტრუმენტი იღებს #-იან ან #-იან ჩანაწერს. თუმცა CSS-ში #-ის გარეშე hex-ის ნებისმიერი მნიშვნელობა (მაგ., FF0000) ინტერპრეტირებული იქნება, როგორც ფერი, მაგრამ ის იშვიათია. ჩვენი ინსტრუმენტი ანალიზატორი #-ს ანიჭებს, თუ ის არ არის.