Относительный синтаксис цвета

Сегодня, 2021.06.01, вышла новая версия черновика спецификации css-color-5. поговорим об одном из нововведений.

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

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

1. Исходный цвет можно указать с помощью значения from <color> в начале функции.
2. Если указан исходный цвет, остальные аргументы могут быть либо указаны напрямую, как обычно, либо указаны как ключевое слово канала, относящееся к одному из каналов исходного цвета. Математические функции также могут использовать эти ключевые слова для динамического изменения каналов исходного цвета.
3. Использование относительного синтаксиса цвета не изменяет то, является ли аргумент обязательным. Однако, если значение прозрачности опущено, по умолчанию используется прозрачность исходного цвета (а не 100%, как в абсолютном синтаксисе).

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

RGB

Грамматика функции rgb(), помимо старых вариантов записи, теперь принимает еще и такую:

rgb( [ from <color> ]? [ <number> | <percentage> ]{3} [ / <alpha-value> ]? )

В этой функции цвета допустимыми ключевыми словами канала являются:

1. r, g и b - это проценты (<percentage>), которые соответствуют красному, зеленому и синему каналам исходного цвета после его преобразования в sRGB.

2. alpha - это процент (<percentage>), который соответствует альфа-прозрачности исходного цвета.

Остальные пространства

Изменения в остальных цветовых функция такие же как в rgb(). Ключевые слова каналов у них иненуются так:

1. HSL - h, s, l и alpha
2. HWB - h, w, b и alpha
3. Lab - l, a, b и alpha
4. LCH - l, c, h и alpha

Зачем это нужно?

Прозрачность налету

html { --bg-color: blue; }
.overlay {
  background: rgb(from var(--bg-color) r g b / 80%);
}

В этом примере каналы r, g и b исходного цвета не изменяются, что указывается с помощью ключевых слов канала, извлекающих их из значения исходного цвета, но прозрачность установлена на 80%, чтобы сделать его слегка прозрачным, независимо от какая была непрозрачность исходного цвета.

Также, можно изменять прозрачность относительно исходной, например, сделать цвет чуть более прозрачным rgb(from var(--bg-color) r g b / calc(alpha * 80%)).

Изменение именованных цветов

color: rgb(from  indianred 255 g b)

Это выражение берет значение indianred в пространстве sRGB (205 92 92) и заменяет красный канал на 255, чтобы получить rgb(255 92 92).

Дополнительно

Safari TP 122 уже имплементировал эту фичу. Можно поиграться.