Есть три способа задать цвет для текста, фона и других элементов.
- RGB (Red красный, Green зеленый, Blue синий)
- HSL (Hue оттенок, Saturation насыщенность, Lightness яркость)
- Название цвета (предопределенный список ключевых цветов)
Способ RGB основан на смешении трех компонентов цвета: красном, зеленом и синем. Используется чаще всего.
Способ HSL определяет сначала оттенок цвета, затем его насыщенность и яркость. Более понятный для понимания, хотя используется реже.
HEX
Шестнадцатеричный цвет, формат: #RRGGBB, где RR – красный, GG – зеленый, BB – синий в шестнадцатеричном формате (от 00 до FF). Самый распространенный вариант задания цвета.
Значение каждого из цветов может быть от 0 до 255. Если перевести 255 в шестнадцатеричную систему — получим как раз FF.
Например, #ff0000 — будет красный цвет. Здесь мы RR (красный) устанавливаем в максимальное значение FF. А GG (зеленый) и BB (синий) ставим в минимум 00.
Можно задавать в сокращенном формате, если в каждом цвете значения повторяются. Например #f00, вместо #ff0000.
HEX с альфа-каналом
Есть альфа-канал (полупрозрачность), если добавить в конце еще одно значение #RRGGBBAA. Прозрачность AA тоже задается в шестнадцатеричном формате от 00 до FF. Например: #ff000099. Где 00 — полностью прозрачный, FF — полностью непрозрачный.
RGB
Аналогичный способ, только здесь цвета задаются тремя значениями rgb(R, G, B), где R, G, B — красный, зеленый, синий от 0 до 255 (либо 0т 0% до 100%). Например: rgb(0, 255, 170) и rgb(0%, 100%, 66%).
Если все три значения равны нулю — мы получим черный цвет. Если все 255 — белый цвет.
RGBA
Название функции меняется на rgba() и добавляется четвертое значение альфа-канала (непрозрачности). Оно может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный), либо в процентах от 0 до 100%. В примере rgba(120, 30, 255, .5) задана непрозрачность 0.5 (ноль в числах с точкой можно опустить).
HSL
Здесь цвет задается тремя компонентами: Hue оттенок, Saturation насыщенность, Lightness яркость: hsl(H, S, L). Hue оттенок — это угол на цветовом колесе (от 0 до 360), где 0 и 360 — красный, 120 — зеленый, 240 — синий. Saturation насыщенность и Lightness яркость задаются в процентах от 0% до 100%. Например: hsl(240, 100%, 50%) синий цвет.
HSLA
Название функции меняется на hsla() и дополнительно задается альфа-канал от 0 (полностью прозрачный) до 1 (полностью непрозрачный), либо в процентах от 0 до 100%. Например: hsla(240, 100%, 50%, .5).
Ключевые слова/названия цветов
Есть список заранее определенных названий цветов, которые заданы в спецификации CSS. Все они не имеют прозрачности. В CSS1 было всего 16 цветов. Сейчас их 150. Например: black, green, yellow, aqua. Используется не часто, т.к. запомнить какое название к какому цвету относится сложно, да и не нужно.
Отдельно отметим слово transparent. Это полностью прозрачный цвет
И слово currentColor. Оно обозначает текущий цвет, заданный свойством color. Например, вы задали цвет текста красным color: #f00; и хотите сделать такую же рамку, можно написать: border: 1px solid currentColor.
