Локальний аналіз зображень та точне визначення кольору
Інструмент «Піпетка кольорів із зображення» призначений для детального аналізу графічних файлів безпосередньо у вашому веб-браузері. Він дозволяє завантажити файл із пристрою, дослідити його попіксельно за допомогою вбудованої лупи та отримати точні колірні коди. Інструмент орієнтований на дизайнерів, яким потрібно витягувати кольори для інтерфейсів, розробників, що копіюють коди для CSS, а також творців контенту, які працюють над фірмовим стилем чи редагуванням графіки.
Зображення зчитується безпосередньо з вашого пристрою та ніколи не залишає браузер [privacy]. Нічого не завантажується на BroBroGo [privacy]. Це забезпечує локальну обробку даних під час роботи з графічними матеріалами.
Підтримувані формати та обмеження файлів
Для аналізу можна використовувати один файл зображення. Інструмент підтримує такі формати та MIME-типи:
- PNG (
image/png) - JPG (
image/jpeg) - WebP (
image/webp) - GIF (
image/gif) - AVIF (
image/avif) - HEIC (
image/heic,image/heif).
Якщо ви спробуєте перетягнути файл іншого типу, з'явиться повідомлення: «Цей тип файлу не підтримується. Спробуйте зображення PNG, JPG, WebP, GIF, AVIF або HEIC.» Якщо файл пошкоджений або виникли помилки під час його читання, інструмент покаже попередження: «Не вдалося відкрити це зображення. Воно може бути пошкодженим або мати непідтримуваний формат.».
Для оптимізації продуктивності діє правило масштабування: якщо довжина більшої сторони завантаженого зображення перевищує 4096 пікселів, воно автоматично зменшується.
Робота з інтерфейсом та керування
Після вибору файлу на екрані з'являється напис: «Зображення готове — наведіть на нього для вибору кольору, клікніть для збереження.». Інструмент автоматично визначає параметри зображення та виводить їх у відповідних полях:
- Розмір: геометричні розміри завантаженого файлу в пікселях.
- Піксель: координати точки, на яку вказує маркер.
Одразу після завантаження файлу інструмент автоматично визначає та відображає координати та колірні параметри центрального пікселя зображення. Надалі ви можете переміщувати вказівник миші по зображенню, щоб аналізувати колір кожного пікселя.
Для точного позиціонування реалізовано керування з клавіатури:
- Переміщення перехрестя по зображенню здійснюється за допомогою клавіш зі стрілками.
- Утримування клавіші Shift під час натискання стрілок переміщує перехрестя кроком у 10 пікселів.
- Натискання клавіш Enter або Space (Пробіл) зберігає поточний вибраний колір.
Клік лівою кнопкою миші на зображенні також зберігає поточний колір. Після збереження з'являється повідомлення: «Збережено {hex} до вашої колекції.». Історія збережених кольорів вміщує до 12 записів. Якщо ви захочете повернутися до раніше збереженого кольору, достатньо клікнути на його зразок у списку історії, щоб завантажити його параметри назад. Якщо історія порожня, відображається текст: «Збережені кольори з'являться тут — клікніть на зразок, щоб завантажити його знову.».
Кнопка «Почати спочатку» повністю очищує завантажене зображення, видаляє історію збережених кольорів та повертає інструмент до початкового стану вибору файлу.
Колірні моделі та копіювання значень
Для кожного вибраного пікселя інструмент розраховує та виводить значення у трьох колірних моделях:
- HEX: шістнадцятковий код (наприклад, #ffffff).
- RGB: значення каналів Red (червоний), Green (зелений) та Blue (синій).
- HSL: параметри Hue (відтінок), Saturation (насиченість) та Lightness (світлота).
Будь-яке з цих значень можна скопіювати в буфер обміну, просто клікнувши на рядок із потрібним кодом. Якщо операційна система або браузер обмежують доступ до буфера, буде виведено повідомлення: «Не вдалося скопіювати — ваш браузер заблокував доступ до буфера обміну.».
Особливості зчитування кольору та прозорості
При аналізі зображень слід враховувати технічні особливості форматів та графічного стиснення:
- Точність даних: інструмент зчитує та показує точне значення пікселя, яке збережене у файлі.
- Вплив стиснення та згладжування: якщо ви аналізуєте файл у форматі JPEG або знімок екрана (скріншот), реальні колірні коди можуть відрізнятися від очікуваних. Алгоритми стиснення з втратами та згладжування контурів (anti-aliasing) змінюють колір сусідніх пікселів, створюючи брудні або змішані відтінки на межах об'єктів.
- Обробка прозорості: якщо піксель є напівпрозорим, інструмент зчитує його власні параметри без урахування фону, що знаходиться під ним. При виявленні прозорості з'являється повідомлення: «Альфа
{n}% — цей піксель частково прозорий.», де замість{n}вказується відсоток непрозорості альфа-каналу. Кольори, які мають однакові параметри RGB, але різні рівні прозорості (alpha), зберігаються в історії як окремі незалежні записи.
FAQ
Як вибрати колір із зображення? Наведіть вказівник на зображення, і на панелі відобразиться колір під ним, а лупа збільшить масштаб, щоб ви могли поцілити в потрібний піксель. Клікніть, щоб зберегти цей колір. Ви також можете активувати зображення клавішею Tab і переміщувати перехрестя стрілками, а потім натиснути Enter.
Які формати кольорів я отримую? Кожен вибраний піксель відображається одночасно у форматах HEX, RGB та HSL. Клікніть на будь-яке значення, щоб скопіювати його для вставки в CSS або дизайнерський інструмент.
Чому вибраний колір не завжди відповідає очікуванням? Ви отримуєте точне значення пікселя, збережене в зображенні. Якщо це JPEG або знімок екрана, стиснення та згладжування вже могли трохи змінити сусідні пікселі, а напівпрозорий піксель зчитується сам по собі, без урахування того, що міститься під ним.