Як отримати палітру кольорів із картинки?

Перетягніть зображення на цю сторінку. Домінантні кольори з'являються одразу, упорядковані за тим, яку частину зображення вони займають. Можна змінити їхню кількість, скопіювати кожен у HEX, RGB або HSL та експортувати набір як CSS, Tailwind або JSON.

Як дізнатися HEX-код кольору на картинці?

Завантажте картинку й клацніть у потрібному місці. Піпетка покаже значення HEX, RGB і HSL цього пікселя, а клацання по будь-якому значенню скопіює його.

Як обчислюються домінантні кольори?

Зображення зменшується, а його пікселі кластеризуються методом k-means у колірному просторі OKLab, який вимірює різницю кольорів так, як її сприймають люди. Середній колір кожного кластера стає зразком, упорядкованим за часткою пікселів у ньому.

Чому кольори трохи відрізняються від іншого інструмента?

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

Чи можна експортувати палітру в Tailwind CSS?

Так. Оберіть конфіг Tailwind v3, щоб отримати об'єкт colors для вставлення в tailwind.config.js, або Tailwind v4 @theme для CSS-first конфігурації, і скопіюйте чи завантажте код.

Чи працює це з прозорими PNG і логотипами?

Так. Пікселі, що переважно прозорі, пропускаються, тож палітра відображає видиме зображення, а не порожній фон.

Чи завантажується моє зображення на сервер?

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

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

Pull the dominant colours out of any photo as HEX, RGB and HSL. Усе виконується локально — нічого не надсилається на сервер.

Вхід: PNG · JPEG · WebP · GIF · SVG
Вихід: HEX · RGB · HSL · CSS · JSON

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

Фото, знімок екрана чи логотип: PNG, JPEG, WebP, GIF або SVG. Можна також вставити зображення.

Палітра кольорів із будь-якого зображення

Перетягніть фото, знімок екрана чи логотип, і цей генератор палітри витягне домінантні кольори, упорядковані за тим, яку частину зображення займає кожен. Оберіть від 3 до 12 зразків, скопіюйте будь-який у HEX, RGB або HSL, клацніть у будь-якому місці зображення, щоб узяти колір конкретного пікселя, і експортуйте палітру як CSS-змінні, SCSS, конфіг Tailwind, JSON або PNG-смужку. Зображення аналізується на вашому пристрої й нікуди не завантажується.

Як отримати кольори із зображення

Перетягніть зображення на сторінку, оберіть його у файлах або вставте з буфера обміну. Підходять PNG, JPEG, WebP, GIF і SVG.
Задайте в полі Кольори потрібну кількість зразків. Смужка над списком показує кожен колір відповідно до його частки в зображенні.
Клацніть значення, щоб скопіювати його як HEX, RGB або HSL.
Потрібна конкретна точка, наприклад колір кнопки на знімку екрана? Клацніть у цьому місці зображення, щоб узяти зразок, а потім додайте його до палітри кнопкою з плюсом.
Оберіть формат експорту й скопіюйте код або завантажте палітру як PNG-смужку.

Як визначаються домінантні кольори

Фото легко може містити сто тисяч різних кольорів, більшість із яких — ледь помітні варіації одне одного. Щоб знайти кілька справді важливих, зображення зменшується, і кожен піксель групується з найбільш схожими на нього за допомогою методу кластеризації k-means. Кожна група стає одним зразком: середнім кольором її пікселів, упорядкованим за кількістю пікселів у групі.

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

Прозорі пікселі ігноруються, тож логотип на прозорому PNG дає кольори логотипа, а не чорний зразок.

HEX, RGB чи HSL: що копіювати

Потрібен OKLCH, CMYK чи HSV або світліший відтінок одного зі зразків? Вставте HEX-значення в конвертер кольорів, який показує всі записи разом з відтінками, тінями й колірними гармоніями.

HEX: #2a9d8f. Шість шістнадцяткових цифр для червоного, зеленого й синього. Найкомпактніший запис, який приймають усі дизайнерські інструменти та CSS.
RGB: rgb(42, 157, 143). Ті самі три канали як числа від 0 до 255. Зручно в коді, що виконує обчислення з кольорами, або в інструментах, які просять окремі значення.
HSL: hsl(173 58% 39%). Тон, насиченість і світлість. Найпростіший запис для ручного налаштування: підвищте світлість для стану hover, знизьте насиченість для приглушеного варіанта.

