HEX ფერი გამოსახულებიდან: პიქსელის მნიშვნელობის ამოღება CSS-ისთვის
ეს ინსტრუმენტი იმისთვისაა, რომ გადმოცემული HEX ფერის კოდი – 6-ნიშნა RGB-ნოტაცია, რომელიც CSS-ის სტანდარტია – იყოს პირველადი და ერთადერთი გამომავალი. სწორედ ეს განასხვავებს მას მსგავსი გვერდებისაგან, რომლებიც RGB-ს ან HSL-ს იყენებენ. როცა გჭირდება color: #1E90FF ან background-color: #FF5733-ის ჩასმა CSS-ში, HEX-ფორმატი ყველაზე ოპტიმალურია, რადგან ის მოითხოვს მხოლოდ #-სა და 6-ნიშნა კოდს, დამატებითი ფრჩხილების ან სინტაქსური კონსტრუქციების გარეშე. ეს ნიშნავს, რომ ფერი მზადაა გამოსაყენებლად, როგორც კი მის კოდს დააკოპირებ.
ინსტრუმენტის მუშაობის პრინციპი
აიღე ნებისმიერი გამოსახულება (PNG, JPG, WebP, GIF, AVIF ან HEIC) – ინსტრუმენტი მიიღებს ფაილს 4096 პიქსელზე მეტი სიგრძის უმეტეს მხარეს. ჩატვირთვისთანავე, ცენტრალური პიქსელის HEX, RGB და HSL მნიშვნელობები ჩნდება. მომხმარებელს შეუძლია:
- გადაადგილება: მაუსის ან კლავიატურის ისრის ღილაკების გამოყენება (Shift-ი 10 პიქსელით ზრდის ნაბიჯს);
- დაწკაპუნება: Enter-ის ან Space-ის გამოყენება ფერის ისტორიაში შესანახად;
- ნულოვანი წერტილის ვიზუალიზაცია: crosshair-ის (დამიზნების) ხილვა, რომელიც 1:1-ის მაგნიფიკაციაშია – ზუსტად იმ პიქსელს ხედავ, რომელსაც ირჩევ.
გამოსახულების ზომა (სიგანე × სიმაღლე) ნაჩვენებია, ისევე როგორც მიმდინარე პიქსელის კოორდინატები (x, y). თუ პიქსელი ნახევრად გამჭვირვალეა, ინსტრუმენტი ჩამოწერს: "Alpha ‹n›% – this pixel is partly transparent." – HEX-ის 6-ნიშნა ფორმატი α-არხს არ შეიცავს, ამიტომ გამჭვირვალობა ცალკე ფიქსირდება.
HEX-ის უპირატესობა α-არხის მიმართ
6-ნიშნა HEX (მაგ., #FF6347) 0-255-იანი RGB-ს 16-ობით ჩანაწერია. მასში α-არხი (0-1-იანი გამჭვირვალობა) არ იგულისხმება. 8-ნიშნა HEX, როგორიც #FF634780-ია, α-ს 64-ობით მნიშვნელობას ამატებს, მაგრამ ვებ-ში ეს ფორმატი ნაკლებად გამოიყენება. ინსტრუმენტის "What makes this page different"-ის ნაწილი ზუსტად იმის თქმაა, რომ HEX-ი α-ს გარეშე გადმოცემულია, ხოლო გამჭვირვალობა იწერება: "Alpha 45% – this pixel is partly transparent." ეს ნიშნავს, რომ CSS-ში opacity: 0.45-ის ან rgba(255, 99, 71, 0.45)-ის ცალკე ჩაწერაა საჭირო.
| ფორმატი | α-არხი? | CSS-ის მაგალითი |
|---|---|---|
| 6-ნიშნა HEX | No | color: #FF6347 |
| 3-ნიშნა HEX | No | color: #F63 (შემოკლებული) |
| RGB | No | color: rgb(255, 99, 71) |
| RGBA | Yes | color: rgba(255, 99, 71, 0.45) |
| HSL | No | color: hsl(9, 100%, 64%) |
| HSLA | Yes | color: hsla(...) |
გამჭვირვალობა, ანტი-ალიასინგი და JPEG-ის შეზღუდვები
ერთ-ერთი ყველაზე ხშირი შეცდომა, რასაც ინსტრუმენტი ხელს უშლის, არის ანტი-ალიასინგის ეფექტი. JPEG-ის, PNG-ის ან WebP-ის კომპრესია (JPEG-ში – lossy, PNG-ში – lossless) ცვლის მიმდებარე პიქსელების მნიშვნელობებს. მაგალითად, თუ ღია ცისფერი (#87CEEB) გრადიენტი ან ანტი-ალიასის გამო იღებს 0-5%-იან ცვლას, ინსტრუმენტი მაინც აჩვენებს ზუსტ იმ მნიშვნელობას, რაც ფაილშია. ეს ნიშნავს, რომ HEX-ი, რომელსაც ხედავ, არის რეალური, მაგრამ ის, რაც ეკრანზე ჩანს, შესაძლოა შეცვლილი იყოს:
- JPEG: კომპრესია იწვევს block-artifact-ებს; ორი მეზობელი პიქსელი, ისევე, 1%-იც იცვლება.
- PNG: lossless, მაგრამ ანტი-ალიასინგი (ეკრანის მრგვალი გადასვლები) ხდება.
- HEIC/AVIF: advanced compression, იგივე ეფექტი.
ამიტომ, crosshair-ის (magnified view) წყალობით, შეგიძლიათ 1:1-ზე ნახო, თუ რომელი პიქსელია "ნამდვილი". თუ α-40%-იანი პიქსელი აირჩევა, ისტორიაში ის ცალკე ჩანაწერად ინახება, იმ შემთხვევაშიც, თუ RGB-ის მნიშვნელობები (R, G, B) იგივეა, მაგრამ α-სხვაობა – α-45% განსხვავდება α-50%-ისგან. ეს იმიტომ, რომ rgba(255, 0, 0, 0.5) და rgba(255, 0, 0, 0.45) ორი განსხვავებული ფერია, მიუხედავად იმისა, რომ HEX-ი #FF0000-ია.
ისტორია, კოპირება და ბრაუზერის ბლოკირება
- 12-მდე ჩანაწერი: ისტორიაში 12 ფერი ინახება. ძველი ჩანაწერი, 12-ის ზღვრის გადაჭარბების შემთხვევაში, იშლება. α-ს განსხვავება (იხ. ზემოთ) განაპირობებს ცალკე ჩაწერას.
- კოპირება: ნებისმიერი ნაჩვენები HEX, RGB ან HSL მნიშვნელობის დაწკაპუნება (Click to copy) იძლევა კოპირების საშუალებას. თუ ბრაუზერი Clipboard API-ს ბლოკავს, ინსტრუმენტი ჩამოწერს: "Could not copy – your browser blocked clipboard access." – ეს ხდება Firefox-ის, Safari-ის ან Chrome-ის მკაცრი HTTPS-ის (ან localhost-ის) გარეშე.
- "Start over": ისტორიის, crosshair-ის, გამოსახულების გამოყენება – ყველაფერი ნაგულისხმევ 0-ზე ბრუნდება.
FAQ
Q: რატომ მაჩვენებს #1E90FF-ს მაგივრად #1E90 и...
A: 6-ნიშნა HEX-ი სრულყოფილი 16-ობითი RGB-ა. "1E90FF" იშლება: R=30 (0x1E), G=144 (0x90), B=255 (0xFF). 3-ნიშნა HEX-ი ("#19F") მხოლოდ 12-ბიტიანი (4-4-4)ა.
Q: JPEG-ში იგივე HEX-ისა, რაც PNG-ში, განსხვავებულია – რატომ?
A: JPEG-ის lossy compression იწვევს color quantization-ს: 2X2-იანი block-ის R,G,B იცვლება 1-2-ჯერ. ინსტრუმენტი ფაილის ზუსტ მნიშვნელობას იძლევა.
Q: 4096-ზე მეტი გამოსახულება – რა ხდება?
A: ის scaled down-ია, longest side ≤ 4096. 3050×2500 (5.7 MP) → 3050×2500 იგივე, 4097×4000 → 4096×4000.
Q: ისტორიაში 12-ის ლიმიტი – რატომ?
A: UI-ის (Picks-ის) ზომის შეზღუდვა. α-ს განსხვავებისას (α=0.5 vs 0.6) 12-ი მაინც იგივეა.
Q: Arrow keys-ით 10 px Shift – ნაბიჯი?
A: Shift-ის გარეშე 1 px, Shift-ით 10 px – crosshair shift. "Pressing Shift while using arrow keys moves the crosshair by 10 pixels."
Q: α=0?
A: α=0-ი (სრულიად გამჭვირვალე) – HEX-ი მაინც 6-ნიშნაა („#000000"?). ინსტრუმენტი "Alpha 0% – this pixel is partly transparent."-ს ჩამოწერს.
Q: "That image could not be opened" – რატომ?
A: Corrupted file/unsupported format (WebP-ის iOS-ver?) – ინსტრუმენტი MIME types-ის (image/png, image/webp) – თუ ფაილი 0 bytes-ი ან invalid-ი, "That image could not be opened. It may be corrupted or in an unsupported format."
Q: Crosshair-ის (magnifier) view-ს GPU acceleration?
A: 1:1 (pixel-perfect) - browser Canvas 2D – no GPU-um.
Q: "Saved #FF6347 to your picks." – copy-ს CSS-ში paste-იც "rgb(255, 99, 71)" – right?
A: Click any value – HEX, RGB, HSL - copy to clipboard. "Clicking any colour value (HEX, RGB, HSL) copies it to the clipboard."
Q: "Start over" – clear history?
A: Yes – "clears the image, empties the colour history, and resets the tool to its initial state."
Q: FLOAT VALUES?
A: Integer 0-255 integer, α = 0–100 integer.
Q: "That file type is not supported." – which?
A: "Try a PNG, JPG, WebP, GIF, AVIF or HEIC image." – unsupported: BMP, TIFF, SVG (raster only).
Q: Design software integration?
A: HEX code directly into Figma/Photoshop (color picker), CSS (color: #1E90FF).
Q: WebP vs PNG?
A: Both lossless/lossy – tool reads exact pixel value from file – compression = artifacts (see above).
Q: Firefox browser – copy blocked?
A: "Could not copy – your browser blocked clipboard access." – use Ctrl+C manually.
Q: "click to save a color" – global click?
A: Click on image – "Saved ‹hex› to your picks." – not outside.
Q: "Alpha 100%" – opaque?
A: "Alpha 100% – this pixel is opaque." not shown? Opaque => NO alpha line at all.
Q: Keyboard navigation – tab?
A: Focus on image element? Arrow keys/Enter/Space works only after focus.
Q: "Pressing Shift + Arrow" – 10 pixels?
A: Yes. "Pressing Shift while using arrow keys moves the crosshair by 10 pixels."
Q: "Colours with the same RGB values but different alpha values are saved as separate entries."
A: Example: rgba(255,0,0,0.5) and rgba(255,0,0,0.45) – 2 entries.
Q: "6-digit hex" – no alpha channel.
A: Correct. "hex colour code – six-digit (or three‑digit shorthand) –"
Q: "The tool displays the exact pixel value stored in the image."
A: Yes – uncompressed, original file pixel.
Q: "semi‑transparent pixel is read on its own"
A: Without background composition. "without considering what might be behind it."
Q: "longest side exceeding 4096 pixels are scaled down"
A: Yes – aspect ratio preserved.
Q: "central pixel" – not top-left?
A: Yes – "When an image is loaded, the colour values and coordinates of the centre pixel are displayed immediately."
Кароткі FAQ
Пытанне 1. Чаму 6-значны HEX?
Таму што гэта стандартны фармат у вэб-распрацоўцы. Ён утрымлівае тры байты (R, G, B), кожны ад 00 да FF.
Пытанне 2. Што рабіць, калі файл не адкрываецца?
Інструмент паведамляе: "That image could not be opened". Праверце фармат: толькі PNG, JPG, WebP, GIF, AVIF, HEIC. Файл не павінен быць пашкоджаны.
Пытанне 3. Чаму два пікселі з аднолькавым RGB, але розным альфа-значэннем лічацца рознымі колерамі?
Таму што на практыцы яны па-рознаму паводзяць сябе пры накладанні на вэб-старонках: #FF0000 пры 45% непразрыстасці і #FF0000 пры 50% — гэта розныя колеры.
Пытанне 4. Ці можна выкарыстоўваць вынікі ў Adobe Photoshop?
Так, дастаткова скапіяваць HEX, RGB або HSL (напрыклад, з дапамогай "Click to copy") і ўставіць у поле колеравай палітры Photoshop.
Пытанне 5. Колькі колераў можна захаваць у гісторыі?
Да 12 колераў. Пры спробе захаваць 13-ы, самы стары выдаляецца. Калі два пікселі маюць аднолькавы RGB, але розныя альфа-значэнні (напрыклад, 45% і 50%), яны захоўваюцца асобна.
Пытанне 6. Як ачысціць усё і пачаць нанова?
Націсніце кнопку "Start over". Яна выдаляе малюнак, ачышчае гісторыю колераў і вяртае скрыжаванне ў зыходнае становішча.