Коды цветов

Как задавать цвета в HTML и CSS

Код цвета описывает, какой оттенок браузер должен показать для текста, фона, границы или другого элемента. В современном HTML цвет обычно задают через CSS-свойства color, background-color и border-color.

HEX, RGB и HSL: в чём разница

Пример цвета фона и текста

.card {
  color: #ffffff;
  background-color: #0a7d6b;
  border: 1px solid rgb(10 125 107);
}

Одинаковый цвет можно записать разными способами. Браузер преобразует их к своей внутренней модели, поэтому выбор формата зависит прежде всего от удобства чтения и редактирования кода.

Что означает шестнадцатеричный код

HEX-цвет состоит из знака # и трёх пар символов: RR отвечает за красный канал, GG - за зелёный, BB - за синий. Каждая пара принимает значение от 00 до FF. Поэтому #FF0000 даёт максимум красного и ноль зелёного и синего.

Название цвета удобно читать, но оно не всегда предсказуемо: darkgray светлее gray. Для точной передачи оттенка чаще используют числовой код.

Прозрачность цвета

К шестизначному HEX можно добавить четвёртую пару - альфа-канал: #0A7D6B80 означает примерно 50% непрозрачности. Современный синтаксис RGB и HSL использует слеш: rgb(10 125 107 / 50%) и hsl(171 85% 26% / 50%).