У CSS один і той самий колір можна записати щонайменше трьома різними способами, і кожен з них зручний для своєї задачі — від дизайну до анімації прозорості.
HEX: компактний запис для копіювання
Шістнадцятковий запис на кшталт #FF5733 кодує три канали — червоний, зелений, синій — по два символи на кожен. Це найкомпактніший формат, зручний для копіювання з дизайн-макетів, але майже нечитабельний для людини: складно на око зрозуміти, який відтінок ховається за набором цифр.
RGB: прямий доступ до каналів
rgb(255, 87, 51) записує ті самі три канали десятковими числами від 0 до 255. Це зручно, коли потрібно програмно змінювати окремий канал, наприклад плавно збільшувати червоний у JavaScript-анімації.
HSL: інтуїтивний підбір відтінку
HSL описує колір через відтінок (hue, 0–360°), насиченість і яскравість. Це найзручніший формат для ручного підбору кольору: щоб отримати темніший варіант того самого відтінку, достатньо зменшити тільки яскравість, не перераховуючи всі три канали RGB заново.
Альфа-канал для прозорості
Формати rgba() і hsla() додають четвертий параметр — прозорість від 0 до 1. Сучасний CSS дозволяє задавати прозорість і в HEX через два додаткові символи в кінці, наприклад #FF573380.
Навіщо це потрібно
- Швидко конвертувати колір із дизайн-макета в потрібний CSS-формат.
- Підібрати темніший чи світліший відтінок того самого кольору через HSL.
- Додати прозорість до кольору, не змінюючи його базовий відтінок.
OKLCH та сучасні колірні простори
CSS Color Level 4 додає нові колірні простори, такі як oklch() і oklab(), які точніше відображають те, як людське око сприймає яскравість і насиченість, ніж застарілий HSL. У OKLCH зміна яскравості (L) не спотворює сприйняту насиченість кольору, тому плавні переходи й палітри виглядають рівномірнішими, ніж при роботі з HSL чи RGB. Ці простори також покривають ширшу гаму кольорів, ніж традиційний sRGB, що особливо помітно на сучасних дисплеях із розширеним кольоровим охопленням.