Получите палитру цветов из любого изображения с проверкой контраста

Как подбираются цвета

Инструмент создаёт небольшую копию вашего изображения размером не более 160 пикселей по длинной стороне и подсчитывает каждый непрозрачный пиксель. Затем он группирует похожие пиксели с помощью кластеризации методом k-средних и выводит средний цвет каждой группы, начиная с самой крупной. Процент на каждом образце показывает, какую долю изображения занимает эта группа.

Начальная точка фиксирована, а не случайна: алгоритм начинает с самого распространённого цвета, затем добавляет цвет, наиболее далёкий от уже выбранных. Поэтому одно и то же изображение всегда даёт одну и ту же палитру, а небольшой яркий акцент, например красный логотип на белой коробке, получает собственный образец, а не растворяется в фоне.

Запрашивайте от 5 до 8 цветов. Для снимка товара на однотонном фоне обычно достаточно 5 или 6. Насыщенное лайфстайл-фото лучше читается при 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 подходит для крупного заголовка, но слишком бледна для подписи. В пояснении W3C к 1.4.3 также сказано, что коэффициент не следует округлять, поэтому 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, начиная с самых заметных, с кнопкой копирования у каждого.

Какое соотношение контраста нужно для текста?

Уровень AA по WCAG 2.2 требует не менее 4.5:1 для обычного текста и 3:1 для крупного. Уровень AAA требует 7:1 и 4.5:1. Крупным считается текст от 18 пунктов или 14 пунктов полужирным.

Достаточно ли 4.49:1, чтобы пройти AA?

Нет. По данным W3C вычисленное соотношение не следует округлять при сравнении с порогом, поэтому 4.499:1 не соответствует 4.5:1. Инструмент оценивает точное число.

Почему я каждый раз получаю одну и ту же палитру?

Кластеризация начинается с фиксированной точки, самого распространённого цвета, а затем добавляет цвет, наиболее удалённый от уже выбранных. Случайного старта нет, поэтому одно изображение всегда даёт один результат.

Загружается ли моё изображение?

Нет. Оно читается собственным файловым ридером вашего браузера и обрабатывается на холсте на вашем устройстве. Ничего никуда не отправляется и не сохраняется.