Ви бачите колір, який хочете повторно використати — на фото, скріншоті сайту, що вам подобається, старому логотипі, чиї вихідні файли давно зникли — і вам потрібен справжній hex-код, а не здогад. Оцінити на око ніколи не виходить до кінця; монітори брешуть, а «той синій» — це насправді шість трохи різних синіх. Витягнути палітру прямо з пікселів дає вам коди, які можна вставити в CSS, дизайнерський інструмент чи брендовий документ.
Ось як це зробити і як отримати палітру, що справді придатна до вжитку, а не випадковий набір пікселів.
Що насправді робить «витягання палітри»
Інструмент сканує зображення й знаходить кольори, що найкраще його представляють — домінантні тони плюс помітні акценти — потім дає вам кожен як hex-код, який можна скопіювати. Замість мільйона окремих піксельних кольорів ви отримуєте охайний набір (скажімо, 5 чи 8), що підсумовує зображення.
Це справді корисно для кількох поширених задач:
- Відновлення кольорів бренду з логотипа чи старого матеріалу, коли у вас немає оригінальної специфікації.
- Побудова дизайнерської палітри з фото, чий настрій хочете відтворити — пейзаж, знімок товару, витвір мистецтва.
- Підбір під наявний сайт чи графіку, від яких у вас лише скріншот.
- Вибір фону чи акценту, що гармонує зі зображенням, яке ви вже використовуєте.
Киньте зображення й зчитуйте коди:
Використовуйте регулятор кількості, щоб отримати корисну палітру
Єдине найважливіше налаштування — скільки кольорів ви витягуєте. Воно повністю змінює відповідь.
- Менше кольорів (3–5) дають вам основну палітру — жменьку тонів, що визначають зображення. Це те, що ви зазвичай хочете для брендингу чи дизайн-системи, де щільний набір — це перевага, а не обмеження.
- Більше кольорів (8–12) захоплюють тонкі акценти й градієнти. Корисно, коли зображення насичене й різноманітне і ви хочете й вторинні тони, або коли ви вивчаєте, як саме скомпоноване фото.
Якщо перший результат відчувається не так — один відтінок домінує чи акцент, який ви хотіли, злився геть — підлаштуйте кількість і зчитайте знову. Фото, що на 80% небо, дасть вам багато синього при низькій кількості; підніміть кількість, щоб винести на поверхню менші сплески кольору.
Клік для копіювання — процес, що має значення
Зчитати hex-код і надрукувати його — це де закрадаються помилки (#3A7BD5 проти #3A7BD6, і ви провели десять хвилин, дивуючись, чому воно виглядає не так). В інструменті колірної палітри кожен зразок копіює свій hex-код по кліку, тож ви йдете прямо від зображення до буфера обміну до вашої таблиці стилів, не торкаючись клавіатури.
Практичний потік:
- Завантажте зображення.
- Задайте кількість під задачу — низьку для брендової палітри, вищу, щоб спіймати акценти.
- Клікніть кожен зразок, який хочете; вставте його, куди йде.
- Замало діапазону? Підштовхніть кількість і заберіть додаткові.
Читання результатів оком дизайнера
Кілька речей, які варто знати, щоб палітра лягла добре:
- Домінантний колір не завжди корисний. Фото товару на білому фоні повідомить багато білого чи майже-білого. Це точно, але колір, який вас справді хвилює, — це товар — підніміть кількість, щоб витягти його, або спершу обріжте до об'єкта.
- У фото більше кольорів, ніж здається. Шкіра, тіні й відображення додають тони, яких ви свідомо не помітили. Вища кількість їх відкриває; нижча ховає їх за усередненнями.
- Hex портативний. Кожен код, який ви копіюєте, працює прямо в CSS, Figma, Photoshop, Canva чи брендовому документі. Конвертація не потрібна.
Чому воно лишається у вашому браузері
Уся екстракція працює локально — зображення зчитується й аналізується у вашому браузері з Canvas, і ніколи не завантажується на сервер. Це важливо, коли «зображення» — це невипущений макет, приватний брендовий матеріал клієнта чи внутрішній скріншот, який не варто викладати у випадковий вебінструмент. Це безкоштовно, не потребує реєстрації, а після першого відвідування працює офлайн.
Заберіть кольори, клікніть, щоб скопіювати, вставте їх, куди належить.