Как получить палитру цветов из фото за 10 секунд
Пошагово показываем, как извлечь 5–8 доминантных цветов из любого фото и получить HEX, RGB, HSL и CSS-градиент бесплатно и без регистрации.
Инструкции · · 2 мин чтения
Чтобы получить палитру цветов из фото, загрузите снимок в генератор палитры — он найдёт 5–8 доминантных цветов и покажет для каждого HEX, RGB и HSL. Весь анализ идёт прямо в браузере и занимает 1–2 секунды; фото никуда не отправляется.
Ниже — подробная инструкция, советы по выбору снимка и ответы на частые вопросы.
Пошаговая инструкция
- Откройте генератор. Регистрация не нужна, сервис бесплатный.
- Загрузите фото. Перетащите файл в зону загрузки, нажмите «Выбрать файл» или вставьте картинку из буфера сочетанием Ctrl+V. Поддерживаются JPG, PNG, WebP и GIF до 10 МБ.
- Или вставьте ссылку. Если картинка уже есть в интернете, вставьте её адрес в поле «Ссылка на изображение» и нажмите «Загрузить».
- Выберите количество цветов. По умолчанию — 6. Переключатель 5–8 пересчитывает палитру мгновенно, без повторной загрузки.
- Скопируйте коды. Клик по цветной полосе копирует HEX. Кнопка «Копировать все HEX» забирает весь набор одной строкой.
- Заберите градиент. Под палитрой — готовая строка
background: linear-gradient(...)для CSS. - Скачайте карточку. Выберите шаблон — пост 1:1, сторис 9:16, обложка VK или Telegram — и нажмите «Скачать PNG».
Какое фото даст лучшую палитру
Алгоритм ищет цвета, которые занимают на снимке наибольшую площадь. Поэтому результат зависит от кадра:
- Чётко выраженная цветовая тема. Закат, осенний лес, море, натюрморт — такие кадры дают цельную, гармоничную палитру.
- Без пересвета и сильного шума. Почти белые и почти чёрные пиксели алгоритм отбрасывает как шум, если их меньше 30% площади, но пересвеченное фото всё равно теряет оттенки.
- Нужный цвет должен быть заметным. Маленькая красная деталь на огромном сером фоне может не попасть в топ-6. В таком случае увеличьте количество цветов до 8 или обрежьте фото вокруг детали.
Что означает каждый код
| Формат | Пример | Где пригодится |
|---|---|---|
| HEX | #DE7C56 |
CSS, Figma, Canva, любые редакторы |
| RGB | 222, 124, 86 | Photoshop, программирование, видео |
| HSL | 17°, 67%, 60% | CSS-темы, подбор оттенков светлее и темнее |
Подробнее о различиях — в статье RGB, HEX и HSL: в чём разница.
Что делать с палитрой дальше
- Перенести цвета в макет — см. как сохранить палитру в Figma и Canva.
- Оформить сайт по правилу 60-30-10.
- Сделать фирменные цвета бренда на основе фото продукта или интерьера.
- Поделиться палитрой: кнопка «Поделиться» создаёт ссылку с QR-кодом, она живёт 30 дней.
Частые вопросы
Это бесплатно?
Да. Генератор полностью бесплатный, без регистрации и ограничений на количество фото.
Куда загружается моё фото?
Никуда. Цвета считаются в вашем браузере. На сервер попадает только уменьшенная копия — и только если вы сами нажмёте «Поделиться».
Почему в палитре нет цвета, который я вижу на фото?
Скорее всего, он занимает слишком маленькую площадь. Увеличьте количество цветов до 8 или обрежьте снимок так, чтобы нужный цвет занимал больше места.
Можно ли получить палитру с телефона?
Да, сервис работает в мобильном браузере: выберите фото из галереи, и палитра появится так же, как на компьютере.