Доминирующий цвет изображения
Найдите преобладающий цвет любого изображения и палитру его наиболее распространенных цветов. Инструмент распределяет каждый видимый пиксель по 4096 цветовым диапазонам, указывает самый многочисленный диапазон как преобладающий цвет, перечисляет до 12 цветов палитры с долей каждого в изображении и добавляет общий средний цвет; все значения представлены в формате hex, RGB и HSL. Отлично подходит дизайнерам, создателям тем и разработчикам, которым нужны цвета-заполнители или акцентные цвета.
Часто задаваемые вопросы
Как определяется преобладающий цвет?
Каждый пиксель относится к одному из 4096 диапазонов: по 16 уровней для красного, зеленого и синего. Побеждает диапазон с наибольшим числом пикселей, а его цвет вычисляется как среднее значение пикселей внутри него. Поэтому белый фон определяется как чисто белый, а не как округленное значение.
Что такое палитра?
В палитре перечислены самые распространенные диапазоны после преобладающего. Можно выбрать от 1 до 12 цветов, по умолчанию — 5. Для каждого цвета указаны значения hex, RGB и HSL, а также доля видимых пикселей, которую он занимает.
Чем отличается средний цвет?
Средний цвет — это среднее значение всех видимых пикселей. На фотографии с голубым небом над красным полем преобладающим будет синий или красный цвет, а средний окажется мутной смесью обоих. Средний цвет хорошо подходит для размытых заполнителей, а преобладающий — для акцентов.
Как обрабатываются прозрачные пиксели?
Пиксели, прозрачные более чем наполовину, игнорируются. Поэтому для логотипа на прозрачном фоне будут указаны цвета логотипа, а не черный. В результате также указывается доля прозрачной области изображения. Если видимых пикселей нет, вместо цвета появится сообщение.
Какие форматы можно анализировать?
Поддерживаются изображения JPEG, PNG, GIF, WebP, TIFF и AVIF размером до 5 MB. Для анимированных файлов GIF и WebP измерения выполняются по первому кадру, а изображения CMYK перед подсчетом преобразуются в sRGB.
Уменьшаются ли большие изображения перед обработкой?
Изображения, у которых одна из сторон превышает 4000 пикселей, сначала уменьшаются до размера 4000 пикселей. При этом доли цветов меняются лишь незначительно. Для изображений меньшего размера подсчет выполняется по каждому пикселю.
Почему похожие оттенки отображаются как отдельные цвета?
Ширина диапазонов составляет 16 уровней, поэтому два оттенка по разные стороны границы диапазона учитываются отдельно. Поэтому в палитре градиентов и фотографий часто отображаются соседние оттенки. Увеличьте число цветов в палитре, чтобы увидеть больше оттенков.
Можно ли использовать цвета в CSS?
Да. Для каждого цвета предоставляется код hex, например #3366cc, значения rgb() и значения hsl(), где оттенок указан в градусах, а насыщенность и светлота — в процентах. Их можно сразу вставить в CSS, инструменты дизайна или настройки темы.
Для чего можно использовать преобладающий цвет?
Его часто используют как цвет фона-заполнителя, пока загружаются изображения, как акцентный цвет карточек и заголовков, сочетающийся с обложкой, для сортировки фотографий товаров по цвету и для проверки соответствия изображений бренда палитре. Структурированный результат также упрощает повторное использование значений в скриптах и темах.
Одинаков ли результат при каждом запуске?
Да. Подсчет детерминированный: для одного и того же файла всегда будут одинаковыми преобладающий цвет, палитра и доли цветов. Если количество пикселей в двух диапазонах совпадает, порядок определяется тем, в каком из них цвет встретился раньше.