Color Picker & Converter

Інструмент вибору та конвертації кольорів

Обирайте візуально або вставляйте будь-яке значення — HEX, RGB, HSL, OKLCH і OKLAB залишаються синхронізованими. Включає перевірку контрасту WCAG 2.2 і генератор палітри на основі OKLCH. Працює повністю у вашому браузері.

Інструмент вибору та конвертації кольорів — TL;DR

Обирайте візуально або вставляйте будь-яке значення — HEX, RGB, HSL, OKLCH і OKLAB залишаються синхронізованими. Включає перевірку контрасту WCAG 2.2 і генератор палітри на основі OKLCH. Працює повністю у вашому браузері.

Вставте ваше hex-значення (наприклад, #ff5722) у поле HEX — рядок RGB оновиться миттєво. Аналогічно, вставте rgb(255 87 34) у поле RGB, і HEX, HSL, OKLCH та OKLAB синхронізуються. Конвертація двостороння у всіх підтримуваних форматах.

OKLCH — це колірний простір CSS Color Module Level 4, який використовує перцептивну яскравість (L), кольоровість (C) і відтінок (h) — як HSL, але перцептивно рівномірний. Два кольори OKLCH з однаковим значенням L виглядають однаково яскравими, навіть при різних відтінках. Це робить дизайн-токени, згенеровані палітри та доступні колірні градації значно передбачуванішими, ніж HSL. Усі сучасні браузери (Chrome 111+, Safari 15.4+, Firefox 113+) його підтримують.

Значення кольорів ніколи не залишають ваш пристрій. Відкрийте DevTools → Network, і ви побачите нуль вихідних запитів під час конвертації, вибору, генерації палітри або перевірки контрасту.

HEX
RGB
HSL
OKLCH
OKLAB
Іменований

Палітра

Контраст WCAG 2.2

Текст
Фон
—
Попередній перегляд
Зразок великого заголовка
Зразок основного тексту — швидка коричнева лисиця стрибає через ледачого пса.

Створено для реальних робочих процесів

Від дизайн-систем до аудитів доступності — кожен формат і перевірка, що вам потрібні, в одному місці.

Шість колірних просторів

Двостороння конвертація між HEX (3 / 4 / 6 / 8 цифр), RGB(A), HSL(A), OKLCH, OKLAB та іменованими кольорами CSS. Вихідні рядки відповідають синтаксису CSS Color Module Level 4 — вставляйте їх безпосередньо у свої стилі.

Перевірка контрасту WCAG 2.2

Перегляньте коефіцієнт контрасту між будь-якими двома кольорами з позначками pass/fail для AA (4.5 : 1) і AAA (7 : 1) одним кліком, для звичайного та великого тексту. Обчислення відповідає еталонному алгоритму W3C: лінеаризація sRGB, відносна яскравість, потім (L1+0.05)/(L2+0.05).

EyeDropper — взяти будь-який піксель

Натисніть піпетку, щоб взяти будь-який колір з екрана — макети, скріншоти, фото, навіть інші вкладки браузера. Використовує нативний EyeDropper API у браузерах на Chromium.

Палітра на основі OKLCH

Генеруйте 9-крокові відтінки й тіні плюс комплементарні, тріадні й аналогові гармонії — отримані в OKLCH, тож кожен крок перцептивно рівномірно розподілений (на відміну від HSL, де яскравість змінюється непередбачувано).

Конфіденційність за дизайном

Кожна конвертація виконується на JavaScript на вашому пристрої. Нічого не завантажується, не логується й не надсилається третім сторонам — відкрийте DevTools → Network, щоб переконатися самостійно.

Створено для швидкості

Чистий JavaScript, без рантайму фреймворку. Холодне завантаження менше 50 КБ у gzip; конвертації та генерація палітри завершуються менш ніж за мілісекунду на п'ятирічному ноутбуці.

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

Чотири способи почати, кожен формат синхронізовано.

  1. 1

    Обирайте візуально

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

  2. 2

    Вставте будь-яке значення

    Вставте HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) або навіть іменований колір CSS (tomato) у відповідне поле — піпетка та інші формати синхронізуються.

  3. 3

    Беріть колір піпеткою

    Натисніть кнопку піпетки, щоб захопити будь-який піксель на екрані — іншу вкладку, скріншот, фото, іконку. Використовує нативний EyeDropper API у Chrome, Edge і Opera.

  4. 4

    Копіюйте або перевіряйте контраст

    Натисніть значок копіювання поряд із будь-яким форматом, щоб помістити його в буфер обміну. Або прокрутіть до розділу контрасту WCAG 2.2, щоб перевірити, чи проходить ваше поєднання тексту та фону AA або AAA для звичайного та великого тексту.

