Домінантний колір зображення
Знайдіть домінантний колір будь-якого зображення та палітру його найпоширеніших кольорів. Інструмент групує кожен видимий піксель у 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, інструменти дизайну або налаштування тем.
Для чого можна використовувати домінантний колір?
Зазвичай домінантний колір використовують як заповнювач тла під час завантаження зображень, для акцентів карток і заголовків, що пасують до обкладинки, сортування фото товарів за кольором і перевірки, чи відповідають брендовані зображення палітрі. Структурований результат також спрощує повторне використання значень у скриптах і темах.
Результат щоразу однаковий?
Так. Підрахунок детермінований, тому для того самого файла завжди отримуєте однакові домінантний колір, палітру та частки. Якщо кількість пікселів у двох діапазонах однакова, порядок визначається тим, у якому з них колір з’явився вперше.