Стилевая функция rgb()

03.06.2024

Влад Мержевич

Цвет в виде шестнадцатеричного значения не всегда удобен для использования из-за сложности перевода десятичных чисел в шестнадцатеричные. В качестве альтернативы в CSS имеется стилевая функция rgb(), позволяющая задавать компоненты цвета в виде десятичных чисел.

Сама функция rgb() принимается в качестве значения стилевого свойства и позволяет установить цвет фона или текста с помощью цветовой модели RGB. В настоящий момент функция rgb() поддерживает два синтаксиса, несколько различающихся между собой: традиционный и современный.

Традиционный синтаксис rgb()

Функция rgb() принимает три параметра, которые представляют собой значения красной, зелёной и синей компоненты цвета, записанных в десятичном формате. Значения каждой компоненты могут быть в диапазоне от 0 до 255, между собой они разделяются запятыми. Вот несколько типовых цветов, записанных в этом формате.

rgb(0, 0, 0) — чёрный;
rgb(255, 255, 255) — белый;
rgb(100, 100, 100) — серый;
rgb(255, 0, 0) — красный;
rgb(0, 255, 0) — зелёный;
rgb(0, 0, 255) — синий.

Также вместо целых чисел можно использовать проценты — 0% будет соответствовать 0, а 100% числу 255. К примеру, оранжевый цвет можно представить так.

#ff9933 = rgb(255, 153, 51) = rgb(100%, 60%, 20%)

Учтите, что совмещать числа и проценты одновременно нельзя, даже нулевые значения следует сопровождать символом процентов.

rgb(45%, 85%, 0)  /* Неверно, вместо 0% написан 0 */
rgb(45%, 85%, 0%) /* Правильно */

Переводить значения из одного формата в другой можно с помощью этого онлайн-сервиса.

В примере 1 показано использование функции rgb() для изменения цвета кнопки.

Пример 1. Использование функции rgb()

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>rgb()</title>
  <style>
   button {
    background-color: rgb(191, 48, 48); /* Цвет фона */
    color: rgb(242, 242, 242); /* Цвет текста */
    padding: 1em 2em; /* Расстояние от текста до края */
    border: none; /* Убираем рамку */
   }
  </style>
 </head>
 <body>
  <button>Кнопка</button>
 </body>
</html>

Результат данного примера показан на рис. 1.

Цвет фона кнопки

Рис. 1. Цвет фона кнопки

Для полупрозрачного цвета применяется функция rgba(), поддерживающая дополнительный альфа-канал, значение которого меняется от 0 до 1. Нулевое значение соответствует полной прозрачности, а 1 полной непрозрачности. Промежуточные значения, вроде 0.3 делают цвет полупрозрачным.

В табл. 1 показан один и тот же красный цвет с разным значением альфа-канала.

Табл. 1. Влияние альфа-канала на цвет

Значение rgba()	Цвет	Описание
rgba(255, 0, 0, 0)		Полностью прозрачный цвет
rgba(255, 0, 0, 0.2)		Непрозрачность 20%
rgba(255, 0, 0, 0.4)		Непрозрачность 40%
rgba(255, 0, 0, 0.6)		Непрозрачность 60%
rgba(255, 0, 0, 0.8)		Непрозрачность 80%
rgba(255, 0, 0, 1)		Полностью непрозрачный цвет

В примере 2 цвет фона блока сделан частично прозрачным и сквозь него просматривается фоновое изображение.

Пример 2. Использование функции rgba()

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>rgba()</title>
  <style>
   body {
    background: url(image/leather.jpg); /* Фоновое изображение */
   }
   .msg {
    background-color: rgba(25, 135, 84, 0.6); /* Полупрозрачный цвет */
    padding: 0.5em; /* Расстояние от текста до края */
    color: #fff; /* Белый цвет текста */
   }
  </style>
 </head>
 <body>
  <div class="msg">
   Сообщение добавлено успешно.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Полупрозрачный цвет

Рис. 2. Полупрозрачный цвет

