В CSS широкое распространение находит использование цветов. Чтобы установить цвет текста, фона или границы, нам надо указать цвет.
Например, определим красный цвет для фона элемента div:
div{
background-color: red;
}
В CSS есть несколько различных свойств, которые в качестве значения требует определенный цвет. Например, за установку цвета текста отвечает свойство color, за установку фона элемента - свойство background-color, а за установку цвета границы - border-color.
Существует несколько различных способов определения цвета текста.
Шестнадцатеричного значение. Оно состоит из отдельных частей, которые кодируют в шестнадцатеричной системе значения для красного, зеленого и синего цветов.
Например, #1C4463. Здесь первые два символа 1C представляю значение красной компоненты цвета, далее
44 - значение зеленой компоненты цвета и 63 - значение уровня синего цвета. Финальный цвет, который мы видим на веб-странице,
образуется с помощью смешивания этих значений.
Если каждое из трех двухзначных чисел содержит по два одинаковых символа, то их можно сократить до одного. Например,
#5522AA можно сократить до #52A, или, к примеру, #eeeeee можно сократить до #eee. При этом
не столь важно, в каком регистре будут символы.
Значение RGB. Значение RGB также представляет последовательно набор значений для красного, зеленого и синего цветов (Red — красный, Green — зеленый, Blue — синий). Значение каждого цвета кодируется тремя числами, которые могут представлять либо процентные соотношения (0–100%), либо число от 0 до 255.
Например
background-color: rgb(100%,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 — тон, Saturation — насыщенность и Lightness — осветленность. HSL задает три значения. Первое значение Hue угол в круге оттенков - значение в градусах от 0 до 360. Например, красный — 0 (или 360 при полном обороте круга). Каждый цвет занимает примерно 51°.
Второе значение - Saturation - представляет насыщенность, то указывает, насколько чистым является цвет. Насыщенность определяется в процентах от 0 (полное отсутствие насыщенности) до 100% (яркий, насыщенный цвет).
Третье значение - Lightness - определяет осветленность и указывается в процентах от 0 (полностью черный) до 100 (полностью белый). Для получения чистого цвет применяется значение 50 %.
Например:
background-color: hsl(206, 56%, 25%);
Данный цвет является эквивалентом значений #1C4463 и rgb(28, 68, 99)
Значение HSLA. Аналогично RGBA здесь к HSL добавляется компонента прозрачности в виде значения от 0 (полностью прозрачный) до 1 (не прозрачный). Например:
background-color: hsl(206, 56%, 25%, .6);
Строковые значения. Существует ряд константных строковых значений, например, red (для красного цвета) или green (для зеленого цвета). К примеру,
color: red;
является эквивалентом
color: #ff0000;
Полный перечень цветов можно найти на странице https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
В заключение следует отметить, что существует множество бесплатных онлайн-генераторов цвета, где можно настроить и посмотреть цвет в нужном формате. Например, генератор цвета на mdn.
Ряд настроек цвета позволяют установить значение для альфа-компоненты, которая отвечает за прозрачность. Но также в CSS есть специальное свойство, которое позволяет установить прозрачность элементов - свойство opacity. В качестве значения оно принимает число от 0 (полностью прозрачный) до 1 (не прозрачный):
div{
width: 100px;
height: 100px;
background-color: red;
opacity: 0.4;
}