HSL — зручний спосіб обрати колір, а RGB — те, що фактично споживають екрани, canvas API та код зображень. Цей конвертер перетворює будь-яку трійку hue, saturation і lightness у точні канали 0–255.
Як працює конвертація HSL у RGB
- Перетвори S і L у дроби та обчисли хрому C = (1 − |2L − 1|) × S.
- Поділи hue на 60, щоб знайти його сегмент на кольоровому колі, і обчисли проміжне значення X = C × (1 − |(H/60 mod 2) − 1|).
- Признач параметри C, X і 0 слотам R, G і B відповідно до того сегмента.
- Додай зсув світлості L − C/2 до всіх трьох каналів і помнож результат на 255.
Приклад роботи
Результат точний до остаточного округлення до цілих каналів. Дробові значення hue або saturation підтримуються і просто округляться до найближчого RGB-триплету.
HSL і RGB пояснено
Що таке HSL?
HSL розбиває колір на відтінок (0–360° на колі), насиченість (наскільки яскравий/кольоровий, 0–100%) і світлість (наскільки світлий, 0–100%). Оскільки кожна частина відповідає тому, як люди описують колір, HSL — найзручніший формат для створення відтінків, тонів і узгоджених палітр — вручну або в коді.
- Синтаксис:
- hsl(H, S%, L%)
- Діапазон:
- 0–360°, 0–100%, 0–100%
- Краще підходить для:
- палітри, відтінки й тонування, теми
Що таке RGB?
RGB описує колір трьома каналами світла — червоний, зелений і синій — кожен від 0 до 255. Це відображає, як працюють екрани: усі три на 255 дають білий, всі на 0 — чорний. RGB підходить, коли треба рахувати з кольором (анімація одного каналу, змішування в коді), а rgba() додає прозорість.
- Синтаксис:
- rgb(R, G, B)
- Діапазон:
- 0–255 для кожного каналу
- Краще підходить для:
- код, canvas, прозорість з rgba()
Таблиця відповідностей HSL → RGB
Найпоширеніші CSS-кольори, конвертовані з HSL у RGB.
| Колір | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |