Извлечение цветов
Берите цвета из изображений и создавайте дизайн-палитры.
Извлечение цветовой палитры из любого изображения
Обзор
Извлекатель цветов анализирует изображение и возвращает его доминирующие цвета как готовую палитру — hex-коды, которые можно сразу вставить в дизайн. Подбираете ли вы бренд под фотографию, строите мудборд или оформляете сайт вокруг hero-изображения — брать цвета пипеткой вручную медленно и неточно. Этот инструмент сэмплирует всё изображение и кластеризует пиксели в несколько цветов, которые определяют его вид, прямо в браузере.
Как пользоваться (по шагам)
- 1
Перетащите изображение
Подойдут фото, логотипы, скриншоты или иллюстрации. Изображения большего разрешения дают более репрезентативную палитру.
- 2
Просмотрите извлечённую палитру
Доминирующие и акцентные цвета показаны со значениями hex и RGB.
- 3
Скопируйте нужные коды
Нажмите на образец, чтобы скопировать его hex. Вставьте значения в CSS, дизайн-инструмент или брендбук.
Как это работает
Изображение отрисовывается на canvas, а его пиксели читаются как значения RGB. Алгоритм кластеризации (в стиле median-cut или k-means) группирует миллионы пикселей в небольшой набор репрезентативных цветов с учётом частоты появления. Результат — доминирующая палитра и акцентные цвета с готовыми hex и RGB кодами. Поскольку всё идёт локально на сырых пикселях, исходник не загружается.
Когда пригодится
Создание сайта или темы презентации в гармонии с выбранным фото. Извлечение цветов бренда из логотипа. Создание согласованной палитры для иллюстрации или макета. Сборка мудбордов из вдохновляющих фото. Подбор доступных сочетаний текста и фона из товарного снимка. Подгонка CSS-градиента под тона hero-изображения.
Частые вопросы
Обычно несколько доминирующих плюс пара акцентов — достаточно для готовой палитры без перегруза. Фото с плавными градиентами кластеризуется в меньшее число тонов, чем графика с плоскими блоками цвета.