Бесплатный курс по CSS. Зарегистрируйтесь для отслеживания прогресса →

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(), где aalpha. В остальном всё точно так же, как и было изучено ранее. Сделаем полупрозрачный фиолетовый фон:

<div class="background">Блок с полупрозрачным фиолетовым фоном</div>
.background {
  background-color: rgba(255, 0, 255, 0.5);
}
Блок с полупрозрачным фиолетовым фоном

Задание

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

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе