Палитра цветов из изображения
Извлеките основные цвета фото кластеризацией k-means, узнайте долю каждого и скопируйте коды HEX, переменные CSS или JSON.
Работает полностью в вашем браузере. Ваши данные никуда не загружаются.
Что такое Палитра цветов из изображения?
Инструмент находит основные цвета изображения и показывает их как палитру, отсортированную по доле изображения, которую занимает каждый цвет. Выберите от 2 до 12 цветов и скопируйте их как коды HEX, пользовательские свойства CSS или JSON со значениями RGB и процентами.
Как пользоваться Палитра цветов из изображения
- Перетащите, выберите или вставьте изображение.
- Выберите Количество цветов.
- Прочитайте полосу палитры и список с HEX, RGB и процентом для каждого цвета.
- Скопируйте отдельный код HEX либо используйте Копировать как CSS-переменные, Копировать как JSON или Копировать список HEX.
Пример
40×20 image split into red, green, blue and white quadrants, 4 colors
#FF0000 25%, #00FF00 25%, #0000FF 25%, #FFFFFF 25%
Когда использовать Палитра цветов из изображения
Используйте, чтобы построить цветовую схему по фото или иллюстрации, подобрать тему сайта к главному изображению или проанализировать визуальный стиль бренда. Средние по кластерам могут слегка отличаться от любого отдельного пикселя; чтобы узнать точный цвет одного пикселя, используйте пипетку цвета по изображению.
Как работает Палитра цветов из изображения
Изображение уменьшается до 256 px по длинной стороне, а полностью прозрачные пиксели игнорируются. Остальные пиксели группируются кластеризацией k-means в пространстве RGB: начальные центры выбираются детерминированно (пиксель, ближайший к среднему цвету, затем многократно пиксель, наиболее удалённый от всех выбранных центров), и до 12 итераций переназначают пиксели и сдвигают каждый центр в среднее значение его кластера. Каждый цвет палитры — среднее по кластеру; его процент — доля пикселей в этом кластере.
Распространенные Случаи Использования
- Создать цветовую тему сайта по фото в шапке.
- Выделить фирменные цвета из логотипа или фото товара.
- Сгенерировать переменные CSS для мудборда дизайн-системы.
- Сравнить цветовой баланс разных изображений.
Примечание по Безопасности
Изображения декодируются, обрабатываются и кодируются локально в вашем браузере через Canvas API. На сервер ничего не загружается.
Часто Задаваемые Вопросы
Почему цвета немного отличаются от изображения?
Каждый цвет палитры — среднее по группе похожих пикселей, поэтому он может не совпадать точно ни с одним пикселем, особенно на фото с градиентами.
Будет ли палитра каждый раз одинаковой?
Да. Алгоритм использует детерминированную инициализацию, поэтому одно и то же изображение и число цветов всегда дают ту же палитру.
Учитываются ли прозрачные пиксели?
Нет. Пиксели с непрозрачностью менее 50% игнорируются, поэтому логотип на прозрачном фоне даёт только цвета логотипа.