Цвет и форматы записи: hex, rgb, hsl

Разбираем, как задавать цвет в CSS четырьмя способами и почему форматов несколько.

Свойство color задаёт цвет текста, а сам цвет можно записать словом, в hex, в rgb или в hsl — это разные способы назвать один и тот же оттенок.

Ключевые слова

Самый простой способ — английское название цвета. Их около 140: red, blue, teal, tomato, rebeccapurple и другие.

h1 { color: tomato; }
p  { color: dimgray; }

Удобно для черновиков и наглядно в обучении, но точные оттенки бренда так не задашь — слов на всё не хватит.

Шестнадцатеричный формат (hex)

Самый частый формат на практике. Цвет — это решётка и шесть символов: по две цифры на красный, зелёный и синий каналы. Каждая пара — число от 00 до FF (от 0 до 255).

p {
  color: #1a73e8;   /* синий */
  background: #ffffff; /* белый */
}

Запомните три опорные точки: #000000 — чёрный, #ffffff — белый, #ff0000 — чистый красный. Если в каждой паре символы одинаковые, hex можно сократить втрое: #ffcc00 равно #fc0.

Формат rgb и прозрачность

Тот же набор красный-зелёный-синий, но числами от 0 до 255 явно. Главное преимущество — возможность задать прозрачность через rgba (четвёртое число от 0 до 1, где 0 — полностью прозрачно, 1 — непрозрачно).

.overlay {
  color: rgb(26, 115, 232);
  background: rgba(0, 0, 0, 0.5); /* чёрный с 50% прозрачности */
}

Полупрозрачный чёрный фон — классический приём для затемнения картинки под текстом: видно и фото, и буквы поверх.

Формат hsl — самый «человечный»

HSL задаёт цвет тремя осмысленными числами: Hue (тон, угол 0–360 на цветовом круге), Saturation (насыщенность, %), Lightness (светлота, %).

.btn {
  background: hsl(210, 90%, 50%); /* насыщенный синий */
}

.btn-light {
  background: hsl(210, 90%, 80%); /* тот же тон, но светлее */
}

Прелесть HSL в том, что для оттенков одного цвета достаточно менять светлоту, не трогая тон. Сделать кнопку светлее при наведении — это +10% к L, и цвет остаётся «тем же», только бледнее. С hex так на глаз не подберёшь.

Какой формат выбрать

Все четыре способа равноправны — браузер понимает любой. Выбор зависит от задачи и привычки команды.

Итог

• Цвет задают словом, в hex (#rrggbb), в rgb/rgba или в hsl.
• Прозрачность даёт rgba(r, g, b, a), где a — от 0 до 1.
• HSL удобнее для подбора оттенков: меняете светлоту, оставляя тон.