HEX, RGB і HSL — один колір, три записи
Це не різні кольори
HEX, RGB і HSL описують ту саму точку в просторі sRGB, просто різними словами. #3b82f6, rgb(59, 130, 246) і hsl(217, 91%, 60%) — це один синій. Тому переведення між ними не «наближене»: жодної інформації по дорозі не гине.
HEX — це ті самі три канали
Дві цифри на канал, у шістнадцятковому вигляді: 3b — це 59, 82 — 130, f6 — 246. Коротка форма #38f просто дублює кожну цифру, тобто дорівнює #3388ff. Восьмизначна форма #3b82f6cc додає четвертий канал — прозорість.
RGB — скільки якого світла
Три числа від 0 до 255: скільки червоного, зеленого і синього. Формат зручний для машини і незручний для людини: щоб зробити той самий колір трохи світлішим, доводиться рухати всі три числа одночасно.
HSL — той, у якому зручно думати
Відтінок у градусах на колірному колі (0 — червоний, 120 — зелений, 240 — синій), насиченість у відсотках і світлість у відсотках. Саме тому теми оформлення пишуть у HSL: світліший варіант того самого кольору — це просто більша світлість, а решта чисел лишається.
Округлення живе тільки в HSL
Відтінок, насиченість і світлість тут друкуються цілими числами, як їх і пишуть у CSS. Через це зворотне переведення інколи дає сусідній HEX — відхилення на одиницю в каналі, якого око не бачить. HEX і RGB між собою переводяться точно завжди.
Часті питання про формати кольору
Який формат брати в проєкті?
Для змінних теми — HSL: у ньому легко зробити світлішу і темнішу версію того самого кольору. Для значень, які приходять з макета чи від дизайнера, — HEX, бо саме його показують усі редактори. RGB частіше потрібен там, де колір рахує код.
Чому після переведення в HSL і назад змінився HEX?
Через округлення HSL до цілих. Різниця — одиниця-дві в каналі, і на екрані вона не видно. Якщо колір має лишитися бітово тим самим, зберігайте HEX і переводьте з нього, а не по колу.
Як записати прозорість?
Три способи, і всі означають те саме: #3b82f6cc, rgba(59, 130, 246, 0.8), hsla(217, 91%, 60%, 0.8). У HEX прозорість — це дві останні цифри, тобто число від 00 до ff; у функціях — число від 0 до 1.
Чи розуміє інструмент назви кольорів?
Ні, red чи rebeccapurple він не приймає. Іменованих кольорів у CSS 148, це таблиця, а не формат, і сторінка не вдає, що знає її напам'ять. Введіть значення з піпетки або редактора.
Чому пише, який текст читатиметься поверх?
Це відносна яскравість кольору за WCAG 2.1: вище порогу поверх краще лягає темний текст, нижче — світлий. Це підказка, а не перевірка контрасту — точне співвідношення для конкретної пари кольорів рахує калькулятор контрасту.