Формати експорту

CSS-змінні: блок :root з --palette-1, --palette-2 тощо, готовий для будь-якої таблиці стилів.
SCSS: змінні на кшталт $palette-1 для проєктів на Sass.
Конфіг Tailwind v3: об'єкт theme.extend.colors для tailwind.config.js, що дає класи на кшталт bg-palette-1.
Tailwind v4 @theme: кастомні властивості --color-palette-1 для CSS-first конфігурації Tailwind 4.
JSON: масив із HEX, RGB і HSL кожного кольору для скриптів і дизайн-токенів.
PNG-смужка: зразки поруч одне з одним як зображення для мудборду, брифу чи повідомлення в чаті.

Поради для корисної палітри

Менше кольорів для брендингу, більше для ілюстрацій. П'ять-шість зразків зазвичай передають настрій фото; збільште кількість до 10 чи 12, коли потрібні й допоміжні тони.
Спершу обріжте. Велике небо чи біле поле сторінки домінують у результаті. Обріжте зображення до потрібної частини, щоб палітра відображала саме її.
Перевіряйте кольори для тексту перед використанням. Кольори з фото рідко мають достатній контраст для тексту. Перевірте кожну пару, на якій плануєте розміщувати текст, у перевірці контрасту.
Використовуйте піпетку для точних значень. Домінантні кольори — це середні значення. Коли потрібен точний колір одного пікселя, наприклад логотипа чи елемента інтерфейсу на знімку екрана, клацніть по ньому.

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

Як отримати палітру кольорів із картинки?: Перетягніть зображення на цю сторінку. Домінантні кольори з'являються одразу, упорядковані за тим, яку частину зображення вони займають. Можна змінити їхню кількість, скопіювати кожен у HEX, RGB або HSL та експортувати набір як CSS, Tailwind або JSON.
Як дізнатися HEX-код кольору на картинці?: Завантажте картинку й клацніть у потрібному місці. Піпетка покаже значення HEX, RGB і HSL цього пікселя, а клацання по будь-якому значенню скопіює його.
Як обчислюються домінантні кольори?: Зображення зменшується, а його пікселі кластеризуються методом k-means у колірному просторі OKLab, який вимірює різницю кольорів так, як її сприймають люди. Середній колір кожного кластера стає зразком, упорядкованим за часткою пікселів у ньому.
Чому кольори трохи відрізняються від іншого інструмента?: Кожен екстрактор групує схожі пікселі по-своєму, а зразки — це середні значення груп, а не окремі пікселі. Початкові точки тут обираються детерміновано, тож те саме зображення завжди дає тут той самий результат. Коли потрібне точне значення пікселя, користуйтеся піпеткою.
Чи можна експортувати палітру в Tailwind CSS?: Так. Оберіть конфіг Tailwind v3, щоб отримати об'єкт colors для вставлення в tailwind.config.js, або Tailwind v4 @theme для CSS-first конфігурації, і скопіюйте чи завантажте код.
Чи працює це з прозорими PNG і логотипами?: Так. Пікселі, що переважно прозорі, пропускаються, тож палітра відображає видиме зображення, а не порожній фон.
Чи завантажується моє зображення на сервер?: Ні. Зображення декодується й аналізується у вашому браузері та ніколи не залишає ваш пристрій.

Схожі інструменти

Усі інструменти

Color ConverterConvert colours between HEX, RGB, HSL, HSV, CMYK and OKLCH.WCAG Contrast CheckerCheck text and background colours against WCAG AA and AAA.Конвертер зображеньПерекодовуйте, змінюйте розмір і векторизуйте зображення з живим порівнянням до/після.Favicon GeneratorEvery favicon size, a real multi-size .ico and a web manifest from one image.Data StudioПереносьте структурований текст між JSON, YAML, TOML, CSV і Markdown.Стиснення та архіваціяСтискайте будь-які файли за допомогою gzip чи Brotli або пакуйте теку в ZIP.