tigtools

Вибір кольору із зображення

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

Працює у вашому браузері Без реєстрації

JPEG, PNG, WebP, GIF, AVIF або BMP, до 25 МБ. Зображення залишається на вашому пристрої.

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

  1. Виберіть зображення або перетягніть його у поле.
  2. Наведіть вказівник на зображення: лупа покаже пікселі навколо.
  3. Клацніть або торкніться, щоб вибрати колір і скопіювати його як HEX, RGB або HSL.
  4. Прокрутіть униз, щоб переглянути домінантні кольори, виберіть потрібну кількість і скопіюйте їх або завантажте як змінні CSS.

Як це працює

Зображення малюється на canvas у вашому браузері, і з нього зчитується колір точного пікселя під вказівником. Лупа показує збільшену область 11 × 11 пікселів, а вибраний піксель обведено. Зображення зі стороною понад 4096 пікселів спершу зменшуються, тому на дуже великих фото один вибраний піксель є усередненням кількох вихідних пікселів.

Домінантні кольори визначаються кластеризацією k-means: пікселі спочатку групуються в 32 768 малих колірних кошиків, потім ці кошики об’єднуються у вибрану вами кількість кольорів з урахуванням кількості пікселів у кожному. Початкові точки вибираються детерміновано, тому те саме зображення завжди дає ту саму палітру.

Кольори зчитуються в просторі sRGB, який браузер використовує для відображення. Якщо зображення має вбудований широкий колірний профіль, значення можуть дещо відрізнятися від тих, що показує фоторедактор. У браузерах, які це підтримують (Chrome і Edge на комп’ютері), кнопка «Вибрати з екрана» використовує вбудований EyeDropper, щоб узяти колір будь-де на екрані.

Приклади

Підбір фірмового кольору

Завантажте знімок екрана з логотипом, клацніть його основний колір і скопіюйте #1a73e8 або rgb(26, 115, 232) у свій CSS.

Палітра з фотографії

Фотографія пляжу, розкладена на 6 кольорів, дає тони піску, моря й неба; для кожного вказано частку зображення, яку він займає, відсортовану від найбільшої до найменшої.

Перевірка відтінку

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

Поширені запитання

Чому колір трохи відрізняється від мого фоторедактора?

Браузери перетворюють зображення в sRGB для відображення. Фотографії з широким колірним профілем (Display P3, Adobe RGB) можуть показувати дещо інші значення в редакторі, який зберігає оригінальний профіль.

Чому відсутня кнопка «Вибрати з екрана»?

Для цього потрібен EyeDropper API, який підтримують лише деякі браузери, наразі Chrome і Edge на комп’ютері. Вибір кольору з завантаженого зображення працює всюди.

Як визначаються домінантні кольори?

За допомогою кластеризації k-means усіх пікселів, з вагою за частотою появи кожного кольору. Дрібні, але яскраві деталі можуть об’єднуватися з більшим сусіднім кольором; збільште кількість кольорів, щоб відокремити їх.

Чи завантажується зображення?

Ні. Воно декодується й аналізується цією сторінкою у вашому браузері та ніколи не покидає ваш пристрій.

Конфіденційність

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