Loading…

Про інструмент Онлайн Вибір Кольору та Конвертер

Завантажте зображення, вставте колір або скористайтеся коліром для точного вибору кольору пікселів. Інструмент проводить глибокий аналіз на стороні клієнта: нормалізує ваш HEX, обчислює RGB/HSL/HSV/CMYK, конвертує в XYZ/LAB/LCH, розраховує яскравість та контраст WCAG і генерує гармонійні палітри. Потім ви можете скопіювати будь-який формат як готовий токен для CSS або використати гармонії для створення цілісної системи дизайну.

Що може цей інструмент вибірки кольорів

  • Виберіть кольори з зображень* або почніть з точного колірного кола чи введення HEX/RGB
  • Розширені конверсії: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
  • Вбудована перевірка контрасту WCAG відносно #000000 та #FFFFFF з використанням відносної яскравості
  • Пропозиції веб-безпечних та скорочених HEX-кодів, де це застосовно
  • Гармонії кольорів: комплементарні, тріадичні, тетрадичні, аналогічні, монохромні (обчислюються через обертання відтінку)
  • Попередній перегляд яскравості та сприйнятої світлоти для передбачення проблем контрасту
  • Наближене співставлення на кшталт Pantone на основі найближчої відстані RGB (з кешованим набором даних)
  • Аналіз виконується на стороні клієнта; використовуються лише мінімальні дані при ввімкненій опціональній перевірці Pantone

🔧 Як користуватися вибіркою кольорів for color-picker

1

1. Виберіть або підберіть базовий колір

Вставте HEX-значення, введіть RGB/HSL або використовуйте вибірку, щоб взяти колір з зображення чи кола. Інструмент нормалізує його до безпечного HEX-значення внутрішньо.

2

2. Точне налаштування відтінку та світлоти

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

3

3. Прочитайте та скопіюйте потрібні формати

Копіюйте HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB та LCH одним кліком. Використовуйте їх для CSS-змінних, дизайн-токенів або приміток передачі.

4

4. Перевірте контраст WCAG

Перегляньте коефіцієнти контрасту відносно #000000 та #FFFFFF на основі яскравості sRGB. Використовуйте результати, щоб швидко визначити, чи підходить колір для основного тексту, великих заголовків чи елементів інтерфейсу.

5

5. Створіть гармонії та побудуйте палітру

Дослідіть комплементарні, тріадичні, тетрадичні, аналогічні та монохромні кольори, згенеровані через обертання відтінку. Додайте улюблені до палітри/історії та експортуйте їх як токени.

Технічні деталі

Обробка та нормалізація введення

Інструмент приймає шістнадцяткові коди кольорів і конвертує їх у нормалізований 6-значний HEX як внутрішню опорну точку.

