CodeKitHubЧто это за инструмент?
Средний цвет — это арифметическое среднее значений красного, зелёного и синего каналов каждого пикселя — единый смешанный цвет, представляющий общий тон изображения, но он может выглядеть мутным, если в изображении есть очень разные по цвету области.
Доминирующие цвета — это другое: инструмент группирует похожие цвета пикселей в корзины (квантуя каждый RGB-канал), подсчитывает, сколько пикселей попадает в каждую корзину, и возвращает наиболее частые из них как отдельные образцы — это ближе к тому, что человек назвал бы «основными цветами этого изображения», чем единая усреднённая смесь.
Зачем его использовать?
- Получите одновременно средний цвет и настоящую многоцветную палитру из одной загрузки, а не просто одно число.
- Извлеките полезную цветовую палитру из фото, скриншота или логотипа для дизайн-проекта.
- Кликните по любому образцу, чтобы мгновенно скопировать его точный HEX-код.
- Полностью работает в вашем браузере — изображение считывается локально через canvas и никогда никуда не загружается.
- Бесплатно, мгновенно, без регистрации, без ограничений на размер файла сверх собственных ограничений вашего браузера.
Как использовать
- Нажмите кнопку загрузки и выберите изображение со своего устройства.
- Средний цвет и палитра доминирующих цветов появляются автоматически — без дополнительной кнопки для нажатия.
- Кликните по любому образцу (среднему цвету или любому цвету палитры), чтобы скопировать его HEX-код.
Пример
Ввод
Фото заката с оранжевым небом и тёмно-синими силуэтамиРезультат
Средний цвет: приглушённая коричневато-оранжевая смесь · Доминирующие цвета: яркий оранжевый, глубокий красный, почти чёрный, бледно-жёлтый (в виде отдельных образцов)Это именно тот случай, когда средний и доминирующие цвета расходятся сильнее всего — среднее смешивает тёплые и холодные тона в мутный цвет, а доминирующая палитра сохраняет их как чётко различимые отдельные цвета.
Часто задаваемые вопросы
Почему средний цвет так сильно отличается от любого цвета, реально присутствующего на изображении?
Усреднение математически смешивает все пиксели вместе — если на изображении есть и яркие оранжевые, и тёмно-синие области, среднее оказывается где-то в области мутного коричневого — цвета, который может визуально вообще не присутствовать на исходном фото. Это ожидаемое поведение настоящего среднего значения, а не ошибка; используйте вместо этого палитру доминирующих цветов, если нужны цвета, которые реально присутствуют на изображении.
Загружается ли моё изображение на сервер?
Нет. Изображение считывается непосредственно вашим браузером с помощью Canvas API, и весь анализ цвета происходит локально на JavaScript. Ничего никогда не отправляется по сети.
Сколько доминирующих цветов он возвращает?
До 8, отсортированных по количеству пикселей, попавших в каждую цветовую корзину, — самая частая первой. Если изображение очень однородно по цвету, вы можете увидеть меньше 8 отдельных корзин.
Учитывает ли он прозрачные пиксели в PNG?
Нет — пиксели с непрозрачностью менее 50% исключаются как из расчёта среднего, так и из расчёта доминирующих цветов, поэтому прозрачный фон не сместит результаты в сторону цвета, просвечивающего сквозь него.