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

Конвертуйте між HEX, RGB, HSL, HSV та CMYK. Живий попередній перегляд. Перевірка контрасту WCAG для доступності. Нічого не залишає ваш браузер.

Як працює Конвертер кольорів

Конвертер кольорів миттєво перекладає будь-який колір між форматами HEX, RGB, HSL, HSV та CMYK під час введення. Він також виконує перевірку контрасту WCAG між будь-якими двома вибраними кольорами, показуючи коефіцієнт контрасту та результати проходження/провалу AA/AAA для звичайного тексту, великого тексту та компонентів UI. Усі обчислення відбуваються у браузері без відправки даних будь-куди; ніщо з введеного не покидає пристрій.

Розуміння того, як один і той самий колір виглядає в різних колірних моделях, корисне при переданні дизайну. Дизайнер може вказати фірмовий колір як HEX #1A4F8C; розробнику CSS потрібен еквівалент HSL для тематизації; команда друку потребує розбивки CMYK. Цей інструмент виконує конвертацію у всіх напрямках одночасно, щоб ніколи не доводилося запускати кілька окремих конвертерів.

Автор: Bastien Sulyan

Конвертер кольорів: покрокова інструкція

Введіть значення HEX, клацніть кольоровий зразок або введіть значення RGB, HSL, HSV чи CMYK у відповідні поля.
Усі інші формати представлення оновлюються миттєво, щоб показати еквівалентний колір.
Для перевірки контрасту виберіть колір переднього плану та колір тла за допомогою двох кольорових вибирачів.
Прочитайте коефіцієнт контрасту WCAG та значки проходження/провалу для рівнів відповідності AA та AAA.
Скопіюйте будь-яке значення кольору за допомогою іконки копіювання поруч із кожним полем.

Поширені сценарії використання

UI-дизайнер конвертує фірмовий HEX-код у HSL для написання власної CSS-властивості для системи тематизації.
Веб-розробник перевіряє коефіцієнт контрасту між кольором тексту та фоном перед відправкою компонента, щоб підтвердити відповідність WCAG AA.
Дизайнер друку отримує HEX-колір веб-сторінки і потребує еквівалента CMYK для відповідності у друкованому буклеті.
Розробник потребує розбивки RGB дизайн-токену для передачі значень окремих каналів функції малювання canvas.

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

Чи підтримує інструмент значення альфа (прозорість)?

Поточний конвертер працює з повністю непрозорими кольорами (альфа = 1). HEXA (8-значний hex) та RGBA ще не в межах scope. Для непрозорості встановлюйте альфа-канал у CSS окремо за допомогою нотацій rgba() або oklch().

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

Ні. Конвертація кольорів є чистою арифметикою (ремапінг каналів і масштабування діапазонів), що виконується повністю в JavaScript-двигуні браузера. Ніщо з введеного тут не досягає жодного сервера або зовнішнього сервісу.

Які рівні контрасту WCAG підтримує перевірка?

Інструмент звітує відповідно до критеріїв успіху WCAG 2.1: AA вимагає мінімального коефіцієнту контрасту 4,5:1 для звичайного тексту (нижче 18pt або 14pt жирного) та 3:1 для великого тексту та компонентів UI. AAA вимагає 7:1 для звичайного тексту та 4,5:1 для великого тексту.

Чому значення CMYK відрізняються між цим інструментом та професійним програмним забезпеченням для дизайну?

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

Чи можна конвертувати CSS-назву кольору, наприклад 'cornflowerblue', тут?

Імена кольорів CSS не вводяться безпосередньо в поля конвертера. Щоб конвертувати іменований колір, спочатку знайдіть його HEX-значення в довіднику CSS (cornflowerblue є #6495ED), потім вставте той HEX у поле HEX, щоб побачити всі інші формати.

Чи працює інструмент офлайн після завантаження сторінки?

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

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

Тримайте все локально, досліджуйте додаткові інструменти.

Усі інструменти розробника