Конвертер кольорів HEX, RGB і HSL
Переведення кольору з HEX у RGB та HSL з розбором за каналами.
Заповніть поля, і результат автоматично зʼявиться тут.
Перетворює текстовий код sRGB із трьох або шести шістнадцяткових цифр на RGB та HSL. Кожна цифра короткого коду подвоюється: #F0A стає #FF00AA. RGB і розгорнутий HEX зберігають початкові байти; HSL округлюється для виведення. CSS-рядки в усіх мовах мають десяткову крапку, тому їх можна скопіювати у стилі.
Як працює
Формула і логіка
Канали r,g,b — цілі байти від 0 до 255. Для HSL вони діляться на 255: світлота L=(max+min)/2, насиченість S=Δ/(1−|2L−1|) за Δ=max−min>0, тон визначає максимальний канал. За Δ=0 насиченість нульова, а тон умовно записується як 0°. Світлота HSL не є фізичною яскравістю чи оцінкою контрасту. Тон округлюється до градуса, S та L — до двох десяткових знаків відсотка.
Приклад
#2E86DE → rgb(46, 134, 222), округлений CSS hsl(210, 72.73%, 52.55%). #F0A → #FF00AA → rgb(255, 0, 170). Десяткові крапки в hsl() — частина синтаксису CSS.
Поля й одиниці
- Шістнадцятковий код кольору — без одиниці
Як користуватися
- — Введіть HEX як текст: #2E86DE, 2E86DE або #F0A.
- — Прочитайте точні RGB-байти та розгорнутий HEX.
- — Скопіюйте CSS-рядки RGB/HSL; округлений HSL може трохи змінити колір при зворотному перетворенні.
Методика та обмеження
- Методика розрахунку
- Формула і логіка
- Джерело даних або норми
- W3C CSS Color 4: HEX і синтаксис HSL
- Обмеження
- Підтримуються лише непрозорі HEX-коди sRGB із 3/6 цифр. Коди 4/8 цифр з альфа-каналом, введення RGB/HSL, колірні профілі та оцінка доступності контрасту тут не розраховуються.
FAQ
Навіщо потрібен HSL, якщо є RGB?
Бо в ньому зручно міняти колір осмислено. Зробити відтінок світлішим у HSL — це змінити одне число, тоді як у RGB довелося б підбирати всі три канали.
Що означають скорочені HEX-коди?
Запис #F0A розгортається у #FF00AA: кожен знак подвоюється. Це скорочення працює лише тоді, коли в кожному каналі обидва знаки однакові.
Що додає четверта пара знаків?
У CSS коди з чотирьох або восьми цифр містять альфа-канал; 80 означає непрозорість 128/255≈50,2%. Цей інструмент їх не приймає: введення обмежене непрозорими кодами з трьох або шести цифр.
Чому колір на екранах відрізняється?
Через різні кольорові профілі й калібрування. Один і той самий HEX-код на sRGB і на широкому охопленні виглядатиме по-різному — тому для друку й використовують інші системи.