Основна мета: отримання HEX-коду з зображення
Ця сторінка створена для одного завдання: взяти будь-яке зображення (PNG, JPG, WebP, GIF, AVIF, HEIC) і дати змогу вибрати будь-який піксель, щоб негайно отримати його колір у шістнадцятковому форматі — HEX. Верхня частина сторінки одразу знайомить із головним результатом: шестисимвольний код (наприклад, #1E90FF) або, за можливості, трисимвольний скорочений запис (#F0A). Саме HEX є стандартом у CSS і в більшості інструментів дизайну, тому сторінка позиціонує його як першорядний вихідний формат. RGB та HSL відображаються поряд, але вони — доповнення.
На відміну від сусідніх сторінок, де основою може бути функціональний запис RGB або HSL, тут HEX стоїть на першому місці. Шестисимвольний HEX не несе інформації про альфа-канал (прозорість). Якщо піксель має прозорість, вона повідомляється окремо у вигляді “Alpha ‹n›% — this pixel is partly transparent.” Це критична відмінність, яку варто розуміти: значення #1E90FF завжди означає повністю непрозорий колір; будь-яка напівпрозорість не впливає на шістнадцятковий запис і виноситься в окремий рядок.
Коли ви наводите вказівник миші на зображення, пікселі аналізуються по одному. Збільшений вигляд (лупа) допомагає точно влучити в потрібний піксель, особливо в ділянках із високою деталізацією або на межі кольорів. Клацання мишею зберігає поточний колір в історію (до 12 записів). Історія дає змогу повернутися до раніше вибраних кольорів, клацнувши по зразку.
Як працює вибір кольору пікселя: від завантаження до координат
Процес починається із завантаження файлу. Підтримуються такі формати:
| Формат | MIME-тип |
|---|---|
| PNG | image/png |
| JPG | image/jpeg |
| WebP | image/webp |
| GIF | image/gif |
| AVIF | image/avif |
| HEIC | image/heic, image/heif |
Якщо файл має інший формат або некоректний MIME-тип, з’являється повідомлення: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” Якщо зображення пошкоджене або не відкривається, виводиться: “That image could not be opened. It may be corrupted or in an unsupported format.”
Після успішного завантаження зображення перевіряється на розмір. Якщо найдовша сторона перевищує 4096 пікселів, зображення автоматично зменшується, щоб не перевантажувати браузер. Оригінальні піксельні значення після зменшення, звісно, можуть змінитися, тому для критичних випадків варто використовувати зображення меншого розміру.
Одразу після завантаження на сторінці з’являється напис “Image ready — move over it to sample, click to save a color.” і виводяться розміри зображення (ширина × висота) та кольори центрального пікселя. Ви можете переміщувати вказівник миші над зображенням — значення HEX, RGB, HSL і координати (x, y) оновлюються в реальному часі. Клацання лівою кнопкою зберігає поточний зразок в історію.
Для тих, хто працює без миші, передбачено повну клавіатурну навігацію. Клавіші зі стрілками переміщують перехрестя на один піксель. Затиснувши Shift і натискаючи стрілку, ви пересуваєте перехрестя на 10 пікселів за один крок. Клавіші Enter або Пробіл зберігають поточний колір так само, як клацання миші.
Чому HEX, а не RGB чи HSL? Особливості представлення
Більшість веб-розробників і дизайнерів звикли до запису кольору у форматі #RRGGBB. Цей рядок без додаткових дужок і ком можна одразу вставити у властивість CSS: color: #1E90FF; background-color: #FFA500;. Сторінка створена саме як “швидкий доступ” до шістнадцяткового коду. Якщо вам потрібен RGB-запис rgb(30, 144, 255) або HSL-запис hsl(210, 100%, 56%), ви можете скористатися сусідніми сторінками, але тут пріоритет — HEX.
Ще один важливий нюанс: HEX не підтримує альфа-канал у шістнадцятковій формі (хоча існує варіант #RRGGBBAA, але це не є стандартом у CSS до останніх версій). На цій сторінці шістнадцятковий код завжди має шість символів (або три у скороченому варіанті). Будь-яка прозорість повідомляється окремо у відсотках. Якщо ви наведете на напівпрозорий піксель, ви побачите, наприклад, HEX: #FFFFFF, а під ним “Alpha 50% — this pixel is partly transparent”. Це означає, що піксель має колір білий (255,255,255), але лише з 50% непрозорості. HEX-код не відображає цього, тому для прозорих зображень доводиться дивитися на додатковий рядок.
Історія збережених кольорів теж враховує альфа-канал. Кольори з однаковими значеннями RGB, але з різними альфа-значеннями, зберігаються як окремі записи. Це дозволяє розрізняти два екземпляри, наприклад, #FFFFFF при 50% і при 30% прозорості.
Прозорість та альфа-канал: як це відображається
Зображення у форматі PNG, GIF, WebP та AVIF можуть містити пікселі з різним ступенем прозорості. Сторінка читає точне значення пікселя з файлу без врахування того, що може бути за цим пікселем (наприклад, фон сторінки). Якщо піксель частково прозорий, на екрані з’являється рядок “Alpha ‹n›% — this pixel is partly transparent.”, де ‹n› — ціле число від 0 до 100 (округлене від значення 0–255). Наприклад, якщо альфа-канал дорівнює 128 (0–255), то виводиться “Alpha 50%”.
Слід пам’ятати, що HEX-код, який ви копіюєте, не містить цієї прозорості. Якщо ви вставите #1E90FF у CSS, колір буде повністю непрозорим. Якщо вам потрібна прозорість, доведеться додавати окремо властивість opacity або використовувати rgba() чи hsla().
Зображення JPEG (JPG) не підтримують прозорість, тому для них альфа-канал завжди буде 100% (не виводиться). Для зображень із втратами, як JPEG, або після обробки (скріншоти, стиснення) сусідні пікселі можуть мати незначні відмінності через артефакти стиснення та згладжування. Це означає, що в однорідній, на перший погляд, площі ви можете отримати кілька різних відтінків. Сторінка виводить точне піксельне значення, яке зберігається в файлі, а не “усереднений” колір.
Клавіатурна навігація та збереження кольорів
Для людей з обмеженою моторикою або тих, хто полюбляє працювати без миші, передбачено повноцінне керування за допомогою клавіатури:
- Стрілки (вгору, вниз, вліво, вправо) — переміщення перехрестя на 1 піксель.
- Shift + стрілка — переміщення на 10 пікселів.
- Enter або Пробіл — зберігає поточний колір в історію.
Коли ви зберігаєте колір, з’являється повідомлення “Saved ‹hex› to your picks.”, де ‹hex› — HEX-код. Історія зберігає до 12 кольорів. Якщо ви намагаєтеся додати 13-й, найстаріший запис витісняється. Клацання по зразку кольору в історії завантажує його назад на панель вибраного кольору (відображаються його HEX, RGB, HSL).
Крім того, клацання по будь-якому відображуваному значенню (HEX, RGB, HSL) автоматично копіює його до буфера обміну. Якщо браузер блокує доступ до буфера (наприклад, через налаштування безпеки), ви побачите повідомлення “Could not copy — your browser blocked clipboard access.” У цьому випадку можна скопіювати вручну, виділивши текст.
Поширені помилки та обмеження
- Непідтримуваний формат. Якщо ви спробуєте завантажити TIFF, BMP або RAW, з’явиться повідомлення про непідтримуваний тип. Список дозволених MIME-типів чітко обмежений.
- Пошкоджене зображення. Файл може бути некоректно завантажений або пошкоджений. Сторінка виведе відповідне повідомлення.
- Завелике зображення. Якщо найдовша сторона перевищує 4096 пікселів, зображення зменшується. Це може змінити піксельні значення (через інтерполяцію). Для точного відбору краще використовувати зображення меншого розміру або обрізати його заздалегідь.
- Прозорість на JPEG неможлива. Не сподівайтеся побачити альфа-канал на JPG-файлах.
- Артефакти стиснення та згладжування. Особливо в JPEG і скріншотах сусідні пікселі можуть мати неочікувані значення. Наприклад, суцільний червоний фон (#FF0000) після стиснення може на краях дати #FE0000 або #FF0101. Сторінка показує саме те, що записано у файлі.
- Скидання. Кнопка “Start over” повністю очищає зображення, історію кольорів (до 12 записів) і повертає інструмент у початковий стан.
Поширені запитання (FAQ)
Чи можна використовувати цю сторінку для зображень із прозорістю (PNG)?
Так. Прозорі пікселі будуть проаналізовані, і для них покажеться альфа-відсоток. HEX-код при цьому відповідає кольору пікселя (R,G,B) і не містить інформації про прозорість.
Чому HEX-код не показує альфа-канал?
Шестисимвольний HEX за визначенням не містить альфа-каналу. Це стандарт CSS, який використовується для непрозорих кольорів. Якщо вам потрібен колір із прозорістю, дивіться окреме значення Alpha та застосовуйте його у вигляді rgba() або opacity.
Що робити, якщо зображення завелике?
Сторінка автоматично зменшує зображення, якщо найдовша сторона перевищує 4096 пікселів. Якщо точність критична, обріжте вихідний файл до меншого розміру перед завантаженням.
Як скинути всі дані й почати спочатку?
Натисніть кнопку “Start over”. Це видалить зображення, очистить історію кольорів (до 12 збережених пікселів) і поверне інструмент у початковий стан.
Чому кольори зі скріншоту відрізняються від очікуваних?
Скріншоти та JPEG-файли часто піддаються стисненню з втратами та згладжуванню. Навіть однорідна область може містити пікселі з незначними відхиленнями. Сторінка показує точне значення, що зберігається у файлі.
Чи можна скопіювати кілька кольорів одночасно?
Ні, історія зберігає до 12 кольорів, але копіювати можна лише по одному — клацнувши на HEX, RGB або HSL будь-якого зразка. Також можна клацнути на зразок в історії, щоб завантажити його в основну панель, а потім скопіювати його значення.