Конвертер RGB у HSL

Що таке RGB і HSL?

RGB — це модель кольору, яка описує, як екран змішує червоне, зелене та синє світло в адитивному процесі. Кожен канал задається цілим числом від 0 до 255, де 0 означає відсутність світла, а 255 — максимальну інтенсивність. Такий діапазон (256 градацій на канал) виник історично через 8-бітне кодування на піксель. Комбінація трьох каналів дає понад 16,7 мільйонів кольорів у колірному просторі sRGB, який є стандартом для вебу, моніторів і більшості споживчих пристроїв.

HSL — зовсім інша модель, створена для того, щоб людина могла міркувати про колір інтуїтивно. Вона описує:

• Hue (відтінок) — кут на кольоровому колі від 0° до 360°, де 0° — червоний, 120° — зелений, 240° — синій.
• Saturation (насиченість) — від 0% (сірий) до 100% (чистий колір).
• Lightness (світлість) — від 0% (чорний) до 100% (білий), де 50% дає «чистий» колір без додавання білого чи чорного.

Інструмент на цій сторінці приймає саме RGB як вхідні дані — три числа через кому або пробіл — і миттєво обчислює еквівалент у HSL, показуючи також HEX, HSV, CMYK (оцінка для екрану) та LAB. Ви можете редагувати будь-яке поле, і всі інші оновляться автоматично. Усі перетворення відбуваються повністю у вашому браузері; жодні дані не завантажуються на сервер.

Чим ця сторінка відрізняється від інших конвертерів

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

Саме тому дизайнери та розробники обирають HSL для створення колірних палітр, адаптивних тем і варіантів кольорів із контрольованим контрастом. Наприклад, для одного брендового кольору можна згенерувати світлішу версію, просто зменшивши насиченість або збільшивши світлість, — і відтінок залишиться тим самим. У RGB така операція вимагала б складної корекції трьох каналів, і результат часто виглядав би «брудним».

Крім того, сторінка показує одразу п’ять додаткових форматів: HEX (найпоширеніший у веб-розробці), HSV (близький до HSL, але з яскравістю замість світлості), CMYK (оцінний, придатний для попереднього перегляду, але не для професійного друку без калібрування) та LAB (перцепційно більш рівномірний простір). Це дозволяє скопіювати значення в потрібному форматі без додаткових конвертацій.

Як правильно вводити дані та які повідомлення про помилки

Інструмент очікує, що ви введете RGB саме як три цілі числа від 0 до 255, розділені комами або пробілами. Наприклад: 79, 70, 229 або 79 70 229. Якщо ви введете щось некоректне (наприклад, 256, 0, 0 або abc), з’явиться повідомлення: «Введіть RGB як три числа від 0 до 255, наприклад 79, 70, 229». Текст точно такий, як указано в описі, — це не помилка перекладу, а свідома деталь інтерфейсу.

Також можна вводити HSL безпосередньо в поле HSL, щоб конвертувати його назад у RGB. Допустимий формат: відтінок 0–360, потім насиченість і світлість у відсотках. Приклад: 243, 75%, 59%. За некоректного введення з’явиться повідомлення: «Введіть HSL як відтінок 0–360 та два відсотки, наприклад 243, 75%, 59%».

Особливі випадки:

• Якщо ви введете значення LAB або CMYK, яке виходить за межі видимої області RGB (наприклад, насичений жовтий у Lab може мати L* > 100), інструмент автоматично скоригує колір до найближчого відображуваного. При зворотному перетворенні цього скоригованого кольору може виникнути невеликий зсув.
• CMYK є оцінкою на екрані — він не враховує профіль друкарської машини, тому не використовуйте його для фінального друку без перевірки.
• Усі перетворення виконуються локально в JavaScript. Нічого не надсилається на сервер, що забезпечує конфіденційність.

Математика перетворення RGB → HSL

Хоча інструмент робить обчислення сам, варто розуміти загальний алгоритм, щоб передбачати результати. Процес складається з трьох кроків:

1. Нормалізація. Значення R, G, B діляться на 255, отримуючи r, g, b у діапазоні.
2. Визначення мінімуму та максимуму. Знаходимо Cmax = max(r,g,b), Cmin = min(r,g,b), а також різницю Δ = Cmax - Cmin.
3. Обчислення компонентів HSL:
   • Світлість (L): L = (Cmax + Cmin) / 2. Це значення в діапазоні 0–1, потім множиться на 100 для відсотків.
   • Насиченість (S): якщо Δ = 0, то S = 0 (відтінок не визначений). Інакше: S = Δ / (1 - |2L - 1|). Результат теж у діапазоні 0–1 → множиться на 100.
   • Відтінок (H): обчислюється залежно від того, який канал є максимумом:
     • Якщо Cmax = r: H = 60° × ((g - b) / Δ mod 6)
     • Якщо Cmax = g: H = 60° × ((b - r) / Δ + 2)
     • Якщо Cmax = b: H = 60° × ((r - g) / Δ + 4)
   • Якщо H вийшов від’ємним, додаємо 360°, щоб отримати кут у діапазоні 0–360.

Наприклад, для кольору rgb(79, 70, 229) (це фіолетовий):

