Извлечение цветов из изображений: Как создавать рабочие палитры

Последнее обновление: June 28, 2026

Извлечение цветовой палитры из фотографии — самый быстрый способ создать набор цветов, которые уже кажутся гармоничными. Фотография выполнила сложную работу по выбору гармоничных оттенков; извлечение просто измеряет их. В этом руководстве мы расскажем, как на самом деле работает извлечение, какие методы позволяют создавать палитры для использования в дизайн-системе и какие правила контраста обеспечивают доступность этих цветов.

Быстрый ответ: как извлечь цвета из изображения?

Откройте изображение в инструменте выбора цвета, выберите 5–7 наиболее часто встречающихся цветов и взвесьте их в зависимости от площади, которую занимает каждый. Отбросьте почти дублирующиеся цвета, оставьте один доминирующий цвет, один или два вторичных и один акцентный. Затем примените правило 60–30–10: 60% доминирующий, 30% вторичный, 10% акцентный. Проверьте каждую комбинацию текста и фона с помощью проверятеля контрастности WCAG, прежде чем публиковать — палитра, которая выглядит хорошо, но не проходит проверку контрастности, непригодна для реального текста.

Зачем извлекать цвета из фотографии?

Хорошая фотография уже содержит гармоничную палитру, потому что фотограф или сама сцена была скомпонована таким образом. Когда вы извлекаете эти цвета, вы наследуете эту гармонию, вместо того чтобы выбирать hex-коды с нуля. Вот почему дизайнеры брендов часто начинают с героического изображения (hero image), любимого пейзажа основателя или фотографии продукта.

Альтернативный способ — выбор цветов из цветового круга (color wheel) — работает, но он имеет тенденцию создавать палитры, которые технически правильны, но эмоционально плоские. Цвета, взятые с реального изображения, несут контекст, который придает им ощущение намеренности.

Как работает извлечение цвета?

Извлечение уменьшает тысячи уникальных пикселей до горстки репрезентативных цветов. Доминируют три метода, и каждый из них имеет свой компромисс.

• Frequency counting быстр, но переоценивает большие фоны, такие как небо.
• Median cut сочетает скорость и качество и используется большинством редакторов.
• K-means дает самые «дизайнерские» результаты, но он медленнее.

Практический момент: всегда уменьшайте изображение до размера около 100×100 pixels перед извлечением. Фотография в полном разрешении содержит миллионы пикселей, и дополнительная детализация не меняет основные цвета, она просто замедляет подсчет. Mozilla canvas pixel manipulation reference описывает шаг чтения пикселей, который лежит в основе извлекателей на базе браузера.

Какие цвета следует сохранить?

Извлечение обычно возвращает больше цветов, чем вы можете использовать. Фотография может дать двенадцать кандидатов, но используемая палитра — это пять-семь. На этапе фильтрации большинство палитр ошибаются.

• Сохраните один доминантный цвет — тот, который покрывает наибольшую площадь, часто нейтральный или небесный оттенок.
• Сохраните один или два вторичных цвета, которые дополняют доминирующий.
• Сохраните ровно один акцентный цвет для призывов к действию и выделений.
• Отбрасывайте почти дублирующиеся цвета; два зеленых оттенка, разделенные тремя тонами, выглядят как один мутный цвет.
• Отбрасывайте чистый черный и чистый белый, если только дизайн не требует их в качестве нейтральных цветов.

Правило 60-30-10 для применения палитры

Получив свои цвета, вы узнаете с помощью правила 60-30-10, в каком объеме использовать каждый из них. Это рекомендация из области дизайна интерьера, которая отлично применима к интерфейсам.

Приведенный пример: если извлечь цвета с фотографии леса, вы можете получить доминирующий зеленый цвет, более светлый вторичный зеленый и коричневый акцент. Зеленый становится фоном страницы (60%), более светлый зеленый заполняет карточки (30%), а коричневый используется для кнопки призыва к действию (10%). Результат напоминает лес, но не является им буквально.

Как проверить цвета на доступность?

Палитра, которая не проходит проверку контрастности, — это не законченная палитра. Текст должен иметь минимальное соотношение контрастности относительно фона, чтобы быть читаемым, а стандартом является WCAG 2.1.

• Обычный текст должен иметь контрастность не менее 4.5:1 относительно фона.
• Крупный текст (18pt или 14pt жирным) требует 3:1.
• Старайтесь добиться 7:1 для основного текста, если это возможно; это помогает читателям с низким зрением.

