Побудова дизайну навколо фото товару, брендового кадру чи атмосферного зображення починається з його кольорів. Перетягніть зображення й отримайте його домінантну палітру, відсортовану від світлого до темного, де кожен зразок за один клік від скопійованого HEX-коду.
Витяг використовує квантизацію методом медіанного розрізу на реальних пікселях — той самий сімейний алгоритм, який застосовують графічні редактори — тож палітра відображає справжній розподіл кольорів, а не просто розмите усереднення.
Як користуватися
- Додайте зображенняБудь-яке фото, логотип чи ілюстрація.
- Налаштуйте розмір палітриВід 3 до 12 кольорів — дивіться, як зразки оновлюються наживо.
- Скопіюйте кодиНатисніть будь-який зразок для його HEX або скопіюйте всю палітру одразу.
Витягніть справжню палітру з будь-якого зображення
Цей екстрактор читає справжні пікселі вашого зображення й знаходить його домінантні кольори за допомогою квантування методом медіанного зрізу — того самого підходу, що стоїть за хорошою редукцією кольору. Це означає, що палітра відображає те, що дійсно є у фото, а не здогад чи усереднення з фільтром. Завантажте картинку — і ви отримаєте набір hex-зразків, узятих просто з джерела.
Ви обираєте, скільки кольорів витягти, будь-де від 3 до 12. Менше зразків дає тісну палітру в стилі бренду; більше — повнішу колірну схему для дизайну. Ідентичні зразки дедуплікуються, тож ви ніколи не отримаєте той самий hex двічі.
Копіюйте hex-коди одним кліком
Кожен зразок показує своє значення hex, а клік по зразку копіює цей код у ваш буфер обміну. Коли вам потрібен весь набір, одна кнопка копіює всю палітру одразу, готову до вставлення в CSS, графічний інструмент чи гайд стилю. Палітра відсортована від світлого до темного, тож вона читається як упорядкована шкала, а не мішанина.
Оскільки все працює в браузері на вашому власному зображенні, ви можете витягнути колірну палітру з фото, скріншота чи логотипа, нічого не завантажуючи.
Для чого його використовують
Побудова палітри бренду — Витягніть домінантні кольори з логотипа чи головного зображення, щоб закріпити узгоджену колірну систему.
Підбір дизайну під фото — Витягніть колірну схему зі знімка товару, щоб ваша розкладка відчувалася частиною того самого зображення.
Тематизація вебу й UI — Заберіть hex-коди з мудборд-зображення, щоб засіяти змінні CSS для акцентних і фонових кольорів сайту.
Вибір кольорів із роботи — Візьміть справжні кольори з ілюстрації чи картини для повторного використання у власній роботі.
Теми презентацій і слайдів — Витягніть кілька домінантних кольорів з обкладинкового зображення, щоб тематизувати всю презентацію.
Мудборди моди й інтер'єру — Отримайте палітру з надихаючого фото, щоб підібрати тканини, фарбу чи аксесуари.
Колірні набори для візуалізації даних — Витягніть чіткий набір кольорів із референсного зображення, щоб побудувати палітру для графіків.
Швидкий пошук hex — Закиньте скріншот і клікніть потрібний зразок, щоб скопіювати його точний hex-код.
Витягніть кольори прямо із зображення
Ви маєте фото, скріншот, шматок упаковки, кадр із фільму — і хочете кольори з нього як hex-коди. Можливо, щоб узгодити сайт із бренд-фотографією, побудувати тему слайдів навколо продуктового кадру чи з'ясувати, чим насправді є той градієнт на плакаті. Читати кольори на око ненадійно; колір, який виглядає темно-синім на вашому моніторі, може бути #1B2A4A чи #14233F, і вгадування коштує вам часу й трохи неточного результату.
Інстинкт — відкрити сайт палітр і відбудувати кольори з нуля, але це перевертає завдання. Інструменти на кшталт Coolors і Adobe Color чудові у генерації палітр — ви фіксуєте зразок, тиснете пробіл і досліджуєте гармонії — але коли колір, який ви хочете, уже існує всередині зображення, генерувати з нічого — це довгий шлях в обхід. Ви зрештою піпеткою тягнете із зображення в одному застосунку й вставляєте hex-коди в інший.
Palette робить прямо. Перетягніть зображення, і воно витягне набір домінантних кольорів за допомогою квантизації методом медіанного розсічення — того самого класу алгоритму, яким зводять зображення до найбільш репрезентативних кольорів — а потім покаже їх як зразки, відсортовані від світлого до темного. Клацніть будь-який зразок, щоб скопіювати його hex-код, або скопіюйте весь набір одразу. Повзунок веде вас від трьох кольорів аж до дванадцяти, тож ви можете витягнути щільну акцентну пару чи повну тему. Він працює повністю у вашому браузері: зображення зчитується локально й ніколи не завантажується, що важить, коли джерело — це невипущений дизайн, фото клієнта чи будь-що, що ви радше не надсилали б на сервер лише заради відбору кольору.
Чим це відрізняється
- Витягує, а не генерує. Він читає кольори, уже наявні у вашому зображенні, замість того щоб просити вас побудувати палітру з нуля.
- Квантизація методом медіанного розсічення. Справжній алгоритм обирає репрезентативні домінантні кольори, а не відбирає кілька випадкових пікселів.
- Регульована кількість. Пересуньте від 3 до 12 кольорів — акцентна пара чи повна тема — і воно перевитягує наживо.
- Клацніть, щоб скопіювати. Торкніться будь-якого зразка для його hex або скопіюйте всі коди одним кліком, готові до вставлення в CSS, дизайн-інструмент чи тему слайдів.
- Відсортовано для використання. Зразки впорядковані за яскравістю, тож палітра читається природно.
- Приватно й офлайн. Зображення ніколи не залишає ваш пристрій і продовжує працювати після першого візиту без з'єднання.
- Безкоштовно, без акаунта, без водяного знака.
IMG.DIY проти інших інструментів кольору
Coolors і Adobe Color — сильні інструменти з іншим центром тяжіння. Чесний поділ — це згенерувати палітру проти витягнути кольори із зображення.
| Аспект | Coolors | Adobe Color | IMG.DIY |
|---|---|---|---|
| Основна сила | Генерація й дослідження палітр | Гармонії кольорів, інтеграція з Adobe | Витягання кольорів із зображення |
| Витягання із зображення | Так (завантаження / обмежене на безкоштовному) | Так | Так, основна функція |
| Завантажує зображення на сервер | Зазвичай так | Так | Ні, лишається у браузері |
| Потрібен акаунт | Для збереження / деяких функцій | Акаунт Adobe для повного використання | Ні |
| Регульована кількість кольорів | Так | Фіксовані набори | 3–12, наживо |
| Копіювання hex | Так | Так | Клацніть зразок або скопіюйте всі |
| Офлайн | Ні | Ні | Так, після першого візиту |
| Вартість | Безкоштовний рівень + платно | Безкоштовно з акаунтом Adobe | Безкоштовно, без лімітів |
Якщо ваше завдання — спроєктувати палітру з нічого — дослідити гармонії, фіксувати й перемішувати, зберігати колекції — Coolors і Adobe Color є кращим домом, а Adobe Color важко перевершити, якщо ви живете всередині Creative Cloud. Де вони стають важчими — це саме той випадок, для якого побудований цей інструмент: у вас уже є зображення, і ви просто хочете його кольори, приватно, без завантаження чи входу. Palette витягує hex-коди за одне перетягування, дозволяє налаштувати кількість і копіює їх за вас — а потім забирається з дороги.
Чому IMG.DIY
Справжні домінанти
Медіанний розріз по реальних пікселях, а не розмите усереднення.
Копіювання в один клік
Кожен зразок миттєво копіює свій HEX.
3–12 кольорів
Задайте точно, наскільки детальна палітра.
Приватно
Зображення ніколи не залишає ваш пристрій.