CDRN

Захопити колір пікселя зображення

  • Панель керування
  • Документація
  • API
отримує точний колір пікселя вашого зображення (RGB, HSL, шістнадцятковий) клацаючи на обрану точку

Що таке color picker зображення?

Color picker (по-українськи піпетка кольорів або захоплення кольору) - це інструмент, який повертає точне значення вибраного пікселя на зображенні. Завантажте фотографію, клацніть на точку, що вас цікавить, і інструмент повертає точний колір у форматах HEX, RGB і HSL. Це веб-еквівалент піпетки дизайн-програм, таких як Photoshop, GIMP або Figma.

Наш інструмент працює безпосередньо у вашому браузері. Завантажте зображення, воно відображається на сторінці, і вам достатньо клацнути на піксель, щоб отримати його колір. Зчитування пікселя відбувається на стороні клієнта через API canvas, без серверного туру, без повторного стиснення і без надсилання зображення у мережу для вибору.

Відмінність від екстрактора кольорів

Наш екстрактор кольорів та наш color picker відповідають двом різним потребам:

  • Екстрактор аналізує все зображення і повертає домінантну палітру (5, 8 або 10 найбільш представлених відтінків). Це найкращий інструмент для синтезу хроматичної атмосфери фотографії, створення mood board або наповнення фірмового стилю.
  • Color picker повертає точний колір точного пікселя, який ви вказали. Це найкращий інструмент, коли ви знаєте куди дивитися: логотип у захопленні екрана, точний відтінок градієнта, референсний фон екрана.

Екстрактор працює з мільйонами пікселів і застосовує кластеризацію для виявлення груп кольорів; picker лише зчитує RGB-значення, що зберігається у позиції, на яку ви клацаєте. Перший узагальнює, другий хірургічний.

Як це працює технічно

Цифрове зображення - це сітка пікселів, кожен з яких несе три RGB-канали (червоний, зелений, синій), як правило, кодовані на 8 бітів, тобто 256 значень на канал. Коли ви клацаєте на точку, інструмент:

  1. Малює ваше зображення у елементі canvas, зберігаючи його рідні розміри (з максимумом 1500 пікселів шириною для зручного відображення на екрані).
  2. Конвертує позицію кліку у рідні координати зображення, компенсуючи масштабування відображення браузером.
  3. Зчитує RGBA-значення пікселя через API canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Відображає попередній перегляд вибраного кольору. При поданні, сервер зчитує ту саму позицію через PHP GD і обчислює кінцеві коди HEX, RGB і HSL.

Значення HSL обчислюється нашим сервісом конвертації кольорів, ідентичним тому, що використовується нашим конвертером кольорів. Узгодженість від початку до кінця, ви отримуєте ті самі значення, що й якби ввели код HEX у конвертер.

Типові випадки використання

  • Відтворити колір із захоплення екрана: у вас є захоплення сайту, ви хочете точно відтворити відтінок кнопки або фону. Picker дає вам точний код HEX для вставки у ваш CSS.
  • Ідентифікувати колір фірмового стилю на фотографії: PDF-презентація, сторінка журналу, продуктовий візуал. Більше не потрібно просити фірмовий стиль, ви читаєте колір безпосередньо.
  • Зворотна інженерія візуальної ідентичності: захопити точний синій логотипа, рожевий банера, оранжевий заклику до дії.
  • Натхнення і дизайн-моніторинг: ви бачите фотографію, яка вам подобається, і отримуєте точний відтінок квітки, стіни, плаката.
  • Front-end debug: знімок екрана з помилкою показує неправильний колір, ви зчитуєте реальне значення для порівняння з очікуваним у макеті.
  • Створення палітри з референсу: ви вибираєте кілька точок одного зображення для відновлення персоналізованої палітри.

Як користуватися color picker

  1. Завантажте ваше зображення (PNG, JPG, GIF, BMP, WebP, до 20 МБ).
  2. Попередній перегляд відображається на сторінці. Клацніть на піксель для отримання його кольору.
  3. Приціл позначає клацну позицію і поряд з'являється попередній перегляд кольору.
  4. Підтвердіть кнопкою подання для отримання кінцевого результату: кольоровий квадрат, код HEX, RGB і HSL.
  5. Для трансформації значення між форматами, скористайтеся нашим конвертером кольорів.

Часті запитання

В чому різниця між HEX, RGB і HSL?

Це три представлення одного кольору. HEX (#ff0000) є найбільш вживаним форматом у CSS. RGB виражає три канали червоний/зелений/синій у значеннях 0-255. HSL (Hue, Saturation, Lightness) є більш інтуїтивним для регулювання відтінку: це формат, якому варто надавати перевагу, коли ви хочете затемнити, зменшити насиченість або змінити колір, не змінюючи базового відтінку.

Чому мій клік не повертає точно очікуваний колір?

На зоні градієнта два сусідніх пікселі можуть мати дуже різні значення. Крім того, JPG-зображення стискаються з втратами: колір пікселя може злегка відрізнятися від оригіналу. Для надійних кольорових кодів надавайте перевагу PNG або неповторно стисненим зображенням.

Мої координати - це координати екрана чи зображення?

Координати оригінального зображення. Наш JavaScript скрипт автоматично конвертує позицію кліку (у пікселях екрана) у позицію у рідному зображенні. Якщо ваше зображення має розміри 4000x3000 і відображається у 800x600, клік у центрі поверне (2000, 1500), а не (400, 300).

Чи працює picker з прозорими зображеннями?

Так. Якщо ви клацаєте на прозорий піксель, ви отримуєте RGB-колір, що зберігається в цьому місці (часто білий або чорний залежно від оригінального редактора). Прозорість сама по собі (альфа-канал) не відтворюється в результаті; для аналізу альфа-каналу відкрийте зображення у графічному редакторі.

Який розмір зображення прийнятний?

До 20 МБ, формати PNG, JPG, GIF, BMP і WebP. Дуже великі зображення відображаються максимум 1500 пікселів шириною для зручності на екрані, але прочитаний колір залишається кольором оригінального пікселя, без повторного вибірки.

Чи зберігаються мої зображення на сервері?

Ні. Вибір відбувається у вашому браузері. Під час подання файл обробляється на льоту для підтвердження кольору запитаного пікселя, потім тимчасовий файл видаляється. Жодне зображення не зберігається, не індексується або не поширюється.

Що відбувається, якщо JavaScript вимкнений?

Класичне подання форми залишається можливим. Координати x та y керуються прихованими полями, які JavaScript заповнює при кліку. Без JavaScript ці поля залишаються пустими і форма повідомить, що позиція відсутня, але зображення саме по собі добре передається на сервер для обробки.

Приклад запиту

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -F "image=@/path/to/file" \
  -F "x=..." \
  -F "y=..."

Схема вхідних даних

Поле Тип Обов'язкове За замовчуванням
image file ✓ –
x string – –
y string – –

цей інструмент очікує файл - використовуйте Content-Type multipart/form-data замість application/json

Точки доступу

  • GET https://cdrn.fr/api/v1/tools - перелічує всі доступні інструменти
  • GET https://cdrn.fr/api/v1/tools/color-picker - отримує схему цього інструменту
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - виконує цей інструмент з JSON-payload