Прежде чем применять цвет к тексту, фону или границам, нужно разобраться, какими способами можно указать нужный цвет. Этому посвящена данная лекция. А в следующей мы разберём, к каким свойствам CSS эти цвета применять.

1. Имена цветов

Самый простой способ — написать название цвета по-английски. Подходит для основных цветов.

color: red;
color: blue;
color: green;
color: black;
color: white;

Пример в браузере:

2. HEX-коды (шестнадцатеричные)

Самый популярный способ в вёрстке. Цвет задаётся решёткой # и шестью символами: RRGGBB (красный, зелёный, синий).

color: #FF0000;   /* красный */
color: #00FF00;   /* зелёный */
color: #0000FF;   /* синий */
color: #530899;   /* фиолетовый (как в нашем сайте) */
color: #000000;   /* чёрный */
color: #FFFFFF;   /* белый */

Пример в браузере:

3. RGB (Red, Green, Blue)

Цвет задаётся тремя числами от 0 до 255 — интенсивность красного, зелёного и синего.

color: rgb(255, 0, 0);      /* красный */
color: rgb(0, 255, 0);      /* зелёный */
color: rgb(0, 0, 255);      /* синий */
color: rgb(83, 8, 153);     /* фиолетовый (#530899) */

Пример в браузере:

RGBA — с прозрачностью

Добавляет четвёртое значение — прозрачность (alpha) от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

background-color: rgba(255, 0, 0, 0.3);   /* полупрозрачный красный фон */
background-color: rgba(83, 8, 153, 0.5);  /* полупрозрачный фиолетовый фон */
background-color: rgba(0, 0, 255, 0.1);   /* почти прозрачный синий фон */

Пример в браузере (на белом фоне):

4. HSL (Hue, Saturation, Lightness)

Более интуитивный способ задания цвета. Состоит из трёх компонентов.

Тон (Hue) — от 0 до 360

Это положение цвета на цветовом круге. 0° — красный, 120° — зелёный, 240° — синий, 360° — снова красный.

Насыщенность (Saturation) — от 0% до 100%

Чем выше процент, тем цвет ярче и насыщеннее. При 0% цвет становится серым (оттенки серого).

Светлота (Lightness) — от 0% до 100%

Чем выше процент, тем цвет светлее. 0% — чёрный, 100% — белый. 50% — чистый цвет без добавления чёрного или белого.

Как это понять на примере фиолетового (#530899)

Переведём наш фиолетовый в HSL: hsl(270, 90%, 32%)

• Тон 270° — фиолетовый (между синим 240° и пурпурным 300°)
• Насыщенность 90% — очень насыщенный, яркий
• Светлота 32% — довольно тёмный (ближе к чёрному)

Примеры изменения насыщенности:

Примеры изменения светлоты:

HSLA — с прозрачностью

background-color: hsla(270, 90%, 32%, 0.5);  /* полупрозрачный фиолетовый */

5. Какой способ выбрать?

• Имена цветов — только для прототипов (red, blue, green)
• HEX — стандарт в вёрстке, везде поддерживается, компактный
• RGB/RGBA — удобно, когда нужна прозрачность
• HSL/HSLA — удобно, когда нужно менять тон или насыщенность программно