• Нормалізація: r ≈ 0.310, g ≈ 0.275, b ≈ 0.898
• Cmax = 0.898 (синій), Cmin = 0.275, Δ = 0.624
• L = (0.898 + 0.275)/2 = 0.586 → 58.6%
• S = 0.624 / (1 - |2*0.586 - 1|) = 0.624 / (1 - 0.172) ≈ 0.753 → 75.3%
• H = 60° × ((0.310 - 0.275)/0.624 + 4) ≈ 60° × (0.056 + 4) = 243.4°

Результат: hsl(243.4°, 75.3%, 58.6%) — що збігається з прикладом на сторінці.

Зворотне перетворення (HSL → RGB) теж стандартне і використовує допоміжні функції для кожного каналу.

Чому HSL — не ідеальна модель (і коли це важливо)

HSL чудово підходить для більшості дизайнерських завдань, але має відоме обмеження: вона не перцепційно рівномірна. Це означає, що однаковий числовий крок у світлості чи насиченості може сприйматися по-різному для різних відтінків. Наприклад, синій і жовтий при однаковій світлості 50% виглядають зовсім по-різному яскравими: жовтий здається набагато світлішим. Це тому, що людське око по-різному чутливе до різних довжин хвиль.

Тому для створення колірних шкал у візуалізації даних, де потрібна рівномірна зміна сприйняття, краще використовувати моделі типу LAB або OKLAB. Саме через це інструмент додатково показує значення LAB — ви можете бачити, наскільки колір відхиляється від перцепційної рівномірності.

Також важливо: і RGB, і HSL прив’язані до конкретного колірного охоплення (gamut) пристрою. sRGB — це обмежений простір, який не покриває всі кольори, видимі людиною. Якщо ви конвертуєте значення з LAB або CMYK, які виходять за межі sRGB, інструмент апроксимує колір, «обрізаючи» його до найближчого доступного. Це може призвести до втрати насиченості, особливо в яскравих синіх і зелених тонах.

Практичне застосування у веб-розробці та дизайні

У CSS функції hsl() та hsla() підтримуються всіма сучасними браузерами. Вони дозволяють записувати колір компактно: color: hsl(243, 75%, 59%);. Це особливо зручно, коли потрібно динамічно змінювати колір за допомогою JavaScript — наприклад, регулювати світлість для темної теми:

const style = document.documentElement.style;
style.setProperty('--primary', 'hsl(243, 75%, 59%)');
style.setProperty('--primary-dark', 'hsl(243, 75%, 40%)');

Тут змінюється лише світлість — відтінок і насиченість ті самі. У RGB довелося б перераховувати всі три канали вручну.

Для забезпечення доступності (WCAG) часто потрібно підібрати варіант кольору з достатнім контрастом. HSL дозволяє швидко знайти мінімальну світлість, при якій текст на білому тлі відповідає співвідношенню 4.5:1. Програмно це простіше, ніж працювати з каналами RGB.

Інструмент також стане в нагоді при перекладі кольорів із дизайн-макетів (де часто використовують RGB) у CSS-код. Дизайнери в Figma чи Sketch можуть скопіювати RGB, вставити в конвертер і отримати готовий hsl().

Для кого створено цю сторінку

• UI/UX дизайнери — швидко перетворюють кольори з макетів на HSL для створення доступних палітр.
• Фронтенд-розробники — конвертують дизайн-токени з RGB у HSL для використання в CSS.
• Розробники тем — генерують світлі та темні варіанти брендового кольору, зберігаючи відтінок.
• Дизайнери візуалізації даних — використовують HSL для побудови послідовних колірних шкал (хоча потім можуть перевірити рівномірність через LAB).

Часті запитання (FAQ)

1. Чи можна використовувати значення CMYK з цього конвертера для друку? Ні, вони є лише оцінкою на екрані. Для друку потрібно враховувати профіль конкретної друкарської машини та калібрування монітора.

2. Чому при конвертації з LAB у RGB колір іноді змінюється? Бо LAB може описувати кольори за межами sRGB — інструмент автоматично підганяє їх до найближчого відображуваного. При зворотному перетворенні ви отримаєте вже скоригований колір.

3. Як правильно ввести HSL у поле? Введіть число відтінку (0–360), потім насиченість і світлість зі знаком відсотка, наприклад 243, 75%, 59%. Пробіли необов’язкові, але кома чи пробіл розділяють значення.

4. Чи зберігаються мої дані на сервері? Ні. Усі обчислення виконуються у вашому браузері. Ніякі дані не завантажуються.

5. Чому в HEX іноді відображається 8 символів (наприклад, #4F46E5FF)? Це HEX з альфа-каналом (прозорість). Інструмент показує стандартний 6-символьний HEX без альфи — #4F46E5. Якщо ви бачите 8 символів, можливо, ви скопіювали з іншого джерела; конвертер за замовчуванням працює з непрозорими кольорами.

6. Чи можна вводити значення з десятковими крапками? Для RGB — ні, тільки цілі числа 0–255. Для HSL так, наприклад 243.4, 75.3%, 58.6% — це дозволено, оскільки математика перетворення дає дробові значення.