Палітра із зображення

Як витягти палітру кольорів із зображення

1. Перетягніть зображення в зону завантаження або клацніть по ній, щоб вибрати файл. Підійдуть JPG, PNG, WebP, GIF та будь-який інший формат, який може показати ваш браузер.
2. Інструмент одразу аналізує картинку й показує її Домінантні кольори, упорядковані від найпомітніших до найменш помітних.
3. Налаштуйте Кількість кольорів (від 3 до 12), щоб отримати ширшу або вужчу палітру. Зніміть позначку Ігнорувати білі й майже білі пікселі, якщо білий – важливий колір вашого зображення, наприклад білий виріб чи сніг.
4. Скопіюйте один колір кнопкою Копіювати під його зразком або виберіть формат у Експортувати як (Список HEX, Змінні CSS, Змінні SCSS, Масив JSON чи Кольори Tailwind) і натисніть Копіювати або Завантажити для всієї палітри. Кнопка Витягти кольори запускає аналіз знову.

Ваше зображення читається локально у вашому браузері й ніколи не завантажується на сервер.

Як знаходяться домінантні кольори

Спершу зображення малюється на невидимому полотні й зменшується так, щоб його довша сторона не перевищувала 512 пікселів. Це пришвидшує аналіз і не змінює загальних кольорів. Потім пікселі групуються алгоритмом квантування (модифікований метод медіанного розтину з бібліотеки Color Thief з відкритим кодом) у колірному просторі OKLCH, тож кольори, що виглядають подібними для ока, потрапляють в одну групу.

Кожна група стає одним кольором палітри, а відсоток під кожним зразком – це його частка від вибраних пікселів. Смуга над зразками показує ці пропорції з першого погляду. Прозорі пікселі пропускаються, так само як білі й майже білі, поки параметр позначено, бо інакше звичайні білі тла домінували б у більшості фото виробів і знімків екрана.

Кожен зразок показує свій код HEX чорним або білим – залежно від того, що краще читається, – тож підпис лишається розбірливим і на світлих, і на темних кольорах.

Ідеї використання палітри із зображення

• Брендинг і вебдизайн: побудуйте тему сайту за головним фото чи логотипом, щоб інтерфейс пасував до картинки.
• Презентації та соцмережі: виберіть кольори тексту й тла, що пасують до обкладинки.
• Дизайн інтер’єру, мода й мистецтво: передайте настрій фото, картини чи зразка тканини.
• Візуалізація даних: візьміть кольори діаграм з ілюстрації, використаної в тому самому звіті.

Витягнуті кольори – це середні значення багатьох пікселів, тому вони можуть виглядати трохи менш яскравими, ніж найнасиченіше місце на фото. Якщо вам потрібен точний колір конкретного пікселя, скористайтеся піпеткою кольору із зображення.

Інструмент працює у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.