Цвета

Цвет — первое, что меняют, когда начинают оформлять страницу. В CSS один и тот же цвет можно записать несколькими способами, и в чужом коде встретятся все. Разберём их по очереди.

Цвет текста и фона

Свойство color задаёт цвет текста, background-color — цвет фона элемента:

<style>
  .banner {
    color: white;
    background-color: teal;
  }
</style>
 
<p class="banner">Белый текст на бирюзовом фоне</p>

Фон закрашивает всю ширину абзаца, а не только строку с текстом: абзац — блок во всю доступную ширину.

Названия цветов

В CSS около 140 готовых названий: от простых red и blue до tomato, gold и rebeccapurple. Их удобно использовать в учебных примерах:

<p style="color: tomato;">tomato</p>
<p style="color: seagreen;">seagreen</p>
<p style="color: slateblue;">slateblue</p>

Для дизайна названий мало: точный фирменный цвет так не записать. Для этого есть числовые способы.

Шестнадцатеричный код

Самая частая запись — hex: решётка и шесть символов. Это три пары — доля красного, зелёного и синего от 00 (нет) до ff (максимум). Цифры здесь шестнадцатеричные: после 9 идут буквы от a до f.

<p style="color: #ff0000;">#ff0000 — чистый красный</p>
<p style="color: #7c3aed;">#7c3aed — фиолетовый</p>
<p style="color: #333;">#333 — короткая запись #333333</p>

Такие коды копируют из графических редакторов и палитр.

Функция rgb()

rgb() описывает те же три канала числами от 0 до 255. Её проще читать, чем hex:

<p style="color: rgb(220 38 38);">rgb(220 38 38) — красный</p>
<p style="color: rgb(22 163 74);">rgb(22 163 74) — зелёный</p>

Числа разделяют пробелами. В старом коде встретится запись через запятые — rgb(22, 163, 74), она тоже работает.

Функция hsl()

hsl() описывает цвет так, как о нём думает человек: оттенок (угол на цветовом круге от 0 до 360), насыщенность и светлота в процентах. Чтобы получить светлее или темнее тот же цвет, меняют только последнее число:

<p style="background-color: hsl(210 80% 30%); color: white;">hsl(210 80% 30%)</p>
<p style="background-color: hsl(210 80% 60%);">hsl(210 80% 60%)</p>
<p style="background-color: hsl(210 80% 90%);">hsl(210 80% 90%)</p>

Прозрачность

После косой черты в rgb() и hsl() указывают непрозрачность: 0 — полностью прозрачный, 100% — сплошной. Свойство opacity делает прозрачным весь элемент вместе с текстом:

<style>
  .bg { background-color: rgb(124 58 237 / 20%); }
  .faded { background-color: rgb(124 58 237); color: white; opacity: 0.4; }
</style>
 
<p class="bg">Прозрачный только фон</p>
<p class="faded">Прозрачно всё, включая текст</p>

Частая ошибка

Светло-серый текст на белом фоне выглядит аккуратно, но его трудно читать — особенно на солнце или людям со слабым зрением. Текст должен заметно отличаться от фона по светлоте:

<p style="color: #cccccc;">Этот текст почти не видно.</p>
<p style="color: #52525b;">Этот серый читается хорошо.</p>

Проверить контраст можно в инструментах разработчика браузера: при выборе цвета там показано, достаточно ли он заметен.