Палитра цветов из картинки онлайн
Загрузите фото, скриншот или логотип и получите основные цвета с долей каждого. Возьмите точный цвет пипеткой, выгрузите палитру для кода и проверьте, какие пары цветов читаются.
Нужен интерфейс, который хорошо выглядит и легко читается?
Проектируем интерфейсы сайтов и приложений с цельной системой цветов: фирменная палитра, контраст по WCAG, дизайн-токены, которыми пользуются и дизайнеры, и разработчики. Расскажите о проекте, и мы оценим работу.
Спасибо! Специалист свяжется с вами в течение рабочего дня.
Коротко: загрузите любую картинку, и сервис найдёт её основные цвета методом k-средних, покажет, какую часть изображения занимает каждый, и даст взять точный цвет пипеткой. Палитру можно выгрузить в HEX, RGB, HSL, CSS-переменные, конфиг Tailwind или JSON, а контраст любой пары проверить по WCAG 2.2. Всё работает в браузере, картинка никуда не загружается.
Как получить палитру цветов из картинки
- Добавьте картинку. Перетащите на страницу JPG, PNG, WebP, GIF или AVIF, выберите файл на устройстве или вставьте скриншот через Ctrl+V. Нет картинки под рукой? Нажмите «Попробовать на примере».
- Выберите число цветов. Пять или шесть цветов дают компактную фирменную палитру, восемь–десять сохраняют второстепенные оттенки и акценты. Список отсортирован по доле в картинке; порядок «от светлого» покажет его шкалой.
- Возьмите точный цвет. Нажмите на любое место картинки: пипетка покажет цвет пикселя, его можно скопировать или добавить в палитру. С клавиатуры: фокус на картинку, стрелки двигают маркер, Enter берёт цвет.
- Проверьте контраст. Ниже показаны пары из палитры, которые проходят AA для обычного текста. Нажмите на пару или задайте любые цвета текста и фона.
- Выгрузите. Выберите HEX, RGB, HSL, CSS, Tailwind v3, Tailwind v4 или JSON, скопируйте код или скачайте файлом.
Как находятся цвета
Картинка уменьшается до 256 пикселей по длинной стороне, затем цвета группируются в пространстве CIELAB, где расстояние между цветами соответствует тому, насколько разными их видит человек. Работает метод k-средних со стартовыми точками k-means++ и фиксированным seed. Поэтому одна и та же картинка всегда даёт одну и ту же палитру, а большой фон не поглощает маленькие, но яркие акценты. Для каждого цвета показано среднее настоящих пикселей его группы, а не округлённый «ближайший» цвет.
| Настройка | Когда подходит |
|---|---|
| 5–6 цветов | Фирменная палитра по логотипу или ключевому фото, мудборд, тема презентации |
| 7–8 цветов | Тема сайта или приложения: фон, поверхности, текст, основной и дополнительный акцент |
| 9–10 цветов | Иллюстрации и детальные фото, точки градиента, графики и диаграммы |
| Пипетка | Точный цвет кнопки, логотипа или текста на скриншоте |
Форматы экспорта для дизайнеров и разработчиков
HEX, RGB и HSL списком вставляются в Figma, Sketch и любое поле цвета. CSS даёт переменные в :root, готовые для файла дизайн-токенов. Tailwind v3 добавляет группу цветов palette в tailwind.config.js, после чего работают классы вроде bg-palette-1. Tailwind v4 использует новый блок @theme с переменными --color-palette-1. В JSON для скриптов и документации сохраняются HEX, RGB, HSL и доля каждого цвета.
Проверка контраста по WCAG 2.2
Контраст — это отношение относительной яркости двух цветов, от 1:1 до 21:1. Критерий WCAG 2.2 1.4.3 (уровень AA) требует не меньше 4,5:1 для обычного текста и 3:1 для крупного, то есть от 24 px обычным начертанием или примерно от 18,7 px полужирным. Уровень AAA (критерий 1.4.6) поднимает планку до 7:1 и 4,5:1. Критерий 1.4.11 требует 3:1 для иконок, рамок полей и других элементов интерфейса. Проверка использует точную формулу из стандарта и не округляет отношение вверх, поэтому 4,49:1 считается непройденным.
Фирменные палитры редко проходят проверку сразу: обычно мешают светлые акценты на белом и средние синие с белым текстом. Если вы собираете дизайн-систему или обновляете продукт, посмотрите нашу услугу UX/UI-дизайна. Быстро проверить удобство готового сайта поможет проверка юзабилити.
Частые вопросы
Как узнать палитру цветов картинки?
Загрузите или вставьте картинку на этой странице. Сервис найдёт 5–10 основных цветов и покажет их HEX-коды и долю в изображении. Нажмите на цвет, чтобы скопировать код, или выгрузите всю палитру в CSS, Tailwind или JSON.
Как определить цвет на картинке по пикселю?
Нажмите на нужное место картинки, это работает как пипетка. Сервис покажет HEX, RGB и HSL этого пикселя, код можно скопировать или добавить цвет в палитру. На телефоне достаточно коснуться картинки, с клавиатуры маркер двигается стрелками, цвет берётся по Enter.
Картинка загружается на сервер?
Нет. Картинка рисуется на холсте в вашем браузере, а цвета считаются в Web Worker на вашем устройстве. На наш сервер ничего не отправляется и после закрытия страницы нигде не хранится.
Почему палитра каждый раз одинаковая?
Алгоритм использует фиксированный seed, поэтому одна и та же картинка с тем же числом цветов всегда даёт ту же палитру. Её можно спокойно отправить команде или повторить позже.
Какой контраст нужен для текста?
По WCAG 2.2 уровня AA: не меньше 4,5:1 для обычного текста и 3:1 для крупного (24 px или примерно 18,7 px полужирным). Для уровня AAA: 7:1 и 4,5:1. Иконкам, рамкам полей и индикаторам фокуса нужно не меньше 3:1 относительно фона.
Можно ли использовать палитру в Tailwind CSS?
Да. «Tailwind v3» выгрузит группу цветов для tailwind.config.js, «Tailwind v4» выгрузит блок @theme с переменными --color-palette-*. После этого доступны классы вроде bg-palette-1 и text-palette-2.
Какие форматы картинок поддерживаются?
JPG, PNG, WebP, GIF, AVIF и BMP размером до 50 МБ. Прозрачные пиксели не учитываются, поэтому у логотипа на прозрачном фоне будут только цвета самого логотипа. Чтобы взять цвета из SVG, сначала переведите его в PNG.