Што прави оваа страница и што ја прави посебна
Оваа алатка ви овозможува да изберете слика од вашиот уред, а потоа да поминете со курсорот над неа или да кликнете за да одберете кој било пиксел. Веднаш се прикажува хексадецималниот код на бојата на тој пиксел (заедно со RGB и HSL вредностите), за да можете да го копирате за употреба во CSS, дизајнерски софтвер или кој било друг проект. Зумираниот приказ помага да го погодите точниот пиксел, а можете да зачувате повеќе бои во историја за подоцнежна референца.
Она што ја издвојува оваа страница од сродните страници кои прикажуваат RGB функционална нотација или HSL e што хексадецималниот код на бојата е примарен излез. Тој е шестцифрен (или трицифрен скратен) запис на RGB нотацијата, кој е стандард во CSS и дизајнерските алатки. За разлика од страниците што се фокусираат на rgb(r, g, b) или hsl(h, s, l), овде ја добивате хекс-вредноста без алфа-канал во нејзината шестцифрена форма. Секоја транспарентност се пријавува одделно како процент: „Алфа ‹n›% – овој пиксел е делумно транспарентен.“ Бидејќи хексот е компактен и веб-нативен формат, оваа страница е прв избор кога ви треба вредност на боја што може директно да се вметне во color, background-color или која било друго CSS својство без дополнителни загради или синтакса.
Како функционира – од слика до хексадецимална боја
Кога ќе поставите слика, алатката веднаш ги пресметува вредностите на бојата и координатите на централниот пиксел. Ова значи дека не мора да поминувате со курсорот за да видите некој почетен примерок. Потоа, поместувањето на покажувачот над сликата примерува бои пиксел по пиксел. Кликнувањето ја зачувува моментално примеруваната боја во вашите одбрани бои.
Излезните податоци вклучуваат:
- Димензии на сликата (ширина × висина)
- Координати на пикселот (x, y)
- HEX: Хексадецимален код на бојата (шестцифрен, на пр.
#1E90FF) - RGB: Вредности за црвено, зелено и сино (0–255)
- HSL: Нијанса (0°–360°), заситеност (0%–100%), осветленост (0%–100%)
- Ако пикселот е полу-транспарентен: „Алфа ‹n›% – овој пиксел е делумно транспарентен.“
- Кога ќе кликнете: „Зачувано ‹hex› во вашите одбрани бои.“
Сите прикажани вредности (HEX, RGB, HSL) може да се копираат со клик. Ако прелистувачот го блокира пристапот до clipboard, се прикажува порака: „Не можеше да се копира – вашиот прелистувач го блокираше пристапот до клипбордот.“
Поддржани формати, ограничувања и скалирање
Алатката прифаќа слики во следниве формати: PNG, JPG, WebP, GIF, AVIF, HEIC. Соодветните MIME типови се: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Доколку фрлите неподдржан тип на датотека, се прикажува: „Тој тип на датотека не е поддржан. Обидете се со PNG, JPG, WebP, GIF, AVIF или HEIC слика.“ Ако сликата не може да се отвори: „Таа слика не можеше да се отвори. Можеби е оштетена или во неподдржан формат.“
Скалирање: Сликите чија најдолга страна надминува 4096 пиксели се намалуваат. Ова е за да се обезбеди непречена работа на прелистувачот и точно примерување без преголема обработка.
Транспарентност: Алатката ја чита точната вредност на пикселот како што е зачувана во сликата. Ако пикселот е полу-транспарентен, вредноста на алфа-каналот се прикажува како процент. Но, хексадецималниот код (шестцифрен) не содржи алфа-канал – за транспарентност треба да се користи осумцифрен хекс (на пр. #RRGGBBAA) или функционален rgba(). Затоа алатката одделно го прикажува процентот на алфа.
Важно: Ако сликата е JPEG или скриншот, компресијата и анти-алиазингот може да ги изменат вредностите на пикселите. Дури и рамна површина на боја може да има мали варијации меѓу соседните пиксели. Ова значи дека изборот на точниот пиксел е клучен.
Транспарентност и алфа-канал – зошто хекс не ја прикажува
Многу дизајнери и програмери се навикнати да користат шестцифрен хексадецимален код (#RRGGBB) кој не поддржува алфа-канал. Осумцифрениот хекс (#RRGGBBAA) или функционалниот rgba() се потребни за транспарентност. Оваа алатка го прикажува точниот шестцифрен хекс, а алфа-вредноста ја пријавува одделно. На пример, ако пикселот има боја со 50% транспарентност, ќе видите #FF0000 и „Алфа 50% – овој пиксел е делумно транспарентен.“ Не се претпоставува позадина – пикселот се чита сам за себе. Ако треба да го репродуцирате изгледот на транспарентна боја врз реална позадина, треба да го земете предвид алфа-каналот во вашиот CSS.
Историја на зачувани бои и копирање на вредности
Кога ќе кликнете на сликата, моментално примеруваната боја се зачувува во список со историја на одбрани бои. Овој список може да собере до 12 ставки. Секое зачувување додава нова ставка дури и ако RGB вредностите се исти, но алфа-вредноста е различна – тие се третираат како одделни записи во историјата. Кликнувањето на прикажаната боја (на пример, хекс-кодот) во историјата ја вчитува таа боја назад во главниот приказ, така што можете да ги видите нејзините RGB и HSL вредности или да ја копирате.
Копирањето на која било вредност (HEX, RGB, HSL) се прави со клик. Ако прелистувачот го блокира пристапот до clipboard (најчесто поради безбедносни поставки), се прикажува споменатата грешка. Во таков случај, вредноста може рачно да се означи и копира.
Табела: споредба на прикажаните формати
| Формат | Пример | Намена |
|---|---|---|
| HEX (6-цифрен) | #1E90FF |
CSS својства без алфа |
| RGB | rgb(30, 144, 255) |
Функционална нотација |
| HSL | hsl(210, 100%, 56%) |
Визуелно интуитивна нотација |
| Алфа (процент) | „Алфа 30%“ | Транспарентност (одделно) |
Навигација со тастатура и пристапност
За прецизно избирање пиксели без глушец, можете да го користите крстот (crosshair) кој се поместува со стрелките на тастатурата. Секое притискање на стрелка го поместува крстот за 1 пиксел. Ако држите Shift додека притискате стрелка, поместувањето е за 10 пиксели. Притискањето на Enter или Space го зачувува моментално примеруваниот пиксел (како кликнување со глушец). Оваа функционалност е клучна за пристапност и за ситуации кога треба да изберете многу специфичен пиксел, на пример во анти-алиазирани делови од слика или во близина на рабови.
Копчето „Започни одново“ ја брише сликата, ја празни историјата на бои и ја враќа алатката во почетна состојба.
Често поставувани прашања
1. Зошто хексадецималниот код не содржи алфа-канал?
Оваа страница го прикажува стандардниот шестцифрен хекс формат (на пр. #FF5733) кој не поддржува алфа. Транспарентноста се пријавува одделно како процент. Ако ви треба осумцифрен хекс, треба да го креирате рачно од RGB и алфа: #RRGGBBAA каде што AA е хексадецимална вредност на алфа (0–255).
2. Дали може да извлечам боја од SVG или векторска илустрација?
Не. Алатката работи само со растерски слики (PNG, JPG, WebP, GIF, AVIF, HEIC). Векторските формати треба прво да се извезат како растерски слики (на пр. PNG).
3. Што се случува ако сликата е премногу голема?
Сликите со најдолга страна над 4096 пиксели ќе се скалираат за да се намали оптоварувањето на прелистувачот. Ова може да влијае на точноста на пикселите на многу високи резолуции. За прецизно примерување, користете слики со помала резолуција или делови од голема слика.
4. Зошто вредностите на боите се разликуваат од очекуваните во фото-едитор?
JPEG компресијата и анти-алиазингот воведуваат мали варијации во вредностите на соседните пиксели. Дури и ако објектот изгледа како рамна боја, пикселите на работ може да се различни. Алатката го чита точниот пиксел, не просек. Проверете дали сте го одбрале вистинскиот пиксел, користејќи го зумираниот приказ.
5. Може ли да зачувам повеќе од 12 бои?
Историјата на одбрани бои е ограничена на 12 ставки. Ако сакате да зачувате повеќе, треба да ги запишете некаде надвор, или да користите копчето „Започни одново“ за да го исчистите списокот. Ова ограничување е направено за да се одржи едноставноста на интерфејсот.
6. Дали алатката работи со транспарентни PNG-слики каде што позадината е видлива преку браузерот?
Да. Алатката го чита пикселот како што е зачуван, вклучувајќи го алфа-каналот. Не го зема предвид она што може да стои зад сликата (на пр. бела позадина на страницата). Затоа за транспарентни пиксели ќе видите мала алфа вредност и хекс код на вистинската содржина на пикселот, а не на мешаната боја со позадината.