Функция CSS `rgb()`

Функциональная нотация rgb() задаёт цвет в sRGB-цветовом пространстве с помощью красного, зелёного и синего компонентов. Необязательный альфа-компонент задаёт прозрачность цвета.

Попробуйте

background: rgb(31 120 50);

background: rgb(30% 20% 50%);

background: rgb(255 122 127 / 80%);

background: rgb(255 122 127 / 0.2);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

Синтаксис

/* Absolute values */
rgb(255 255 255)
rgb(255 255 255 / 50%)

/* Relative values */
rgb(from green r g b / 0.5)
rgb(from #123456 calc(r + 40) calc(g + 40) b)
rgb(from hwb(120deg 10% 20%) r g calc(b + 200))

/* Legacy 'rgba()' alias */
rgba(0 255 255)

/* Legacy format */
rgb(0, 255, 255)
rgb(0, 255, 255, 50%)

Значения

Ниже описаны допустимые значения как для абсолютных, так и для относительных цветов.

Синтаксис абсолютных значений

rgb(R G B[ / A])

Параметры:

R, G, B

Каждое значение можно задать как <number> от 0 до 255, <percentage> от 0% до 100% или ключевое слово none (в данном случае эквивалентное 0%). Эти значения задают соответственно красный, зелёный и синий каналы.

A Необязательно

<alpha-value>, задающее значение альфа-канала цвета, где число 0 соответствует 0% (полностью прозрачному состоянию), а 1 соответствует 100% (полностью непрозрачному состоянию). Кроме того, ключевое слово none можно использовать, чтобы явно указать отсутствие альфа-канала. Если значение канала A не задано явно, по умолчанию оно равно 100%. Если значение указано, перед ним ставится косая черта (/).

Синтаксис относительных значений

rgb(from <color> R G B[ / A])

Параметры:

from <color>

При задании относительного цвета всегда используется ключевое слово from, за которым следует значение color, представляющее исходный цвет: цвет, на основе которого задаётся относительный цвет. Исходным цветом может быть любой допустимый синтаксис color, включая другой относительный цвет.

R, G, B

Каждое значение можно задать как <number> от 0 до 255, <percentage> от 0% до 100% или ключевое слово none (в данном случае эквивалентное 0%). Эти значения задают соответственно значения красного, зелёного и синего каналов результирующего цвета.

A Необязательно

<alpha-value>, задающее значение альфа-канала результирующего цвета, где число 0 соответствует 0% (полностью прозрачному состоянию), а 1 соответствует 100% (полностью непрозрачному состоянию). Кроме того, ключевое слово none можно использовать, чтобы явно указать отсутствие альфа-канала. Если значение канала A не задано явно, по умолчанию оно равно значению альфа-канала исходного цвета. Если значение указано, перед ним ставится косая черта (/).

Задание компонентов каналов результирующего относительного цвета

При использовании синтаксиса относительных цветов внутри функции rgb() браузер преобразует исходный цвет в эквивалентный цвет RGB (если он ещё не задан в этом формате). Цвет определяется тремя отдельными значениями цветовых каналов — r (красный), g (зелёный) и b (синий), — а также значением альфа-канала (alpha). Эти значения каналов доступны внутри функции и используются при задании каналов результирующего цвета:

• Значения r, g и b преобразуются в <number> в диапазоне от 0 до 255 включительно.
• Канал alpha преобразуется в <number> в диапазоне от 0 до 1 включительно.

При задании относительного цвета каналы результирующего цвета можно выражать несколькими способами. Ниже мы рассмотрим несколько примеров.

В первых двух примерах ниже используется синтаксис относительных цветов. Однако первый пример выводит тот же цвет, что и исходный, а второй — цвет, совсем не основанный на исходном. По сути, они не создают относительные цвета! В реальном коде вы вряд ли стали бы их использовать и, скорее всего, просто задали бы абсолютное значение цвета. Мы включили эти примеры в качестве отправной точки для изучения синтаксиса относительных цветов rgb().

Начнём с исходного цвета hsl(0 100% 50%) (эквивалентного rgb(255 0 0)). Следующая функция выводит тот же цвет, что и исходный: она использует значения каналов r, g и b исходного цвета (255, 0 и 0) в качестве значений каналов результата:

rgb(from hsl(0 100% 50%) r g b)

Результирующий цвет этой функции — эквивалент rgb(255 0 0) в sRGB color(): color(srgb 1 0 0).

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

rgb(from hsl(0 100% 50%) 132 132 224)

В этом случае результирующий цвет — эквивалент rgb(132 132 224) в sRGB color(): color(srgb 0.517647 0.517647 0.878431).

Следующая функция создаёт относительный цвет на основе исходного:

rgb(from hsl(0 100% 50%) r 80 80)

В этом примере:

• Исходный цвет (hsl(0 100% 50%)) преобразуется в эквивалент rgb() (rgb(255 0 0)).
• Значению канала R результирующего цвета присваивается значение канала R эквивалента исходного цвета rgb() — 255.
• Каналам G и B результирующего цвета присваиваются новые значения, не зависящие от исходного цвета: соответственно 80 и 80.

Итоговый результирующий цвет эквивалентен rgb(255 80 80) в цветовом пространстве sRGB — color(srgb 1 0.313726 0.313726).

В рассмотренных до сих пор примерах альфа-каналы исходного и результирующего цветов не задавались явно. Если альфа-канал результирующего цвета не указан, по умолчанию он принимает то же значение, что и альфа-канал исходного цвета. Если альфа-канал исходного цвета не указан (и это не относительный цвет), по умолчанию он равен 1. Поэтому в приведённых выше примерах значения альфа-каналов исходного и результирующего цветов равны 1.

Рассмотрим примеры с заданными значениями альфа-каналов исходного и результирующего цветов. В первом примере значение альфа-канала результата совпадает со значением альфа-канала исходного цвета, а во втором задаётся другое значение альфа-канала результата, не связанное со значением альфа-канала исходного цвета.

rgb(from hsl(0 100% 50% / 0.8) r g b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

rgb(from hsl(0 100% 50% / 0.8) r g b / 0.5)
/* Computed output color: color(srgb 1 0 0 / 0.5) */

В следующем примере исходный цвет hsl() снова преобразуется в представление rgb() — rgb(255 0 0). К значениям R, G, B и A применяются вычисления calc(). После вычислений значения R, G, B и A равны соответственно 127.5, 25, 175 и 0.9. Итоговый результирующий цвет эквивалентен rgb(127.5 25 175 / 0.9) в цветовом пространстве sRGB: color(srgb 0.5 0.0980392 0.686275 / 0.9).

rgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1))

