特定の色を別の色へ派生させることができる構文です。
相対カラー構文は設定した色を相対色に変換します。変換には、fromという新しいキーワードを使用します。ブラウザは元の色を変換して分解し、新しい色の定義で使用する変数として提供します。
例えば以下の場合、 green( rgb(0 , 125, 0) )をRGB色空間に変換し、それを新しいRGBカラーとして利用できます。
sample {
color: rgb(from green r g b / alpha); /* rgb(0, 125, 0 / 1)*/
}この構文を使うことで、以下のようなことができます。
- 他の色空間に変更することができる
例）hsl色空間 から rgb色空間 へ変換
⇒ rgb(from hsl(0, 50, 50) r g b) → rgb(191, 64, 64) - 特定の色だけを取り出せたり、入れ替えたりできる
例）rgb(0, 50, 50) の gの色だけを取り出す
⇒ rgb(from rgb(0, 50, 50) 0 g 0) → rgb(0, 50, 0)
例）rgb(0, 50, 50) の rとgの色を入れ替える
⇒ rgb(from rgb(0, 50, 50) g r b) → rgb(50, 0, 50) - 色を計算させることできる
例）rgb(0, 50, 50)の色を25%明るくする
⇒ oklch(from rgb(0, 50, 50) calc(l + 25) c h) → oklch(28.7%, 12.25%, 194.769%)