Проверьте каждую пару, которую вы планируете использовать — акцентный цвет на доминирующем фоне, текст на вторичном и так далее. WebAIM contrast checker является стандартным бесплатным инструментом, а W3C WCAG 2.1 contrast guidance определяет математику. Если акцентный цвет не проходит проверку на вашем фоне, затемните акцент или осветлите фон до тех пор, пока он не пройдет.

Превращение палитры в дизайн-систему

Набор шестнадцатеричных кодов не является системой, пока вы не присвоите им роли и не создадите варианты. Это шаг, который отличает мудборд от чего-то, что может использовать разработчик.

1. Назовите каждый цвет по роли (основной, вторичный, акцентный, поверхность, текст), а не по оттенку.
2. Сгенерируйте светлый и темный вариант каждого, чтобы поддерживать оба режима.
3. Определите состояния наведения (hover) и активности (active), слегка сместив насыщенность или яркость.
4. Зафиксируйте палитру в переменных вашего инструмента, чтобы она оставалась последовательной.

Как только палитра готова, остальная часть сборки ускоряется. Кнопки, заголовки и карточки берут данные из одних и тех же именованных токенов. Для изображений, которые будут находиться в этой системе, пропустите их через image compressor и image resizer, чтобы они соответствовали бюджету производительности системы. В image optimization guide описаны решения по формату и размеру, которые сохраняют скорость работы дизайна с богатой цветовой палитрой.

Когда извлечение дает вам неправильную палитру

Извлечение измеряет то, что находится на фотографии, а не то, что нужно вашему бренду. Вот несколько распространенных сбоев:

• Яркое небо доминирует в подсчете, и вы получаете пять оттенков синего.
• Небольшой, но важный акцентный цвет теряется, потому что он занимает мало места.
• Артефакты сжатия вводят шумные цвета, которые выглядят как реальные образцы.
• Фотография со смешанным освещением дает мутные средние тона.

Если извлеченная палитра кажется неудачной, взвешивайте извлечение по воспринимаемому воздействию — яркости, насыщенности и контрасту краев, а не по сырой частоте. Или выберите другое исходное изображение. Исходная фотография является самым главным фактором в том, будет ли полученная палитра пригодной для использования, поэтому выберите ту, которая уже имеет желаемое настроение. Для стилизованной работы над брендом, где вам нужна контролируемая двухцветная палитра вместо выборки, duotone effect guide пошагово объясняет, как намеренно сопоставить изображение с двумя цветами. Если извлеченные цвета также будут использоваться для создания логотипа или набора иконок, SVG to PNG converter сохранит векторные элементы четкими при любом размере, который затрагивает палитра.

Часто задаваемые вопросы

Как извлечь цвета из изображения?

Инструмент группирует пиксели изображения по сходству и возвращает наиболее часто встречающиеся цвета в виде палитры — обычно пять или шесть. Каждый цвет сопровождается своим значением hex или RGB. Результат представляет собой палитру, основанную на данных фотографии, а не догадку.

Какие извлеченные цвета мне следует сохранить?

Доминантный цвет (самый частый), один или два акцента и нейтральный. Отбрасывайте цвета, которые слишком близки друг к другу или встречаются только в крошечных областях. Обычно достаточно пяти цветов; больше — фрагментирует палитру. Применяйте их с помощью правила 60-30-10.

Что такое правило 60-30-10?

Руководство по пропорциям: 60 процентов дизайна в доминантном цвете, 30 процентов во вторичном, 10 процентов в акценте. Это поддерживает сбалансированность палитры, не давая ей выглядеть грязно. Извлеченные цвета напрямую используются для выполнения этих ролей.

Как проверить цвета на доступность?

Проверьте коэффициент контрастности между цветами текста и фона по отношению к порогам WCAG (4.5:1 для обычного текста). Палитра может выглядеть хорошо, но все равно не пройти проверку на доступность, если светлый акцент расположен на светлом фоне. Чтобы исправить контраст, регулируйте оттенок, а не тон.

Сколько цветов должна иметь палитра?

Обычно пять: доминантный цвет, один или два вторичных цвета, акцент и нейтральный. Больше — фрагментирует палитру и затрудняет ее последовательное применение. Пять цветов идеально подходят для правила пропорций 60-30-10.

Как применить извлеченную палитру к дизайну?

Используйте правило 60-30-10: доминантный цвет занимает 60 процентов дизайна (обычно фон), вторичный цвет — 30 процентов (поверхности, второстепенные элементы), а акцент — 10 процентов (призывы к действию, выделения). Эта пропорция поддерживает сбалансированность палитры, не давая ей выглядеть грязно. Отбрасывайте любые извлеченные цвета, которые не соответствуют этим трем ролям, даже если они появились на исходной фотографии.