CSS/Цвет

Цвета могут быть определены для различных объектов:

цвет текста color: black;, цвет фона background-color: white; и цвет границы border-color: gray;.

Например, правило CSS, которое устанавливает для всех элементов h1 белый текст на красном фоне:

h1 {
  color: white;
  background-color: red;
}

Методы спецификации цветов:

• Английские названия, такие как color: white;
• Шестнадцатеричное значение RGB, например color: #ff0000;
• Десятичные RGB значения, например color: rgb(255, 0, 0);
• Десятичные RGBA значения, такие как color: rgba(255, 0, 0, 0.2);
• HSL значение, например color: hsl(120, 100%, 50%);
• HSLA значение, например color: hsla(0, 100%, 50%, 0.5);

Спецификации цвета подробно изложены в следующих разделах.

Если вы установили какой-либо цвет в вашей веб-страницы, вы должны установить как фон и цвет текста для элемента body страницы. Представьте себе, если вы установите цвет текста на чёрный и не установите цвет фона. Пользователь установит цвет текста в жёлтый на чёрном фоне, довольно часто такая комбинация используется для пользователей с ослабленным зрением. Страница отображается с чёрным текстом на их чёрном фоне и непригодна для использования.

Использование английских имён

Определены следующие 16 значений:

• aqua
• black
• blue
• fuchsia
• gray
• green
• lime
• maroon
• navy
• olive
• purple
• red
• silver
• teal
• yellow
• white

CSS не определяет точный оттенок, который следует использовать для именованных цветов. Используйте RGB-значения, если точный оттенок имеет важное значение.

Шестнадцатеричное значение RGB

Hex	Bin	Dec
0	0000	0
1	0001	1
2	0010	2
3	0011	3
4	0100	4
5	0101	5
6	0110	6
7	0111	7
8	1000	8
9	1001	9
A	1010	10
B	1011	11
C	1100	12
D	1101	13
E	1110	14
F	1111	15

Цвет можно задавать в шестнадцатеричном виде. Например:

h1 {
  color: #ffffff;
}

Либо в сокращённой форме:

h1 {
  color: #fff;
}

Первые два символа, идущие после #, обозначают красный, следующие два — зелёный, и последние два — синий.

RGB форма записи

RGB — это сокращение от red(красный), green(зелёный) и blue(синий). Эти три цвета при смешивании создают все другие цвета на экране компьютера.

Существует два способа записи, которые нельзя смешивать:

числами от 0 до 255

h1 {
  color: rgb(255, 255, 255);
}

или в процентах (%)

h1 {
  color: rgb(100%, 100%, 100%);
}

Следующие три способа появились только в CSS3.

RGBA запись

RGBA — это RGB с добавлением альфа-канала четвёртым аргументом, который может принимать значения от 0 (прозрачность) до 1 (непрозрачность).

Пример:

div {
  background-color: rgba(0, 0, 0, 0.5);
}

HSL запись

HSL — это цветовая модель, которая определяется тоном, насыщенностью и яркостью.

Пример:

div.red {
  background-color: hsl(0, 100%, 50%);
}
div.green {
  background-color: hsl(120, 100%, 50%);
}
div.blue {
  background-color: hsl(240, 100%, 50%);
}

HSLA запись

HSLA — это HSL с добавлением альфа-канала четвёртым аргументом, который может принимать значения от 0 (прозрачность) до 1 (непрозрачность).

Пример:

div.red {
  background-color: hslа(0, 100%, 50%, 0.5);
}