Цвет в CSS

Чтобы установить цвет текста, фона или границы, нам надо определить цвет.
Например, определим розовый цвет для фона элемента div:

div{
background-color: pink;
}

В CSS за установку цвета отвечают следующие свойства:

• тза текст отвечает свойство color,
• за установку фона элемента - свойство background-color,
• а за установку цвета границы - border-color.

Цвет определяется несколькими способами:

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

Например :#1C4463. Здесь первые два символа 1C представляю значение красной компоненты цвета, далее 44 - значение зеленой компоненты цвета и 63 - значение уровня синего цвета. Финальный цвет, который мы видим на веб-странице, образуется с помощью смешивания этих значений.

Если каждое из трех двухзначных чисел содержит по два одинаковых символа, то их можно сократить до одного. Например, #5522AA можно сократить до #52A, и регистр не важен.

Значение RGB.

представляет последовательно набор значений для красного, зеленого и синего цветов (Red — красный, Green — зеленый, Blue — синий). Значение каждого цвета кодируется тремя числами, которые могут представлять либо процентные соотношения (0–100%), либо число от 0 до 255.

background-color: rgb(100%,100%,100%); Здесь получаем белый цвет. А при значениях в 0% будет генерироваться черный цвет: background-color: rgb(0%, 0%, 0%); Между 0 и 100% находятся все остальные оттенки.

Но чаще применяются значения из диапазона от 0 до 255. background-color: rgb(28, 68, 99);

Значение RGBA.

Это тоже самое значение RGB плюс компонент прозрачности (Alpha). Компонент прозрачности имеет значение от 0 (полностью прозрачный) до 1 (не прозрачный). Например: background-color: rgba(28, 68, 99, .6);

Значение HSL.

HSL задает три значения:

• Hue угол в круге оттенков - значение в градусах от 0 до 360. Например, красный — 0 (или 360 при полном обороте круга). Каждый цвет занимает примерно 51°.
• Saturation - представляет насыщенность, определяется в процентах от 0 (полное отсутствие насыщенности) до 100% (яркий, насыщенный цвет).
• Lightness - определяет осветленность и указывается в процентах от 0 (полностью черный) до 100 (полностью белый). Для получения чистого цвет применяется значение 50 %. Например:background-color: hsl(206, 56%, 25%);

Значение HSLA.

Аналогично RGBA здесь к HSL добавляется компонента прозрачности в виде значения от 0 (полностью прозрачный) до 1 (не прозрачный).
Например: background-color: hsl(206, 56%, 25%, .6);

Строковые значения.

Существует ряд константных строковых значений, например, red (для красного цвета) или black (для чёрного цвета). К примеру, color: red;

Полный перечень цветов можно найти на странице https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

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

Установить значение для альфа-компоненты, которая отвечает за прозрачность можно и отдельно. Есть специальное свойство opacity. В качестве значения оно принимает число от 0 (полностью прозрачный) до 1 (не прозрачный):

div{
width: 100px;
height: 100px;
background-color: red;
opacity: 0.4;
}