Цвета в CSS

Есть три способа задать цвет для текста, фона и других элементов.

  • 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.

Получай полезные материалы удобным способом!
Добавить комментарий