Utilia
Категорії ▾
Мова: uk ▾

Піпетка кольору із зображення

Завантажте зображення й клацніть піксель, щоб отримати колір у HEX, RGB, HSL, HSV і CMYK. Лупа, усереднення й список кольорів у браузері.

Як вибрати колір із зображення

  1. Перетягніть зображення в зону завантаження або клацніть по ній, щоб вибрати файл (JPG, PNG, WebP, GIF чи будь-який формат, який може показати ваш браузер).
  2. Наведіть вказівник на картинку. Лупа показує збільшені пікселі навколо курсора, а Під курсором одразу дає код HEX.
  3. Клацніть потрібний піксель. Зразок Вибраний колір показує його з позицією пікселя, а поруч з’являються коди HEX, RGB, HSL, HSV і CMYK, кожен із кнопкою Копіювати.
  4. Продовжуйте клацати, щоб зібрати більше кольорів: вони додаються до Вибрані кольори, де кожен можна скопіювати. Кнопка Очистити список спорожнює його.

На телефоні чи планшеті просто торкніться зображення. З клавіатури наведіть фокус на зображення клавішею Tab, рухайтеся стрілками (утримуйте Shift, щоб переміщуватися на 10 пікселів) і натисніть Enter, щоб вибрати.

Зображення не залишає вашого пристрою й не завантажується на сервер: його декодує й читає лише ваш браузер.

Один піксель чи середнє?

Меню Розмір вибірки керує тим, скільки пікселів читається для кожного вибору:

  • 1 піксель повертає точний колір пікселя під курсором. Використовуйте його для плоскої графіки, логотипів, знімків екрана й піктограм.
  • Середнє 3 × 3 і Середнє 5 × 5 повертають середній колір 9 або 25 навколишніх пікселів. Використовуйте їх для фотографій: стиснення JPEG і шум камери роблять сусідні пікселі трохи різними, а середнє дає колір, що краще відображає те, що ви бачите.

Квадрат, обведений у лупі, точно показує, які пікселі враховано. Біля країв зображення рахуються лише ті пікселі, що існують.

Прозорі пікселі у файлах PNG або WebP також враховуються: колір зважується за непрозорістю, тому цілком прозорі ділянки не тягнуть результат до чорного, а частково прозорий результат отримує вісімсимвольний код HEX з альфою, як-от #FF000080.

Точність і обмеження

  • Кольори читаються в просторі sRGB полотна вашого браузера. Зображення, збережені з іншим колірним профілем (Adobe RGB, Display P3), спершу конвертуються браузером, тому коди збігаються з тим, що ви бачите на екрані, але можуть трохи відрізнятися від «сирих» значень файлу в графічному редакторі.
  • Дуже великі зображення зменшуються до 4096 пікселів за довшою стороною, щоб помірно використовувати пам’ять. Інструмент повідомляє про це; на таких зображеннях кожен вибраний піксель уже є невеликим середнім вихідного.
  • Значення CMYK – спрощена конвертація без ICC-профілю, придатна лише як грубий орієнтир.

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

Як дізнатися код HEX кольору на картинці?

Відкрийте картинку в цьому інструменті й клацніть потрібний колір. Код HEX з’явиться в полі Вибраний колір; натисніть Копіювати поруч, щоб вставити його в CSS, Figma, Canva чи будь-який інший застосунок.

Чому сусідні пікселі на моєму фото мають різні коди?

Фотографії містять шум, градієнти й артефакти стиснення, тому два пікселі, що виглядають однаково, рідко мають однакове значення. Виберіть Середнє 3 × 3 або Середнє 5 × 5 у Розмір вибірки, щоб отримати стабільніший колір.

Чи можна вибирати кольори зі знімка екрана сайту?

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

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

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

Чи можна отримати цілу палітру замість окремих кольорів?

Цей інструмент читає окремі пікселі. Щоб автоматично отримати основні кольори зображення, скористайтеся інструментом створення палітри із зображення: він групує схожі пікселі й перелічує домінантні кольори з їхніми частками.

Схожі інструменти