HEX, RGB, HSL: розуміння веб-кольорових кодів

Ви редагуєте сайт і бачите #FF5733 у CSS. Або дизайнер надсилає вам rgb(255, 87, 51). Або інструмент дизайну показує колір як hsl(11, 100%, 60%). Усі вони описують абсолютно однаковий колір — яскравий червоно-помаранчевий — але в трьох різних форматах.

Якщо вас колись бентежили веб-кольорові коди, цей посібник прояснить ситуацію за п'ять хвилин.

Як працюють цифрові кольори

Кожен колір на вашому екрані створюється змішуванням трьох основних кольорів світла: Червоного, Зеленого та Синього. Це кольорова модель RGB. Варіюючи інтенсивність кожного каналу від нуля (вимкнено) до максимуму (повна яскравість), можна створити будь-який із приблизно 16,7 мільйона кольорів, які може відображати стандартний монітор.

• Червоний 255, Зелений 0, Синій 0 = чистий червоний
• Червоний 0, Зелений 255, Синій 0 = чистий зелений
• Червоний 0, Зелений 0, Синій 255 = чистий синій
• Червоний 255, Зелений 255, Синій 255 = білий (усі канали на максимумі)
• Червоний 0, Зелений 0, Синій 0 = чорний (усі канали вимкнено)
• Червоний 255, Зелений 255, Синій 0 = жовтий (червоний + зелений)

Кожен кольоровий формат, що використовується у вебі, — це просто інший спосіб вираження цих значень каналів.

HEX-кольори

Як вони виглядають

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Як вони працюють

HEX-кольоровий код — це шестисимвольний рядок, що починається зі знаку решітки. Шість символів поділяються на три пари, кожна з яких представляє кольоровий канал у шістнадцятковій системі (основа 16):

Шістнадцяткова система використовує цифри 0-9 та літери A-F, де A=10, B=11, C=12, D=13, E=14, F=15. Тому FF у шістнадцятковій дорівнює 255 у десятковій (15 × 16 + 15 = 255).

Розбір #FF5733:

• FF = Червоний 255 (максимум)
• 57 = Зелений 87
• 33 = Синій 51

Це дає яскравий червоно-помаранчевий колір.

Скорочений запис

Коли кожна пара має два однакові символи, можна використовувати тризначне скорочення:

• #FF0000 можна записати як #F00
• #3366FF можна записати як #36F
• #000000 можна записати як #000

RGB-кольори

Як вони виглядають

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Як вони працюють

Нотація RGB безпосередньо вказує значення каналів червоного, зеленого та синього як десяткові числа від 0 до 255. Це найінтуїтивніший формат, оскільки числа безпосередньо відповідають інтенсивності кожного каналу світла.

rgb(255, 87, 51) означає:

• Червоний: 255 (максимум)
• Зелений: 87 (приблизно третина)
• Синій: 51 (приблизно п'ята частина)

RGBA: додавання прозорості

RGBA додає четверте значення для непрозорості (альфа), в діапазоні від 0 (повністю прозорий) до 1 (повністю непрозорий):

rgba(255, 87, 51, 0.5)   /* 50% прозорий */
rgba(0, 0, 0, 0.8)        /* 80% непрозорий чорний */

Це корисно для оверлеїв, тіней та будь-якого елемента дизайну, що має показувати вміст позаду нього.

HSL-кольори

Як вони виглядають

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Як вони працюють

HSL розшифровується як Відтінок (Hue), Насиченість (Saturation), Світлість (Lightness). Замість того щоб думати в термінах змішування каналів червоного/зеленого/синього, HSL описує колір так, як люди природно про нього думають.

Відтінок — сам колір, виражений як градус на кольоровому колі (0-360):

• 0° / 360° = Червоний
• 60° = Жовтий
• 120° = Зелений
• 180° = Блакитний
• 240° = Синій
• 300° = Пурпуровий

Насиченість — наскільки яскравий колір, від 0% (сірий) до 100% (повністю насичений).

Світлість — наскільки світлий або темний колір, від 0% (чорний) до 100% (білий). 50% — "нормальна" світлість.

hsl(11, 100%, 60%) означає:

• Відтінок: 11° (злегка помаранчево-червоний)
• Насиченість: 100% (повністю яскравий)
• Світлість: 60% (злегка світліший за нормальний)

HSLA: додавання прозорості

Як і RGBA, HSLA додає альфа-канал:

hsla(11, 100%, 60%, 0.5)   /* 50% прозорий */

Коли який формат використовувати

Для веб-розробки

HEX — де-факто стандарт. Більшість CSS пишеться з HEX-кодами, оскільки вони компактні та кожен розробник їх знає.

Для дизайн-систем

HSL ідеальний для створення послідовних кольорових палітр. Щоб створити більш світлі та темніші варіанти фірмового кольору, просто регулюйте значення світлості:

• Основний: hsl(210, 80%, 50%)
• Світлий варіант: hsl(210, 80%, 70%)
• Темний варіант: hsl(210, 80%, 30%)

Відтінок і насиченість залишаються незмінними, гарантуючи, що варіанти — це "той самий колір" при різній яскравості.

Для прозорості

Використовуйте RGBA або HSLA, коли потрібні напівпрозорі кольори для оверлеїв, тіней або ефектів скла.

Конвертація між форматами

Вам часто потрібно буде конвертувати між форматами. Дизайнер надсилає значення HSL, але у вашій кодовій базі використовується HEX. Керівництво по бренду вказує RGB, але вам потрібен HSL для створення варіантів.

Математика проста, але нудна при ручному обчисленні. Інструмент конвертера впорається з цим миттєво.

Починайте роботу з кольорами:

• Конвертувати кольорові коди
• Інструмент конвертації кольорів
• Генератор кольорових палітр

Усі інструменти безкоштовні та працюють прямо у вашому браузері.