Створено для дизайнерів, розробників і аудиторів доступності

інструмент кольору, що підходить для чотирьох поширених робочих процесів.

Створення токенів дизайн-системи

Конвертуйте HEX-значення бренду в OKLCH, щоб кожен відтінок у вашій градації токенів мав однаковий перцептивний крок яскравості. Вставляйте вихід OKLCH безпосередньо у ваш CSS — препроцесор не потрібен.

Аудити доступності WCAG

Введіть пари тексту та фону і прочитайте коефіцієнт контрасту плюс позначки AA / AAA. Виявляйте невдалі поєднання до релізу — відповідає мандатованим W3C порогам 4.5 : 1 для звичайного / 7 : 1 для покращеного.

Конвертація CSS для фронтенду

Маєте HEX з макета дизайнера, але потрібен HSL для конфігурації Tailwind або OKLCH для сучасного стилю? Вставте раз — копіюйте у будь-якому форматі. Вихідні рядки — це валідний синтаксис CSS Color Module Level 4.

Дослідження палітри

Оберіть базовий колір і миттєво побачте дев'ять перцептивно розподілених відтінків і тіней плюс комплементарні, тріадні й аналогові гармонії — згенеровані в OKLCH, тож кожен крок виглядає однаково яскравим.

100% приватно — працює у вашому браузері

Значення кольорів ніколи не залишають ваш пристрій. Відкрийте DevTools → Network, і ви побачите нуль вихідних запитів під час конвертації, вибору, генерації палітри або перевірки контрасту.

  • Кожна конвертація (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) виконується як JavaScript на вашій машині — формули видно у вихідному коді сторінки.
  • EyeDropper API повертає лише кольори, на які ви явно натиснули; браузер контролює дозвіл і ніколи не дає сторінці бачити довільні пікселі.
  • Без входу, без телеметрії значень кольорів, без сторонніх API кольорів. Сайт відповідає GDPR за замовчуванням.

Пов'язані гайди

Відібрані вручну посібники для дизайнерів, розробників і команд доступності.

Часті питання

Як перетворити HEX на RGB?

Вставте ваше hex-значення (наприклад, #ff5722) у поле HEX — рядок RGB оновиться миттєво. Аналогічно, вставте rgb(255 87 34) у поле RGB, і HEX, HSL, OKLCH та OKLAB синхронізуються. Конвертація двостороння у всіх підтримуваних форматах.

Що таке OKLCH і навіщо його використовувати?

OKLCH — це колірний простір CSS Color Module Level 4, який використовує перцептивну яскравість (L), кольоровість (C) і відтінок (h) — як HSL, але перцептивно рівномірний. Два кольори OKLCH з однаковим значенням L виглядають однаково яскравими, навіть при різних відтінках. Це робить дизайн-токени, згенеровані палітри та доступні колірні градації значно передбачуванішими, ніж HSL. Усі сучасні браузери (Chrome 111+, Safari 15.4+, Firefox 113+) його підтримують.

Чи надійний результат перевірки контрасту WCAG?

Так. Ми використовуємо алгоритм з WCAG 2.2 §1.4.3: лінеаризуємо кожен канал sRGB, обчислюємо відносну яскравість (0.2126·R + 0.7152·G + 0.0722·B), потім (L_lighter + 0.05) / (L_darker + 0.05). AA проходить при 4.5 : 1 для звичайного тексту і 3 : 1 для великого (18 пт+ або 14 пт+ жирний). AAA проходить при 7 : 1 і 4.5 : 1 відповідно.

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

Так — натисніть кнопку Піпетка, щоб запустити вбудований EyeDropper API браузера. Можна взяти будь-який піксель будь-де на екрані: іншу вкладку браузера, дизайн у Figma, кадр відео, навіть скріншот. Наразі підтримується в Chrome, Edge і Opera; Firefox і Safari витончено повертаються до запасного варіанту (кнопка вимкнена).

Чи надсилається щось на ваш сервер?

Ні. Піпетка, кожна конвертація, генератор палітри та перевірка контрасту виконуються у вашому браузері. Жодні значення кольорів, зразки зображень або текст ніколи не передаються. Ви можете відкрити DevTools → Network і переконатися, що під час використання немає жодних вихідних запитів.