Що таке екстрактор палітри зображення?

Це інструмент, який зводить домінантні видимі кольори цілого зображення до меншої представницької палітри.

Чи можна копіювати HEX, RGB або CSS-змінні?

Так. Копіюйте кожне значення HEX чи RGB, усі HEX-значення в окремих рядках або всю палітру як CSS-змінні.

Моє зображення завантажується або зберігається?

Ні. Зображення декодується й аналізується локально в браузері та не надсилається на сервер.

Чому палітра менша за вибраний розмір?

На зображенні може бути менше унікальних видимих кольорів, ніж вибраний розмір. Інструмент не дублює кольори й ігнорує фактично прозорі пікселі.

Створіть палітру кольорів із зображення

Завантажте, перетягніть або вставте фото, знімок екрана, логотип чи ілюстрацію, щоб створити палітру з усього зображення. Інструмент узагальнює домінантні видимі кольори в палітрі з 3, 5 або 8 кольорів, а не вибирає один піксель. Копіюйте окремі значення HEX і RGB, усі HEX-значення в окремих рядках або готовий набір CSS-змінних. Зображення обробляється локально в браузері та ніколи не завантажується до ColourPicker.app.

Завантажте зображення

Виберіть файл, перетягніть його сюди або вставте зображення з буфера обміну.

Також можна вставити знімок екрана за допомогою Ctrl+V або Command+V.

Ваше зображення залишається на пристрої та обробляється лише в цьому браузері.

Інші інструменти

Picker

Вибір кольору

Завантажте зображення та натисніть, щоб витягти кольорові коди HEX, RGB та HSL.

HEXRGBHSLImage

Converter

Конвертер кольорів

Миттєво конвертуйте кольори між HEX, RGB та HSL.

HEXRGBHSL

Checker

Перевірка контрастності

Перевірте коефіцієнти контрастності кольорів за стандартами WCAG AA та AAA.

WCAGAAAAA

Generator

Генератор палітр

Створіть гармонійні кольорові палітри з будь-якого базового кольору.

HarmonyHSLHEX

Як створити палітру кольорів із зображення

Виберіть файл зображення, перетягніть його в область завантаження або вставте з буфера обміну. Браузер декодує зображення й аналізує зменшену вибірку видимих пікселів. Подібні відтінки групуються, тому палітра показує кольори, найважливіші для вигляду зображення, а не кожне значення пікселя.

Додайте фото, логотип, ілюстрацію, знімок екрана чи інше зображення, яке може відкрити браузер.
Після завантаження автоматично створюється палітра з п’яти домінантних кольорів.
Виберіть 3, 5 або 8 кольорів для коротшої чи докладнішої кольорової довідки.
Копіюйте окремі кольори або всю палітру для наступного етапу дизайну чи розробки.

На фотографії можуть бути світло, тіні та великі ділянки фону, а проста піктограма може мати лише кілька видимих кольорів. Результат відображає те, що справді є на зображенні, без штучного додавання відтінків.

Домінантні кольори, а не один точний піксель

Ця сторінка призначена для багатоколірного підсумку цілого фото, ілюстрації, логотипа чи знімка екрана. Ви отримуєте кольори, що визначають зображення в цілому, а не точне значення однієї вибраної точки.

Якщо потрібен точний колір одного пікселя, скористайтеся вибрати один точний колір із зображення. Щоб створити комплементарні, аналогові або інші теоретичні зв’язки з базового кольору, можна створити гармонію кольорів із базового кольору. Цей екстрактор узагальнює лише кольори, уже видимі на зображенні.

Копіюйте палітру як HEX, RGB або CSS-змінні

Кожен зразок має значення HEX і RGB та окремі кнопки копіювання. Також можна скопіювати всі HEX-значення списком, по одному кольору в рядку. Це зручно для нотаток, візуальних референсів і мудбордів.

Кнопка CSS-змінних створює блок :root з іменами на кшталт --cp-1, --cp-2 і --cp-3. Використовуйте його як швидку відправну точку для прототипу або таблиці стилів, а контрастність і доступність перевіряйте окремо.

Ваше зображення залишається приватним

Уся обробка відбувається у вашому браузері. Файл не надсилається до ColourPicker.app чи зовнішнього сервісу та не зберігається на сервері. Локальний попередній перегляд тимчасовий і звільняється, коли ви замінюєте зображення або залишаєте сторінку.

Аналіз використовує лише видиму інформацію про кольори. Фактично прозорі пікселі ігноруються, тому прозорий фон, наприклад у PNG-логотипі, не стає помилковим домінантним кольором.

Чому зображення може повернути менше кольорів

Вибір 3, 5 або 8 кольорів задає максимум, а не обіцяє додаткові зразки. Проста піктограма, пласка графіка, двоколірний логотип або майже прозоре зображення можуть містити менше унікальних видимих кольорів, ніж вибраний розмір.

У такому разі інструмент показує меншу, реальну палітру. Він не дублює кольори й не вигадує нові відтінки, щоб досягти заданої кількості.

Поширені запитання

Як створити палітру кольорів із зображення?: Завантажте, перетягніть або вставте зображення. Інструмент групує видимі домінантні кольори в палітру з 3, 5 або 8 кольорів.
Що таке екстрактор палітри зображення?: Це інструмент, який зводить домінантні видимі кольори цілого зображення до меншої представницької палітри.
Чи можна копіювати HEX, RGB або CSS-змінні?: Так. Копіюйте кожне значення HEX чи RGB, усі HEX-значення в окремих рядках або всю палітру як CSS-змінні.
Моє зображення завантажується або зберігається?: Ні. Зображення декодується й аналізується локально в браузері та не надсилається на сервер.
Чому палітра менша за вибраний розмір?: На зображенні може бути менше унікальних видимих кольорів, ніж вибраний розмір. Інструмент не дублює кольори й ігнорує фактично прозорі пікселі.