Современный синтаксис rgb()

В новом синтаксисе функции rgb() её параметры перечисляются через пробел, а не запятую. При этом значения можно писать как в целых числах от 0 до 255, так и в процентах от 0% до 100%.

rgb(255 153 51) = rgb(100% 60% 20%)

В отличие от традиционного синтаксиса допускается смешивать числа и проценты. Единственное, о чём следует помнить, что браузер Safari это нововведение пока не поддерживает.

rgb(45% 85% 0) /* Корректно */

Также две функции rgb() и rgba() объединены в одну и значение альфа-канала пишется после косой черты. Его тоже можно писать как в числах от 0 до 1, так и в процентах от 0% до 100%.

rgb(25 135 84 / 0.6) = rgb(25 135 84 / 60%)

Предыдущий пример переписан с использованием современного синтаксиса (пример 3).

Пример 3. Современный синтаксис rgb()

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>rgba()</title>
  <style>
   body {
    background: url(image/leather.jpg); /* Фоновое изображение */
   }
   .msg {
    background-color: rgb(25 135 84 / 60%); /* Полупрозрачный цвет */
    padding: 0.5em; /* Расстояние от текста до края */
    color: #fff; /* Белый цвет текста */
   }
  </style>
 </head>
 <body>
  <div class="msg">
   Сообщение добавлено успешно.
  </div>
 </body>
</html>

В функцию rgb() добавлена интересная особенность — можно частично или полностью «позаимствовать» значение из другого цвета. К примеру, нам нравится цвет с названием darkviolet и мы хотим использовать этот цвет для фона, сделав его полупрозрачным. Конечно, можно посмотреть в справочнике значение цвета.

darkviolet = #9400d3 = rgb(148 0 211)

И дополнить его, получив прозрачность 50%.

#9400d380 = rgb(148 0 211 / 50%)

Функция rgb() позволяет это сделать без всяких справочников следующим образом.

rgb(from darkviolet r g b / 50%)

Ключевое слово from означает, что за основу следует взять указанный цвет, в данном случае darkviolet, получить RGB-компоненты этого цвета и подставить их в соответствующие переменные r, g и b. После этого значение альфа-канала установить как 50%.

Исходный цвет можно писать в любом формате, а вместо переменных подставить своё значение.

rgb(from #9400d380 r 66 b / alpha)

Браузер с такой конструкцией работает следующим образом:

берёт цвет #9400d380, получает из него красную компоненту (она будет 148) и подставляет её в переменную r;
зелёной компоненте присваивает значение 66;
синюю компоненту цвета (211) подставляет в переменную b;
значение альфа-канала (50%) подставляет в переменную alpha.

В результате за основу берётся следующий цвет

#9400d380 = rgb(148 0 211 / 50%)

и с помощью небольшого преобразования получается новый цвет

rgb(148 66 211 / 50%)

Синтаксис с использованием ключевого слова from работает в браузере Firefox, начиная с версии 128.

С переменными допустимо выполнять математические операции с помощью функции calc(). К примеру, чтобы изменить цвет зелёной компоненты, вместо переменной g мы используем выражение calc(g + 100).

rgb(from #9400d380 r calc(g + 100) b / alpha)

Аналогичным способом можно менять значения и других переменных.

В примере показано использование синтаксиса rgb() для изменения цвета фона кнопки.

Пример 4. Использование относительного цвета

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>rgb()</title>
  <style>
   button {
    background-color: rgb(from #9400d380 r 66 b / alpha); /* Цвет фона */
    padding: 1em 2em; /* Расстояние от текста до края */
    border: none; /* Убираем рамку */
   }
  </style>
 </head>
 <body>
  <button>Кнопка</button>
 </body>
</html>

Результат данного примера показан на рис. 3.

Полупрозрачный цвет

Рис. 3. Полупрозрачный цвет

Стилевая функция rgb()

Традиционный синтаксис rgb()

Современный синтаксис rgb()

Популярные материалы