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