rgb()

Ниже приведены описания разрешенных значений для абсолютных и относительных цветов.

Синтаксис абсолютного значения

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 исходного цвета в качестве значений каналов выходного цвета:

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

Выходной цвет этой функции — sRGB color() эквивалент rgb(255 0 0): color(srgb 1 0 0).

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

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

В этом случае выходной цвет — sRGB color() эквивалент rgb(132 132 224): 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 для выходного цвета устанавливается в значение канала rgb() эквивалента исходного цвета R — 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). Выполняются вычисления calc() для значений R, G, B и A. После вычислений значения 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()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  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>, чтобы лучше продемонстрировать прозрачность каналов альфа.

body {
  background: repeating-linear-gradient(-45deg, #eee 0 2px, #fff 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);
}

Результат

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

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

CSS

: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> для списка всех способов записи цветов
• Инструмент выбора и преобразования цветов sRGB
• Использование относительных цветов
• Модуль CSS цвета