Отримайте палітру кольорів із будь-якого зображення з перевіркою контрасту

Як підбираються кольори

Інструмент створює невелику копію вашого зображення, не більше 160 пікселів по довшій стороні, і підраховує кожен непрозорий піксель. Потім він групує схожі пікселі за допомогою кластеризації k-means і показує середній колір кожної групи, починаючи з найбільшої. Відсоток на кожному зразку показує, яку частину зображення охоплює ця група.

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

Запитуйте від 5 до 8 кольорів. Для фото продукту на однотонному тлі зазвичай достатньо 5 або 6. Насичене lifestyle-фото краще читається у 8 кольорах. Якщо в зображенні менше окремих кольорів, ніж ви запросили, інструмент повідомить про це й покаже ті, що знайшов.

Як читати матрицю контрасту

Кожен колір порівнюється з усіма іншими, а також із чистим білим і чорним, і кожна комірка показує коефіцієнт контрасту для тексту кольору рядка на тлі кольору стовпця. Коефіцієнт відповідає визначенню WCAG: (L1 + 0.05) / (L2 + 0.05), де L1 і L2 це відносна яскравість світлішого й темнішого кольору. Він коливається від 1:1 (той самий колір двічі) до 21:1 (чорний на білому).

Позначки це порогові значення, які встановлює WCAG:

• AA: щонайменше 4.5:1 для звичайного тексту і 3:1 для великого тексту (Критерій успіху 1.4.3).
• AAA: щонайменше 7:1 для звичайного тексту і 4.5:1 для великого тексту (Критерій успіху 1.4.6).
• Великий текст означає щонайменше 18 пунктів або 14 пунктів напівжирним (визначення великого масштабу за WCAG).

Комірка з позначкою AA large підходить для великого заголовка, але надто бліда для підпису. Пояснення 1.4.3 від W3C також зазначає, що коефіцієнт не слід округлювати, тож 4.499:1 не відповідає 4.5:1. Інструмент оцінює точне число й показує його, обрізане до двох знаків після коми, ніколи не округлюючи вгору.

Розібраний приклад

Припустімо, фото дає вам темно-синій #1a3c6e і кремовий #fdf6e3. Відносна яскравість темно-синього становить приблизно 0.046, а кремового приблизно 0.923. Коефіцієнт дорівнює (0.923 + 0.05) / (0.046 + 0.05), тобто близько 10.1:1 з округленими числами й 10.16:1 з точними. Це проходить AAA для будь-якого тексту, тож темно-синій текст на кремовій фінальній картці безпечний за будь-якого розміру. Поставте середній помаранчевий, наприклад #e07a2e, на той самий кремовий, і коефіцієнт впаде до 2.78:1, що не проходить навіть для великого тексту. Залиште помаранчевий для кнопки з чорним текстом (6.99:1, це AA, але трохи не дотягує до AAA) або для фігури без слів.

Використання експорту

Експорт CSS це блок :root з користувацькими властивостями: --color-1 для кольору, що охоплює найбільшу частину зображення, і так далі. У JSON для кожного кольору є hex, RGB, HSL та його частка в зображенні, що легко вставити у файл дизайн-токенів або передати скрипту. Перейменуйте змінні, коли визначите, який колір є тлом, який текстом, а який акцентом.

Чого цей інструмент не робить

Інструмент не знає, які кольори належать вашому бренду. Фото вашого продукту на дерев'яному столі включатиме й стіл. Спершу обріжте до продукту чи упаковки, якщо хочете лише їхні кольори. Він також не може назвати точні кольори друку: числа це пікселі у файлі, після вашої камери й будь-якого редагування, тож звіряйте їх із гайдбуком бренду перед публікацією. І він оцінює лише контраст тексту. WCAG має окремі правила для піктограм та елементів інтерфейсу, які ця матриця не оцінює.

Якщо ви не хочете робити це вручну

Hermoso це маркетинг на автопілоті: він досліджує рекламу, що вже працює на вашому ринку, створює брендові рекламні зображення й відео, планує публікації та запускає платні кампанії на ваших власних рекламних акаунтах. Коли ви додаєте свій бренд із сайту, він вивчає ваші продукти, логотип і палітру, а ви можете задати кольори підписів та фінальних карток за hex-кодами. Він працює у вебдодатку або всередині Claude, ChatGPT і Cursor через свій MCP-сервер.

Безкоштовні інструменти: Довідник розмірів для соцмереж · Конструктор сітки Instagram · Генератор Open Graph

Поширені запитання

Як отримати колірну палітру з фото?

Завантажте фото в інструмент і виберіть, скільки кольорів вам потрібно, від 5 до 8. Він групує схожі пікселі й показує середній колір кожної групи у форматах HEX, RGB та HSL, починаючи з найбільшої, із кнопкою копіювання для кожного.

Яке співвідношення контрасту потрібне для тексту?

WCAG 2.2 рівня AA вимагає щонайменше 4.5:1 для звичайного тексту та 3:1 для великого тексту. Рівень AAA вимагає 7:1 і 4.5:1. Великий текст: це щонайменше 18 пунктів або 14 пунктів напівжирним.

Чи достатньо 4.49:1 близько, щоб пройти AA?

Ні. W3C каже, що обчислене співвідношення не слід округляти під час порівняння з порогом, тож 4.499:1 не відповідає 4.5:1. Інструмент оцінює точне число.

Чому я щоразу отримую ту саму палітру?

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

Чи завантажується моє зображення?

Ні. Воно зчитується власним файловим рідером вашого браузера й підраховується на canvas на вашому пристрої. Нічого нікуди не надсилається й не зберігається.