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