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

Конвертер кольорів є безплатним інструментом, який перетворює колір у форматі HEX, HEX Alpha, RGB, RGBA, HSV, HSL або HSLA на еквівалентні значення в кількох колірних форматах.

Які формати кольорів можна конвертувати?

Введи значення у форматі HEX, HEX Alpha, RGB, RGBA, HSV, HSL або HSLA, щоб отримати відповідні значення в усіх підтримуваних форматах. Це зручно, коли специфікація дизайну, таблиця стилів або сторонній API подає той самий колір в іншому вигляді.

• HEX представляє червоний, зелений і синій канали шістнадцятковими парами, зазвичай у формі #RRGGBB.
• HEX Альфа додає канал непрозорості. У сучасному синтаксисі CSS зазвичай використовується форма #RRGGBBAA.
• RGB задає значення червоного, зеленого й синього каналів, зазвичай у діапазоні від 0 до 255.
• RGBA додає до RGB альфа-прозорість.
• HSV описує тон, насиченість і значення. Цей формат часто використовують в інструментах вибору кольору, але він не є стандартною колірною функцією CSS.
• HSL описує тон, насиченість і світлість. CSS підтримує HSL безпосередньо.
• HSLA є форматом HSL з альфа-значенням.

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

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

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

1. Точно скопіюй вихідне значення разом із початковим символом решітки, комами, дужками, знаками відсотка або альфа-компонентом, якщо вони потрібні.
2. Встав його в поле Колір.
3. Переглянь еквівалентні значення в полях HEX, HEX Альфа, RGB, RGBA, HSV, HSL і HSLA.
4. Вибери підтримуваний формат кольору, який приймає цільова система. Для правил CSS часто використовують HEX, RGB, RGBA, HSL і HSLA. HSV частіше застосовують в інтерфейсах редагування та під час обчислень із кольорами.

Конвертування виконується на сервері. Введені дані передаються на сервер через HTTPS і не зберігаються. Окремий колір рідко буває конфіденційним, але перед надсиланням у будь-який онлайн-сервіс варто перевірити, чи не є закритою інформацією ще не оприлюднена палітра або набір дизайн-токенів.

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

Як читати конвертовані значення?

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

У шестизначному HEX перша пара позначає червоний канал, друга зелений, а третя синій. Наприклад, #336699 містить шістнадцяткові значення каналів 33, 66 і 99, яким відповідають десяткові значення RGB 51, 102 і 153.

Тон зазвичай задають як кут на колірному колі. Насиченість, світлість або значення зазвичай виражають у відсотках. Світлість у HSL і значення у HSV обчислюються по-різному, тому їхні відсотки не слід порівнювати так, ніби вони вимірюють ту саму властивість.

Альфа-канал описує непрозорість. Для повністю непрозорого кольору формат з альфа-каналом не потрібен, але для напівпрозорого він необхідний. Якщо скопіювати колір RGBA або HSLA у звичайний RGB, HSL чи шестизначний HEX, у цільовому форматі не буде місця для збереження альфа-каналу.

Цей конвертер не заявлений як валідатор синтаксису з докладними діагностичними повідомленнями. Не покладайся на нього для визначення конкретного неправильного символу у введеному значенні. До поширених синтаксичних помилок належать відсутній символ решітки в HEX, непарні дужки, пропущені знаки відсотка, альфа-значення поза очікуваним діапазоном або змішування правил запису каналів HSL і RGB.

Приклади конвертування кольорів

Простий приклад показує зв'язок між HEX, RGB, HSL і HSV. Чистий червоний колір можна записати в таких еквівалентних формах.

• Значення HEX #ff0000
• Еквівалент RGB rgb(255, 0, 0)
• Еквівалент HSL hsl(0, 100%, 50%)
• Еквівалент HSV hsv(0, 100%, 100%)

Для менш насиченого кольору #336699 еквівалентним значенням буде rgb(51, 102, 153). У форматі HSL це hsl(210, 50%, 40%), а у форматі HSV тон становить 210 градусів, насиченість близько 66,7%, а значення 60%. Інтерфейс може округлювати десяткові значення або використовувати інші відступи, не змінюючи практичного змісту.

Прозорість можна показати ще одним простим прикладом. rgba(255, 0, 0, 0.5) і hsla(0, 100%, 50%, 0.5) описують червоний колір із половинною непрозорістю. За поширеною восьмизначною конвенцією CSS HEX відповідне значення має вигляд #ff000080, де 80 є квантованим байтом альфа-каналу.

Коли варто конвертувати колір?

Конвертувати колір варто, якщо цільова програма потребує іншого формату запису або інше представлення спрощує налагодження. Типові випадки: перенесення значення з Figma до користувацької властивості CSS, перевірка значення RGBA з Chrome DevTools, підготовка полів кольору для даних API або перегляд даних сторонньої теми перед розгортанням.

Конвертування зазвичай не потрібне, якщо цільова система вже підтримує наявний формат кольору. Немає особливої користі в перетворенні шестизначного HEX на RGB лише заради машинозчитуваного CSS, а багаторазове конвертування туди й назад може спричинити округлення значень HSL або HSV. Так само не додавай альфа-канал, якщо всі кольори точно повністю непрозорі.

Якщо потрібно вибрати колір візуально, а не перетворити відоме значення, скористайся інструментом Вибір кольору. Конвертування також не замінює перевірку контрастності, симуляцію порушень колірного сприйняття чи керування колірними профілями. Еквівалентні числові значення не доводять, що текст на передньому плані відповідає вимогам WCAG щодо контрастності.

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

Чи можна вводити назви кольорів із CSS?

Ні. У переліку підтримуваних форматів є лише HEX, HEX Alpha, RGB, RGBA, HSV, HSL і HSLA, тому такі назви, як red, rebeccapurple або transparent, не вказані як допустимі вхідні дані. Спочатку перетвори назву кольору на числове значення CSS, а потім введи його.

Чи підтримуються тризначні значення HEX?

HEX входить до переліку допустимих форматів, але підтримувані довжини HEX не задокументовані. Щоб отримати передбачуваний результат, розгорни скорочений запис, наприклад #369, до #336699. Те саме стосується чотиризначного скорочення з альфа-каналом.

Чи можна вставити ціле оголошення CSS замість значення кольору?

Вводь лише значення кольору, а не все оголошення. Наприклад, використовуй #336699 замість color: #336699;, оскільки назва властивості та крапка з комою не є частиною самого кольору. Якщо копіюєш значення з JSON або конфігураційного файла, прибери лапки навколо нього.

Чи збережуться широкий колірний охоплення та дані колірного профілю?

Формати із широким колірним охопленням і вбудовані колірні профілі не вказані як підтримувані. Дані Display P3, Lab, LCH і профілів ICC містять інформацію, яку не можна передати через доступні поля HEX, RGB, HSL і HSV. Якщо потрібне конвертування з урахуванням профілю, використовуй програму з керуванням кольором.

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

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