Палитра из картинки
Цвета для лендинга из фотографии продукта, оттенки для презентации из логотипа, палитра интерьера из снимка комнаты — инструмент находит главные цвета картинки методом медианного сечения: пиксели делятся на группы по самому широкому каналу, пока не получится нужное число оттенков, и каждый показан с долей в кадре, HEX и RGB. Один клик копирует код, экспорт даёт готовые CSS-переменные, а таблица контраста подсказывает, на каком из цветов текст останется читаемым. Всё происходит в браузере. Проверено 04.09.2026.
Контраст с текстом
Как пользоваться
- Фото, логотип, скриншот; перетащите или вставьте из буфера.
- От 3 до 10; для логотипа хватит 3–5, для фото — 6–8.
- Клик по цвету копирует HEX; кнопка экспорта — все цвета как CSS-переменные.
- Для каждого цвета — коэффициент контраста с белым и чёрным текстом и порог 4,5.
Частые вопросы
Как выбираются цвета
Медианным сечением: картинка уменьшается до сотни пикселей по стороне, все пиксели кладутся в один ящик, ящик режется пополам по каналу с самым большим разбросом, и так, пока ящиков не станет столько, сколько цветов нужно; цвет ящика — среднее его пикселей. Метод даёт представительные оттенки; самые яркие мелкие детали могут в них не попасть.
Почему нет цвета, который я вижу
Мелкие яркие детали — надпись, кнопка — занимают мало пикселей и растворяются в соседних ящиках. Увеличьте число цветов или обрежьте картинку до нужного фрагмента.
Что такое контраст и порог 4,5
Отношение яркостей текста и фона по формуле WCAG: 4,5 — минимум для обычного текста, 3 — для крупного, 7 — повышенная читаемость. Таблица показывает, каким текстом — белым или чёрным — писать на каждом цвете.
Как использовать экспорт
Кнопка копирует блок :root с переменными --color-1 … --color-n; вставьте его в CSS и используйте var(--color-1). Порядок — по доле цвета в картинке.
Учитываются ли прозрачные пиксели
Нет, пиксели с прозрачностью ниже половины пропускаются, поэтому логотипы на прозрачном фоне не дают белый или чёрный лишний цвет.
Данные куда-то отправляются
Нет, всё происходит в браузере.
Похожие инструменты
Шкала от 50 до 950 по одному цвету: осветление, затемнение и приглушение. Контраст каждой ступени и выгрузка в CSS, SCSS и Tailwind.
ОткрытьГенератор случайных цветовСлучайный цвет или палитра из пяти с фиксацией удачных. Диапазоны тона, насыщенности и светлоты, пресеты пастели и тёмных.
ОткрытьСочетание цветовГармоничные палитры по цветовому кругу: комплементарные, триада, аналоговые. С симуляцией дальтонизма и контрастом пар.
ОткрытьВеб-безопасные цветаТаблица 216 безопасных цветов с кодами HEX и RGB, поиск и подбор ближайшего безопасного цвета к любому вашему.
ОткрытьПалитра flat-цветовГотовые палитры плоского дизайна: Flat UI и три ступени Material. Названия, коды, контраст текста и выгрузка в CSS.
ОткрытьИзменить размер фотоПиксели вручную или готовый пресет: обложка ВК, превью YouTube, аватар, фото 3×4, печать 10×15. Пакетно, с обрезкой или полями.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.