Потрібен точний колір з логотипа, скріншота, фото чи дизайн-референсу? Завантажте зображення, наведіть курсор, щоб переглянути колір під лупою-збільшувачем, і клацніть, щоб зберегти його. Кожен збережений колір показує свої HEX, RGB і HSL із кнопками копіювання в один клік.
Він зчитує пікселі прямо із зображення у вашому браузері, тож вибір миттєвий, а файл ніколи не завантажується на сервер — зручно для брендових кольорів, які ви б радше не надсилали на випадковий сайт.
Як користуватися
- Додайте зображенняСкиньте картинку чи скріншот, з якого хочете взяти кольори.
- Наведіть і клацнітьЛупа збільшує точний піксель; клацніть, щоб зберегти колір.
- Скопіюйте значенняВізьміть HEX, RGB чи HSL для кожного збереженого кольору.
Іноді вам потрібен один колір із зображення й ніщо інше не підійде — точний синій у логотипі, сірий за кнопкою на скріншоті, відтінок у фото, який ви хочете перевикористати. Ваше око не може прочитати hex-код з екрана, а колір, що виглядає правильно, зазвичай на кілька цифр не той. Цей піпетник дозволяє завантажити зображення, рухатися над ним із лупою, що збільшує пікселі під курсором, і клікнути, щоб зберегти рівно той, який ви хочете, як зразок — HEX, RGB і HSL показані разом, кожен із кнопкою копіювання.
Він читає пікселі локально у вашому браузері з canvas: нічого не завантажується, немає акаунта, а після першого завантаження він працює офлайн. Це важить, коли зображення — це ще не випущений макет, брендовий ресурс клієнта чи внутрішній скріншот. Це точковий семплер — кожен клік читає один піксель, що рівно правильно для чистого логотипа чи плаского UI й потребує трохи більше уваги на шумному фото. Якщо ви радше хочете, щоб домінантні кольори всього зображення витягли за вас автоматично, для цього є окремий інструмент палітри; цей — для наведення на конкретний піксель і взяття його значення.
Для чого його використовують
Відновіть точний колір бренду зі старого логотипа, коли специфікації вже немає
Підберіть кнопку чи заголовок під колір на скріншоті сайту, який вам подобається
Витягніть основний, акцентний і текстовий кольори з логотипа за один прохід
Заберіть відтінок із фото для використання як фон чи акцент
Прочитайте справжній екранний колір напівпрозорого елемента зі скріншота
Скопіюйте колір як HSL, щоб освітлити чи приглушити його для стану наведення чи варіанта
Коли вам потрібен точний колір, а не колір, що близький
Ви перебудовуєте бренд, і єдиний орієнтир — старий логотип. Ви узгоджуєте кнопку зі скріншотом сайту, який вам подобається. Ви помітили відтінок на фото й хочете використати його у власному дизайні. У кожному випадку проблема одна: ваше око не може зчитати hex-код з екрана. «Той бірюзовий» — це насправді дюжина трохи різних бірюзових, а монітори зсувають їх ще далі. Вам потрібне число, яке піксель насправді тримає.
Саме це й робить цей інструмент. Завантажте зображення, рухайтеся по ньому, і лупа-збільшувач слідує за вашим курсором, показуючи пікселі під ним, збільшені, щоб ви могли влучити саме в той, який хочете. Клацніть — і цей колір зберігається як зразок. Кожен зразок перелічує своє значення HEX, RGB і HSL із кнопкою копіювання поруч із кожним, тож ви йдете прямо від пікселя на зображенні до коду у вашому буфері обміну.
Зображення ніколи не залишає вашу машину. Пікселі зчитуються локально у браузері з полотна — нічого не завантажується, немає акаунта, і коли сторінка завантажилася, вона продовжує працювати з вимкненою мережею. У цьому й суть, коли «зображення» — це невипущений макет, бренд-ресурс клієнта чи внутрішній скріншот, який ви не повинні віддавати випадковому вебінструменту.
Як це працює на практиці
- Лупа — для точності. Логотипи й UI мають різкі краї, де колір змінюється на одному пікселі — згладжування означає, що сусідній піксель — це каламутна суміш. Збільшений вигляд дозволяє побачити точно, на якому пікселі ви, перш ніж зафіксувати, тож ви обираєте плаский колір бренду, а не край.
- Кожен клік зберігає зразок. Відбір не «раз і зникло». Клацайте по зображенню, і кожен колір накопичується в списку, тож ви можете витягнути основний колір логотипа, його акцент і колір тексту за один прохід і порівняти їх поруч.
- Три формати, один вибір. Кожен зразок показує HEX, RGB і HSL одразу. Ви не відбираєте заново, щоб змінити формат — той самий колір уже сидить там у всіх трьох, кожен зі своєю кнопкою копіювання.
HEX, RGB, HSL — який копіювати
Це три способи запису того самого кольору, і правильний залежить від того, куди він іде.
- HEX (
#3A7BD5) — замовчування для вебу — CSS, більшість дизайн-інструментів, бренд-документи. Компактний і універсально вставлюваний. Копіюйте цей, якщо не маєте причини не робити цього. - RGB (
rgb(58, 123, 213)) прописує канали червоного, зеленого й синього. Корисний, коли інструмент хоче значення каналів, коли вам потрібна альфа (rgba) чи коли ви розмірковуєте про те, як колір змішано. - HSL (
hsl(215, 65%, 53%)) описує відтінок, насиченість і світлість. Це той, до якого варто тягнутися, коли ви хочете налаштувати колір, а не просто перевикористати його — підсуньте світлість для стану наведення, опустіть насиченість для приглушеного варіанта, збережіть відтінок і побудуйте шкалу.
Одне чесне обмеження й братній інструмент
Це точковий відбирач: кожен клік зчитує один піксель. На чистому логотипі чи пласкому UI це саме те, що вам треба. На шумному фото — зерно, градієнти, JPEG-артефакти — два сусідні пікселі можуть різнитися, тож обирайте з пласкої ділянки й використовуйте лупу, щоб не влучити у викид. Тут немає пензля усереднення ділянки.
А якщо ви взагалі не хочете обирати вручну, img.diy має окремий інструмент палітри, що сканує все зображення й видає вам його домінантні кольори автоматично. Ці два відповідають на різні запитання. Інструмент палітри каже вам, з яких кольорів складається це зображення; піпетка кольору дозволяє вказати на один конкретний піксель — це саме місце на логотипі, ту одну кнопку — і взяти його значення. Тягніться до інструмента палітри, щоб узагальнити зображення, і до цього, коли ви вже знаєте точку, яку хочете.
Завантажте зображення, наведіть, щоб знайти піксель, клацніть, щоб зберегти, скопіюйте формат, який вам потрібен.
Чому IMG.DIY
Лупа-збільшувач
Наближає, щоб ви клацнули точний піксель.
HEX / RGB / HSL
Кожен збережений колір у трьох форматах.
Копіювання в один клік
Копіюйте будь-яке значення прямо в буфер обміну.
Приватно
Пікселі зчитуються локально — без завантаження на сервер.