Перетворення кольору між HEX, RGB і HSL
Опубліковано · Оновлено 2 хв читання
HEX, RGB і HSL описують один і той самий колір трьома способами. Інструмент показує всі три одразу та приймає звичні записи; HSL, округлене до цілого, пояснює розбіжності на один рівень, які видно під час повернення до HEX.
Три записи одного й того самого кольору
Дослідити кольори за замовчуванням показує три форми з попереднім переглядом кольору. Для зеленого #2F4A3F:
| Форма | Результат |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Три кнопки HEX, RGB і HSL на панелі зводять результат до однієї форми, зручної для копіювання як є.
Допустимі записи
| Запис | Приклад | Результат у HEX |
|---|---|---|
| Короткий HEX | #fff | #ffffff |
| HEX із прозорістю | #2F4A3F80 | #2f4a3f80 |
| RGB із комами | rgb(47, 74, 63) | #2f4a3f |
| RGB із пробілами | rgb(47 74 63) | #2f4a3f |
| RGB у відсотках | rgb(100%, 0%, 0%) | #ff0000 |
| HSL із пробілами | hsl(156 22% 24%) | #304b40 |
Назви кольорів на кшталт «rouge» і канали поза діапазоном від 0 до 255, наприклад rgb(300, 0, 0), відхиляються з повідомленням, що перелічує допустимі записи.
Прозорість
Прозорість записується в HEX вісьмома цифрами або після похилої риски з пробілами. Колір rgb(47 74 63 / 50%) дає #2f4a3f80 у HEX і rgba(47, 74, 63, 0.5) у RGB. І навпаки, #2F4A3F80 дає непрозорість 0,502, бо 80 у шістнадцятковій системі дорівнює 128 з 255.
Чому зворотне перетворення змінює значення на один рівень
HSL показується цілими числами: відтінок у градусах, насиченість і яскравість у відсотках. Тому повернення з HSL до HEX потрапляє на сусідній колір, а не на початковий.
| Початковий | Показане HSL | Повернення до HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Розбіжність становить один рівень на кожному каналі, невидимий оку. Для дизайн-токена чи бренду зберігайте початковий HEX як еталон і не пропускайте колір знову через HSL.
Сірі кольори
У сірого нульова насиченість, а відтінок не має значення: #808080 дає rgb(128, 128, 128) і hsl(0, 0%, 50%).
Чого інструмент не вимірює
Перетворення формату нічого не говорить про читабельність. Інструмент не обчислює контраст між текстом і тлом: перевірте його окремо перед публікацією. Випадок QR-коду, де контраст визначає зчитуваність, розібрано в посібнику Як створити QR-код, який зчитується з першого разу.
Перевірка перетворення
- Вставте колір у поле: попередній перегляд має відповідати очікуванням.
- Скопіюйте форму, яку вимагає ваша система.
- Щоб зберегти точний колір, зберігайте HEX або RGB, а не HSL.