Палітра кольорів

Палітра кольорів із зображення, перевірка контрасту будь-яких двох кольорів і експорт у CSS чи Tailwind — просто в браузері.

Про Палітра кольорів

Що це

Цей інструмент знаходить основні кольори картинки — фото, логотипа, знімка екрана — і показує їх палітрою, де домінантний колір іде першим. Додайте власні кольори піпеткою просто із зображення, порівняйте будь-які два за контрастом WCAG і експортуйте палітру як CSS-змінні, конфігурацію Tailwind чи JSON.

Основні можливості

  • Палітра основних кольорів зображення PNG, JPEG чи WebP, з домінантним першим.
  • Кількість кольорів, яку обираєте ви.
  • Власні кольори, взяті із зображення піпеткою.
  • Перевірка контрасту WCAG для будь-яких двох кольорів, для звичайного й великого тексту.
  • Експорт як CSS-змінні, Tailwind чи JSON; копіювання будь-якого кольору в HEX чи RGB.

Як користуватися

  1. Перетягніть зображення на область, клацніть її, щоб обрати файл, або натисніть «Приклад».
  2. Задайте кількість кольорів.
  3. За потреби візьміть додаткові кольори із зображення й позначте два, щоб порівняти контраст.
  4. Скопіюйте окремі кольори або експортуйте всю палітру.

Коли корисно

  • Зібрати колірну схему сайту з фото бренду чи логотипа.
  • Перевірити, що текст у ваших кольорах читабельний, ще до використання.
  • Отримати точні коди кольорів зі знімка екрана дизайну.

Конфіденційність та обмеження

Ваші дані

Ваше зображення обробляється в браузері й не завантажується на сервер — сайт отримує лише анонімну подію «інструмент відкрито», без вмісту. Результат, надісланий в інший інструмент, зберігається на цьому пристрої 24 години в «Останніх діях».

Обмеження

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

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

Як обираються кольори?

Схожі кольори зображення групуються, і кожна група дає один колір палітри. Група, що займає найбільшу площу, — це домінантний колір.

Що означають AA і AAA в перевірці контрасту?

Це рівні доступності WCAG. AA вимагає контрасту щонайменше 4.5:1 для звичайного тексту й 3:1 для великого; AAA — 7:1 і 4.5:1.

Який формат експорту обрати?

CSS-змінні — для звичайного CSS, Tailwind — для конфігурації Tailwind, JSON — для дизайн-інструментів чи власних скриптів.