Курс CSS: Цветовая модель RGB

При изучении курса мы сталкивались со свойствами, значениями которых является цвет. Такими свойствами были:

• color
• background-color
• border-color

Для обозначения цвета использовалась шестнадцатеричная модель RGB, которая переводится как Red Green Blue. В CSS для обозначения цвета в RGB используется две основные записи:

• Шестнадцатеричная. Это запись из 6 символов, разбитые на три блока по два значения. Каждый блок отвечает за один из цветов: красный, зелёный или синий
• С использованием функции rgb(red, green, blue). Функция принимает три числа от 0 до 255, каждое из которых определяет количество красного, зелёного и синего цвета

Шестнадцатеричная запись

При использовании такой записи используется шестнадцатеричная система счисления. Запись делится на три блока по два числа:

1. от 00 до ff — количество красного цвета
2. от 00 до ff — количество зелёного цвета
3. от 00 до ff — количество синего цвета

/* Белый цвет */
color: #ffffff;

/* Чёрный цвет */
color: #000000;

Предположим, что для текста нужен фиолетовый цвет. Как он получается? Для этого смешивается красный и синий цвет. В фиолетовом отсутствует зелёный цвет. Значит нужна максимальная запись в первом и третьем блоке. Итого получится цвет #ff00ff

Можно получать разные вариации этого цвета, добавляя или уменьшая количество составных цветов

Функция rgb

Второй способ указать цвет с помощью цветовой модели RGB — использование специальной функции rgb(). Она принимает три числа от 0 до 255, где первое число определяет количество красного цвета, второе число — количество зелёного цвета, а третье — количество синего. Ничего не напоминает?

Если вам показалось, что это похоже на шестнадцатеричную систему, то будете правы — суть точно такая же. Только записываем цвета в привычных нам цифрах. В остальном всё то же самое, а значит можно создать фиолетовый цвет, используя функцию rgb():

<p class="text">Текст фиолетового цвета</p>

.text {
  color: rgb(255, 0, 255);
}

А вот как будет выглядеть белый и чёрный цвет при использовании функции rgb():

/* Белый цвет */
color: rgb(255, 255, 255);

/* Чёрный цвет */
color: rgb(0, 0, 0);

Прозрачность и функция rgba()

При использовании фонового цвета часто используют не просто цвет, но и добавляют ему прозрачность. В цветовой модели RGB для этого используется понятие «альфа»-канал. Он определяет насколько прозрачный цвет должен выводиться и задаётся числом от 0 до 1, где 0 — полностью прозрачный цвет, а 1 — полностью непрозрачный.

Чтобы использовать альфа-канал создаётся функция rgba(), где a — alpha. В остальном всё точно так же, как и было изучено ранее. Сделаем полупрозрачный фиолетовый фон:

<div class="background">Блок с полупрозрачным фиолетовым фоном</div>

.background {
  background-color: rgba(255, 0, 255, 0.5);
}

Задание

Создайте параграф с классом background-black-50 и установите ему полупрозрачный чёрный фон. Используйте функцию rgba(). Стили запишите в теге <style>