АспектПоведінкаПримітки
Нормалізація HEX3-значний та 6-значний HEX, необов'язковий символ # на початкуКороткий HEX (наприклад, #0f8) розширюється до #00ff88; не-шестнадцяткові символи видаляються.
Підтримка HEX8RGBA через #RRGGBBAAАльфа-канал конвертується в 0–255 і додається як 4-й байт.
Пропозиція веб-безпекиНаближення до найближчого кроку 51 на каналЗначення округлюються до найближчого кратного 51 (0, 51, 102, 153, 204, 255).
Пропозиція скороченого HEXТільки коли можна стиснутиПоказується, коли кожна пара HEX-цифр повторюється (наприклад, #112233 → #123).

Кольорові простори та перетворення

Усі обчислення базуються на sRGB з еталонним білим D65.

ПростірОбчисленняВикористання
RGBЗ нормалізованого HEX (0–255 на канал)Базова репрезентація для перетворень.
HSL / HSVСтандартні циліндричні перетворення з sRGBВикористовуються для інтуїтивних редагувань та розрахунків гармоній.
CMYKАпаратно-незалежне наближенняОбчислюється як 1−max(R,G,B) з компонентами 0–100%; не прив'язано до ICC-профілів.
XYZЛінеаризований sRGB → XYZ з використанням матриці D65Проміжний простір для LAB/LCH та глибшого аналізу.
LABCIE L*a*b* з XYZПерцептивно більш рівномірний метричний простір.
LCHCIE L*C*h° з LABКорисно для налаштувань тону/насиченості/світлоти та перцептивного дизайну палітр.

Яскравість та контрастність WCAG

Контрастність обчислюється за стандартною формулою відносної яскравості WCAG.

АспектДеталіПримітки
Відносна яскравістьОбчислено з лінеаризованого sRGB (компонент Y)Використовує коефіцієнти 0.2126R + 0.7152G + 0.0722B.
Коефіцієнт контрастності(L1 + 0.05) / (L2 + 0.05)Інструмент показує контраст відносно #000000 та #FFFFFF.
Пороги WCAGAA/AAA для звичайного та великого текстуТипові пороги: 4.5:1 (AA звичайний), 3:1 (AA великий), 7:1 (AAA звичайний), 4.5:1 (AAA великий).

Гармонії та похідні кольори

Гармонії генеруються як прості обертання відтінку в HSL, зберігаючи насиченість та світлість.

ГармоніяПравилоПриклад
Комплементарний+180° відтінкуПротилежна точка на колірному колі.
Тріада±120° відтінкуТри рівномірно розташовані кольори.
Тетрада+90°, +180°, +270° відтінкуЧотири кольори, що утворюють прямокутник на колі.
Аналогічний−30° / +30° відтінкуСусідні кольори навколо базового.
МонохромнийОсвітлення/затемнення в LСвітліші та темніші версії того самого відтінку.

Схожість з Pantone (наближено)

Коли доступний набір даних Pantone, інструмент обчислює найближчий відповідник у просторі RGB.

АспектПоведінкаПримітки
Завантаження набору данихКешоване + асинхронне завантаження через getPantoneColors / getPantoneColorsCachedІнтерфейс може показати відповідність миттєво при наявності кешу або після короткого асинхронного завантаження.
Метрика відповідностіКвадрат евклідової відстані в RGB (0–255)Швидке, просте наближення; не є перцептивною метрикою ΔE*.
Вихідні даніІдентифікатор та назва на зразок PantoneВідображається лише для орієнтування; не є офіційним відображенням Pantone.

Продуктивність та конфіденційність

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

Популярні сценарії використання

UI/UX та Front-End

  • Створюйте доступні пари переднього/фонового плану для кнопок, посилань і тексту.
  • Експортуйте CSS-змінні та дизайн-токени безпосередньо з обраних кольорів.
  • Перевіряйте контраст для світлого/темного режимів перед впровадженням перемикача тем.
/* CSS-токени кольорів */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Брендинг та візуальна ідентичність

  • Отримайте палітру основних/додаткових/акцентних кольорів з одного головного кольору.
  • Досліджуйте комплементарні або тріадні варіанти для логотипу або лінійки продуктів.
  • Отримайте приблизну назву на зразок Pantone перед підготовкою гайдлайну бренду.

Візуалізація даних та дашборди

  • Визначайте кольори серій, які залишаються розрізненими на світлому та темному фоні.
  • Використовуйте LAB/LCH для створення палітр із контрольованими перцептивними кроками.
  • Швидко перевіряйте, чи відповідають кольори діаграм очікуванням контрасту в легенді та мітках.

❓ Frequently Asked Questions

Яка різниця між HEX, RGB, HSL та HSV?

HEX — це просто компактний спосіб запису значень RGB у шістнадцятковій системі. RGB описує компоненти червоного/зеленого/синього кольорів у sRGB. HSL і HSV — це більш інтуїтивні циліндричні моделі: H — це відтінок на колірному колі, S — насиченість, а L/V контролює яскравість або світлість.

Чому значення CMYK виглядають приблизними?

Реальний вивід CMYK залежить від профілів принтера, фарби, паперу та калібрування. Цей інструмент показує незалежне від пристрою наближення, яке корисне для ранніх дизайнерських рішень, але фінальну друковану роботу слід перевіряти з ICC-профілями вашого постачальника друку.

Для чого корисні LAB та LCH?

LAB і LCH є більш перцептивно рівномірними, ніж сирі RGB. Рівні числові кроки в L або C зазвичай виглядають більш послідовними для ока, що робить їх чудовими для генерації відтінків, тонів і збалансованих палітр або для вимірювання візуальної відстані між кольорами.

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

Ми обчислюємо відносну яскравість з sRGB за формулою WCAG, а потім виводимо коефіцієнт контрасту (L1 + 0.05) / (L2 + 0.05). Результат порівнюється з поширеними порогами, такими як 4.5:1 (AA для звичайного тексту) та 7:1 (AAA для звичайного тексту).

Чи є назви Pantone точними?

Ні. Будь-яка мітка на зразок Pantone є приблизним найближчим сусідом у просторі RGB і надається лише для орієнтування. Для виробничо-критичних робіт завжди перевіряйте з офіційними бібліотеками та інструментами Pantone.

Чи зберігаєте ви мої зображення або кольори?

Обчислення кольорів (формати, контраст, гармонії) виконуються на стороні клієнта. Залежно від конфігурації, завантаження зображень і набори даних Pantone можуть включати сервер, але інструмент розроблений для тимчасової обробки, а не довгострокового зберігання. Для висококонфіденційних активів віддавайте перевагу локальним/офлайн-інструментам.

Pro Tips

Best Practice

Завжди перевіряйте кольори на світлих і темних поверхнях; сприйняття насиченості та контрасту може суттєво змінюватися залежно від контексту.

Best Practice

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

Best Practice

Перевіряйте контраст AA/AAA для всіх інтерактивних станів (наведення, активний, вимкнений), а не лише для кольору кнопки за замовчуванням.

Best Practice

Експортуйте CSS-змінні або токени дизайну з вкладки форматів, щоб підтримувати кольори узгодженими між вашими компонентами.

Best Practice

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

Additional Resources

WCAG 2.2 – Контраст (Мінімум)
Documentation
Модуль кольорів CSS рівня 4
Documentation
MDN – Значення <color>
Documentation
Колориметрія CIE (XYZ/LAB)
Documentation

Other Tools