CSS Relative Colorsで色を柔軟に扱う

Relative Colorsを使うことで、オリジナルの色に対して、rgba、hsl、lchなどのカラー関数を適用できるようになった。

構文は以下のようにfromをつけることで、カラー関数の再適用ができる。

color-function(from origin channel1 channel2 channel3 / alpha)

たとえば、デザイントークンなどhexで定義された色を、hsl関数を用いて彩度や輝度のみを変更したり、rgb関数のRed要素だけを変更したりできる。 アニメーションや:hoverや:activeなどのバリエーション作成に便利。

チャンネルを変更しない場合は、rgbならr/g/b、hslならh/s/lのように指定するとオリジナルの色を引き継げる。

:root {
  --origin-color: #88CC00;
}

.origin {
  background-color: var(--origin-color);
}

.brighten {
  background-color: hsl(from var(--origin-color) h s 80%);
}

.bluely {
  background-color: rgb(from var(--origin-color) r g 255);
}

デモ