Как пользоваться: Палитра цветов из изображения
- Выберите изображение: перетащите его в область или вставьте из буфера, либо попробуйте пример.
- Укажите количество цветов. Для логотипов и фото товаров на однотонном фоне включите Игнорировать почти белый и почти чёрный.
- Нажмите на любой образец, чтобы скопировать его, или кликните по изображению, чтобы взять цвет конкретного пикселя.
- Экспортируйте палитру в виде CSS-переменных, конфигурации цветов Tailwind, SCSS или JSON.
Как находятся цвета
Изображение уменьшается, а его пиксели группируются по цвету методом k-means кластеризации: алгоритм размещает столько «центров», сколько цветов вы запросили, относит каждый пиксель к ближайшему центру, перемещает центр к среднему значению своих пикселей и повторяет процесс, пока центры не стабилизируются. Каждый центр становится образцом цвета, а его доля показывает, какую часть изображения он занимает. Прозрачные пиксели пропускаются, поэтому логотипы с прозрачным фоном обрабатываются корректно.
Как использовать палитру
- Выберите доминирующий цвет для фонов, а яркий контрастный — для кнопок и ссылок.
- Проверьте пары текста и фона с помощью проверки контраста.
- Создайте полную шкалу 50–950 из одного цвета с помощью генератора цветов Tailwind или узнайте название цвета с помощью поиска названия цвета.
Ваше изображение обрабатывается на вашем устройстве с помощью canvas и никуда не загружается.
Также ищут как: hex цвет из картинки, color picker.
Инструменты, которые хорошо сочетаются с Палитра цветов из изображения
- Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
- Смеситель цветов — Выберите два цвета и количество шагов, чтобы получить равномерно смешанные промежуточные цвета.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Конвертер HEX в OKLCH — Вставьте HEX-цвет и получите его значение OKLCH для CSS.
Часто задаваемые вопросы
Как получить палитру цветов из изображения?
Перетащите сюда изображение: его основные цвета появятся в виде образцов с долей, которую каждый занимает. Измените количество цветов ползунком и экспортируйте палитру в CSS, Tailwind или JSON.
Как найти HEX-код одного цвета на картинке?
Кликните по нужному месту на изображении. Точный цвет пикселя появится ниже в форматах HEX, RGB и HSL, готовый к копированию.
Почему самый частый цвет — белый или чёрный?
Фоны часто занимают большую часть изображения. Включите «Игнорировать почти белый и почти чёрный», чтобы получить цвета основного объекта.
Моё изображение загружается на сервер?
Нет. Файл читается и анализируется в вашем браузере, на сервер ничего не отправляется.
Можно ли установить Палитра цветов из изображения как веб-приложение и пользоваться им офлайн?
Да. Палитра цветов из изображения — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.