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