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 описывает цвет так, как люди естественно о нём думают.

Тон (Hue) — это сам цвет, выраженный в градусах на цветовом круге (0-360):

• 0° / 360° = Красный
• 60° = Жёлтый
• 120° = Зелёный
• 180° = Голубой
• 240° = Синий
• 300° = Пурпурный

Насыщенность (Saturation) — насколько цвет яркий: от 0% (серый) до 100% (полная насыщенность).

Светлота (Lightness) — насколько цвет светлый или тёмный: от 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 для создания вариантов.

Математика проста, но утомительна для ручных вычислений. Инструмент конвертации справляется с этим мгновенно.

Начните работать с цветами:

• Конвертация цветовых кодов
• Color Converter Tool
• Color Palette Generator

Все инструменты бесплатны и работают прямо в вашем браузере.