Як користуватися: Піпетка кольору із зображення
- 1
Відкрийте зображення
Перетягніть, виберіть або вставте скриншот, фото чи логотип розміром до 25 MB — JPG, PNG, WebP, AVIF, HEIC, GIF або SVG.
- 2
Наведіть лупу
Водіть курсором або проведіть пальцем по зображенню: лупа 11 × 11 пікселів показує точний піксель під хрестиком і його код HEX.
- 3
Клацніть, щоб вибрати
Отримайте значення HEX, RGB, HSL і OKLCH, кожне зі своєю кнопкою копіювання. Стрілки зсувають хрестик, а Enter вибирає колір.
- 4
Отримайте палітру
Виберіть від 5 до 12 домінантних кольорів і скопіюйте їх як змінні CSS, JSON або блок теми Tailwind.
Ліміти та Pro
Одне зображення за раз, до 25 MB, з необмеженою кількістю виборів, 5–12 кольорами палітри та історією з 24 кольорів.
У тарифі Pro можна аналізувати зображення розміром до 4 GB. Дивитися Pro
Про інструмент: Піпетка кольору із зображення
Піпетка кольору із зображення зчитує точне значення будь-якого пікселя та перетворює все зображення на палітру. Кожен вибір дає колір у чотирьох записах: HEX для дизайнерських програм, rgb() і hsl() для CSS та oklch() для сучасної роботи з кольором у CSS, де світлота й насиченість поводяться так, як очікує око. Обрані кольори потрапляють в історію з 24 останніх, яка зберігається в цьому браузері, тож вони будуть на місці наступного разу. У Chrome і Edge на комп’ютері кнопка «Вибрати з екрана» також дозволяє взяти будь-який колір поза сторінкою через піпетку браузера.
Палітру обчислює кластеризація k-means у просторі кольорів OKLab на копії зображення, зменшеній до 200 пікселів по довшій стороні. Схожі кластери обʼєднуються, прозорі пікселі ігноруються, а кольори сортуються за часткою площі зображення, яку вони займають; частка показана на кожному зразку. Те саме зображення завжди дає ту саму палітру.
Дизайнери користуються інструментом, щоб підібрати фірмовий колір із логотипа, створити тему за фото, перевірити точний колір кнопки на скриншоті або зібрати мудборд. Значення подано в стандартному sRGB, так як ваш браузер показує зображення, тому артефакт JPG чи джерело з широким охопленням кольорів можуть змістити результат на кілька одиниць порівняно з оригінальним файлом дизайну. Напівпрозорі пікселі повертають колір без прозорості, а назв кольорів інструмент не підбирає і контрастність не перевіряє.
Приватність
Зображення декодується й аналізується в цій вкладці, а кластеризація палітри працює в невеликому Web Worker, який створюється після відкриття зображення; нічого не надсилається на сервер. Історія кольорів зберігається лише в локальному сховищі цього браузера, а «Вибрати з екрана» використовує вбудовану піпетку браузера, яка передає цій сторінці тільки один вибраний колір і більше нічого.
Можливості
Лупа з точністю до пікселя
Лупа 11 × 11 пікселів зі зсувом з клавіатури для точного вибору мишею та дотиком.
Домінантна палітра
5–12 кольорів за k-means в OKLab, відсортованих за часткою зображення.
Експорт для розробників
Значення HEX, RGB, HSL і OKLCH, а також змінні CSS, JSON або блок Tailwind @theme.
Історія кольорів
Ваші 24 останні кольори зберігаються в цьому браузері й готові до копіювання списком.