Чому ми додали автоматичне вилучення палітри до колірного пікера

Наш колірний пікер завжди дозволяв завантажити зображення й клікнути будь-який піксель, щоб отримати його точні значення HEX, RGB та HSL. Це відповідає на питання «якого кольору саме ця точка?» — корисно, але не те питання, яке насправді мають більшість людей, завантажуючи фото. Зазвичай воно звучить так: «яка загальна колірна схема цього зображення?» — витягти брендову палітру з логотипа або підхопити настрій референсного фото для колірної схеми сайту.

Вибірка одного пікселя на це відповісти не може. Тому ми додали вилучення палітри: завантажте зображення — і інструмент тепер автоматично витягує вісім найдомінантніших кольорів і показує їх як клікабельні зразки.

Як це працює

Тут не задіяна жодна модель ШІ, і нічого нікуди не завантажується — це простий алгоритм підрахунку частот, який виконується за кілька мілісекунд:

Зображення зменшується до полотна 80×80. Повна роздільна здатність для колірної статистики не потрібна, а зменшення робить усе миттєвим навіть для великих фото.
Кожен піксель потрапляє в кошик за огрубленою версією свого кольору — верхні 5 бітів кожного каналу RGB, тож візуально майже ідентичні пікселі опиняються в одному кошику, а не рахуються кожен як унікальний колір.
Кошики сортуються за кількістю пікселів, що в них потрапили, і вісім найбільших стають палітрою, кожен показується як усереднений колір усього вмісту кошика.

Ось і все. Без машинного навчання, без зовнішнього сервісу — лише зменшення й підрахунок, тому це миттєво й ніколи не покидає ваш браузер.

Клік по зразку — отримуєте код

Кожен зразок палітри клікабельний: натисніть на нього — і він стає активним кольором інструмента, значення HEX, RGB і HSL заповнюються автоматично, а hex тим самим кліком копіюється у ваш буфер обміну. Є також кнопка «copy all», якщо ви хочете отримати всю палітру як список через кому — зручно для вставлення прямо в дизайнерський інструмент чи блок CSS custom properties.

Спробуйте

Завантажте будь-яке зображення — скриншот, логотип, фото — на сторінці колірного пікера, і палітра автоматично з’явиться під ним.