Вы видите цвет, который хотите переиспользовать — в фото, скриншоте понравившегося сайта, старом логотипе, чьи исходники давно пропали — и вам нужен настоящий hex-код, а не догадка. На глаз это никогда толком не работает; мониторы лгут, а «тот синий» — на деле шесть чуть разных синих. Вытягивание палитры прямо из пикселей даёт вам коды, которые можно вставить в CSS, дизайн-инструмент или брендбук.
Вот как это сделать и как получить палитру, которая реально пригодна, а не случайную горсть пикселей.
Что на самом деле делает «извлечение палитры»
Инструмент сканирует изображение и находит цвета, которые лучше всего его представляют — доминирующие тона плюс заметные акценты — затем даёт вам каждый как hex-код для копирования. Вместо миллиона отдельных цветов пикселей вы получаете аккуратный набор (скажем, 5 или 8), который резюмирует изображение.
Это по-настоящему полезно для нескольких частых задач:
- Восстановление фирменных цветов из логотипа или старого ассета, когда нет оригинальной спецификации.
- Построение дизайн-палитры из фото, чьё настроение вы хотите повторить — пейзаж, съёмка товара, произведение искусства.
- Подбор под существующий сайт или графику, от которых у вас только скриншот.
- Выбор фона или акцента, который гармонирует с изображением, которое вы уже используете.
Перетащите изображение и считайте коды:
Используйте регулятор количества, чтобы получить полезную палитру
Единственная самая важная настройка — сколько цветов вы вытягиваете. Это полностью меняет ответ.
- Меньше цветов (3–5) дают вам сущностную палитру — горстку тонов, определяющих изображение. Это то, что обычно нужно для брендинга или дизайн-системы, где плотный набор — достоинство, а не ограничение.
- Больше цветов (8–12) захватывают тонкие акценты и градиенты. Полезно, когда изображение богато и разнообразно и вы хотите и вторичные тона, или когда изучаете, как именно составлено фото.
Если первый результат ощущается не так — один оттенок доминирует или желанный акцент слился — подстройте количество и перечитайте. Фото, которое на 80% небо, выдаст вам много синего при низком количестве; поднимите количество, чтобы вывести меньшие всплески цвета.
Клик для копирования — рабочий процесс, который важен
Прочитать hex-код и напечатать его — вот где закрадываются ошибки (#3A7BD5 против #3A7BD6, и вы потратили десять минут, гадая, почему выглядит не так). В инструменте цветовой палитры каждый образец копирует свой hex-код по клику, так что вы идёте прямо от изображения к буферу обмена к вашей таблице стилей, не касаясь клавиатуры.
Практический поток:
- Загрузите изображение.
- Задайте количество под задачу — мало для бренд-палитры, больше, чтобы поймать акценты.
- Кликните каждый нужный образец; вставьте туда, куда идёт.
- Не хватает диапазона? Подвиньте количество и заберите дополнительные.
Как читать результаты глазом дизайнера
Несколько вещей, которые стоит знать, чтобы палитра легла хорошо:
- Доминирующий цвет не всегда полезный. Фото товара на белом фоне сообщит много белого или почти-белого. Это точно, но цвет, который вас на деле волнует, — товар: поднимите количество, чтобы вытащить его, или сначала обрежьте до объекта.
- У фото больше цветов, чем кажется. Кожа, тени и отражения добавляют тона, которых вы сознательно не замечали. Более высокое количество их раскрывает; более низкое прячет за усреднениями.
- Hex переносим. Каждый скопированный код работает напрямую в CSS, Figma, Photoshop, Canva или брендбуке. Конвертация не нужна.
Почему оно остаётся в вашем браузере
Всё извлечение работает локально — изображение читается и анализируется в вашем браузере через Canvas и никогда не загружается на сервер. Это важно, когда «изображение» — это невыпущенный макет, приватный брендовый ассет клиента или внутренний скриншот, который не стоит выкладывать в случайный веб-инструмент. Это бесплатно, не требует регистрации, и после первого визита работает офлайн.
Захватите цвета, кликните для копирования, вставьте их туда, где им место.