Формальный синтаксис

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<alpha-value> = 
  <number> |
  <percentage>

Примеры

Базовый синтаксис

В этом примере показаны три элемента <div> с разными цветами фона, расположенные поверх полосатого фона.

HTML

<div>
  <div id="integer"></div>
  <div id="percent"></div>
  <div id="alpha"></div>
</div>

CSS

Цвета фона заданы с помощью функции цвета rgb(). Все три цвета одинаковы. Третий цвет полупрозрачный, поэтому для более наглядной демонстрации прозрачности альфа-каналов мы добавили repeating-linear-gradient() для элемента <body>.

div {
  display: flex;
  gap: 20px;
  height: 50px;
  flex: 1;
}
body {
  height: calc(100vh - 20px);
}

body {
  background: repeating-linear-gradient(-45deg, #eeeeee 0 2px, white 2px 6px);
  padding: 10px;
}

#integer {
  background-color: rgb(189 85 218);
}

#percent {
  background-color: rgb(74% 33% 85%);
}

#alpha {
  background-color: rgb(189 85 218 / 0.25);
}

Результат

Использование относительных цветов с rgb()

В этом примере задаются стили для трёх элементов <div> с разными цветами фона. Левому элементу присваивается неизменённый --base-color, а среднему и правому — варианты этого --base-color, в которых постепенно уменьшается значение красного канала и увеличивается значение синего.

Эти варианты задаются с помощью относительных цветов: пользовательское свойство custom property --base-color передаётся в функцию rgb(), а каналы результирующего цвета изменяются для достижения нужного эффекта с помощью функций calc(). Значение зелёного канала при этом остаётся неизменным.

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
  /* equal to rgb(255 165 0) */
}

#one {
  background-color: var(--base-color);
}

#two {
  background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));
  /* 76.5 is 30% of 255 */
}

#three {
  background-color: rgb(from var(--base-color) calc(r - 153) g calc(b + 153));
  /* 153 is 60% of 255 */
}

/* Use @supports to add in support for old syntax that requires r g b values to
   be specified as percentages (with units) in calculations. This is required
   for Safari 16.4+. */
@supports (color: rgb(from red r g calc(b + 30%))) {
  #two {
    background-color: rgb(from var(--base-color) calc(r - 30%) g calc(b + 30%));
  }

  #three {
    background-color: rgb(from var(--base-color) calc(r - 60%) g calc(b + 60%));
  }
}

Результат

Устаревший синтаксис: значения, разделённые запятыми

По историческим причинам функция rgb() принимает форму, в которой все значения разделяются запятыми.

HTML

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 50%);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Тип данных color со списком всех обозначений цветов
• Инструмент преобразования форматов цветов
• Использование относительных цветов
• Модуль CSS colors