Цвета в CSS: форматы hex, rgb, hsl, прозрачность и currentColor

Цвет в CSS — это не просто «красный» или «синий», а конкретный способ описания оттенка, который браузер сможет отобразить. У каждого формата есть своя логика и удобные сценарии применения.

HEX: компактный формат для точных цветов

HEX — это шестнадцатеричная запись цвета в виде #rrggbb, где каждая пара символов отвечает за красный, зелёный и синий каналы (от 00 до FF).

Пример:

.box {
  background-color: #ff5733;
}

Часто используют сокращённую запись из трёх символов, когда пары повторяются: #f53 вместо #ff5533.

Где удобно: когда нужен точный цвет из макета (например, из Figma или Photoshop), где цвета дают именно в HEX. Формат компактный, легко читается и копируется.

RGB: понятная запись через числа

RGB задаёт цвет через три значения: красный, зелёный, синий — в диапазоне от 0 до 255. В CSS это rgb(r, g, b).

Пример:

.box {
  color: rgb(255, 87, 51);
}

Плюсы: формат интуитивно понятен. Если вы знаете, что красный «на максимум», а зелёный и синий «примерно наполовину», это легко записать числами.

HSL: удобно для подбора оттенков и вариаций

HSL описывает цвет через три параметра: оттенок (Hue), насыщенность (Saturation) и светлоту (Lightness). Формат: hsl(h, s%, l%).

Пример:

.box {
  background-color: hsl(16, 100%, 59%);
}

Оттенок задаётся в градусах (0–360°): 0° — красный, 120° — зелёный, 240° — синий. Насыщенность — в процентах (0% — серый, 100% — чистый цвет). Светлота — тоже в процентах (0% — чёрный, 50% — нормальная яркость, 100% — белый).

Где удобно: когда нужно быстро сделать светлее/темнее или подобрать гармоничные вариации одного цвета. Например, взять базовый цвет и менять только lightness, чтобы получить фон, текст и акцент.

Прозрачность: rgba и hsla

Чтобы добавить прозрачность, используют варианты rgba и hsla, где четвёртый параметр — альфа‑канал (прозрачность) от 0 до 1.

Примеры:

.box-transparent {
  background-color: rgba(255, 87, 51, 0.5); /* полупрозрачный красный */
}
 
.box-hsl-alpha {
  border-color: hsla(16, 100%, 59%, 0.3);   /* полупрозрачный оттенок из HSL */
}

Важно: обычный rgb или hsl не поддерживают прозрачность. Если нужна полупрозрачность — берите rgba или hsla.

currentColor: цвет, который «подхватывает» цвет текста

currentColor — это специальное значение, которое означает «такой же цвет, как у текста элемента». Оно удобно, когда иконки, рамки или декоративные элементы должны совпадать с цветом текста.

Пример:

a {
  color: #333;
  border-bottom: 2px solid currentColor; /* линия будет тёмно‑серой */
}
 
svg.icon {
  fill: currentColor; /* иконка тоже станет тёмно‑серой */
}

Зачем это нужно: если вы позже поменяете цвет текста в одном месте, все элементы с currentColor автоматически подстроятся. Это уменьшает дублирование и упрощает поддержку стилей.

Как выбирать формат на практике

• HEX — когда нужен точный цвет из дизайна и важна компактность.
• RGB — когда удобнее оперировать числами и вы не планируете активно менять оттенки.
• HSL — когда нужно варьировать светлоту и насыщенность, делать палитры и подбирать сочетания.
• rgba/hsla — когда нужна прозрачность.
• currentColor — для иконок, рамок и декоративных деталей, которые должны следовать цвету текста.

Небольшой пример: связка форматов в одном компоненте

Допустим, у нас есть карточка с заголовком, текстом и кнопкой. Можно сделать так:

.card {
  color: #222;                  /* тёмный текст (HEX) */
  border: 1px solid currentColor; /* рамка под цвет текста */
}
 
.card h2 {
  color: hsl(210, 70%, 40%);    /* насыщенный синий заголовок (HSL) */
}
 
.card p {
  opacity: 0.9;                 /* лёгкая прозрачность текста */
}
 
.btn {
  background-color: rgba(75, 0, 130, 0.8); /* тёмно‑фиолетовый с прозрачностью */
  color: white;
}

Такой подход позволяет держать палитру гибкой: currentColor связывает рамку и текст, HSL помогает подобрать выразительный заголовок, а rgba даёт нужную прозрачность для кнопки.