0

Витяг палітри кольорів із зображення

Витягніть справжню палітру будь-якого фото у браузері: median-cut квантизація знаходить 3–12 ключових кольорів з HEX-кодами, CSS-змінними та експортом у JSON.

🧵

Перетягніть зображення

Опрацювання... 0%
Читання файлу зображення
Зменшення масштабу пікселів
Виконання median-cut квантизації
Складання палітри

Результат

Preview Output

Цей витяг палітри читає кольори, які реально є у вашому зображенні, а не обчислені з теорії. Завантажте фото, оберіть кількість кольорів (від 3 до 12; для більшості задач пасує пʼять-шість) — і тул поверне палітру свотчів, відсортовану за вагою: домінантний колір першим, у кожного HEX-код, частка зображення у відсотках і кнопка копіювання. Експорт — в один клік: блок CSS-змінних, готовий для стилів, JSON-масив для скриптів і дизайн-токенів та смуга палітри у PNG для мудбордів.

Під капотом — median-cut квантизація, той самий алгоритм, яким GIF-енкодери стискають мільйони кольорів у маленьку палітру. Спершу зображення зменшується приблизно до десяти тисяч пікселів на локальному канвасі; далі колірний простір раз за разом розтинається по медіані найширшого каналу, доки не лишиться потрібна кількість кластерів, і кожен кластер усереднюється в один свотч. Саме тому результат відображає характер зображення, як його бачить око, а не жменьку випадково взятих пікселів.

Усе відбувається у браузері: без завантаження на сервер, черги й акаунта — повна безпека для неопублікованих дизайнів, клієнтських фото та внутрішніх скриншотів. Працює будь-який формат, який декодує браузер: PNG, JPG, WebP, GIF; прозорі ділянки ігноруються, тож PNG-логотипи дають чисті палітри.

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