Задать цвет в CSS с одной стороны несложно, но с другой, могут возникнуть трудности с тем, чтобы понять, какой цвет скрывается за определенной комбинацией цифр и букв. Для решения этой проблемы существует палитра цветов CSS. Она позволяет получить обозначение конкретного цвета в определенной модели представления.

Цветовые модели в CSS

Существует несколько популярных цветовых моделей в CSS:

1. RGB. Это стандартная цветовая модель, которая состоит из красного, зеленого и синего оттенков, интенсивность которых может варьировать от 0 до 255. Формат записи следующий: rgb(красный, зеленый, синий). Особой разновидностью этой цветовой модели является RGBA. Ее основное отличие – в альфа-канале, который обозначает прозрачность цвета. Альфа-канал варьирует от 0 до 1: от полностью прозрачного цвета до полностью непрозрачного.
2. Шестнадцатеричная запись. По сути, это та же RGB, только значения цветов записываются не в десятичной форме, шестнадцатеричной. То есть, кроме привычных чисел от 0 до 9, еще есть латинские буквы от A до F. Шестнадцатеричная запись осуществляется в формате #rrggbb. Пример – #a52a2a, что соответствует коричневому цвету в цветовой модели RGB, записанной десятичными цифрами, как rgb(165,42,42);
3. HSL. Это более сложная цветовая модель, которая включает три компонента: оттенок, насыщенность и светлоту картинки. Записывается так же. Но вот диапазон значений отличается. Оттенок может быть в пределах от 0 до 359. Существует цветовой круг, и градусы на нем соответствуют определенному цвету. 0 градусов соответствуют красному цвету, 120 – зеленому и 240 – синему. Если задать цифру больше, то от нее будет автоматически отниматься 360. Насыщенность может колебаться в пределах от 0 до 100%. Первый соответствует серому цвету, а 100% – наиболее насыщенный цвет. Светлота также колеблется в пределах от 0 до 100%. Аналогично модели RGBA, в HSL может добавляться альфа-канал.
4. Словесное обозначение цвета. Стандартные оттенки можно просто записать словами. Например, brown, yellow.

Вот небольшой пример кода, демонстрирующий разные способы записи цвета.

<style>
#word { /* красный цвет, записанный словом */
width: 100px;
	height: 100px;
	background: red;
}
#rgb { /* красный цвет, записанный десятеричным RGB*/
width: 100px;
	height: 100px;
	background: rgb(255, 0, 0);
}
#rgba { /* красный цвет, записанный десятеричным RGB с альфа-каналом 0.5*/
width: 100px;
	height: 100px;
	background: rgb(255, 0, 0, 0.5);
}
#hex 06:59 14.03.2019{ /* красный цвет, записанный шестандцатеричным RGB*/
width: 100px;
	height: 100px;
	background: #ff0000;
}
#hsl{ /* красный цвет, записанный в цветовой модели hsl*/
width: 100px;
	height: 100px;
	background: hsl(0, 100%, 50%);
}
#hsla{ /* красный цвет, записанный в цветовой модели hsla с альфа-каналом 0.5*/
width: 100px;
	height: 100px;
	background: hsl(0, 100%, 50%, 0.5);
}
</style>
<div id="word"></div>
<div id="rgb"></div>
<div id="rgba"></div>
<div id="hex"></div>
<div id="hsl"></div>
<div id="hsla"></div>

Цветовая палитра CSS онлайн

Благо, не нужно самостоятельно подбирать желаемый цвет, выставляя необходимый оттенок. Всегда можно воспользоваться палитрой цвета в CSS. Для этого достаточно забить в Google “палитра цветов css», и сам поисковик выдаст над результатами поиска блок, в которой можно выбрать желаемый цвет. По умолчанию он запишет его в RGB десятичного и шестнадцатеричного типов, но если нажать на кнопку «Показать значения цветов», можно посмотреть на этот же цвет в других моделях.