https://chromestatus.com/feature/5205844613922816
https://www.w3.org/TR/css-color-5/#relative-colors
こういう感じです
div {
background: rgb(from var(--bg-color) r g b / 80%);
}
rgb や hsl などの色空間の関数に from で元になる色を指定してから 次に各値を指定します
構文的には
rgb(from 元の色 R G B / 透過率)
rgb 関数なので R と G と B を指定します
透過率は省略可です
R と G と B には これまでの rgb 関数のように 0～255 の数値や％で指定できます
相対と言いつつもこの％は 100% が 255 に相当するもので 元の色に対する割合ではありません
rgb(from red 100% 100% 100%)
と書けば rgb(255, 255, 255) = #ffffff と同じです
red は意味のないものになります
from の色を使うには 数値と％以外の特殊なもので r と g と b を使います
これを使うと元の色の R と G と B の値になります
rgb(from red r g b)
と書くと元の色そのままです
rgb(from red r r r)
と書くと G と B も R の値 (255) になるので rgb(255, 255, 255) です
元の色を使って計算するときは calc を使います
rgb(from rgb(100,100,100) calc(r * 1.1) calc(g * 1.5) calc(b * 2))
これの結果は rgb(110, 150, 200) になります
足し算で直接数値を足したい場合は小数値で扱うことになります
1 が 255 に相当します
rgb(from rgb(100,100,100) calc(r + 0.5) calc(g + 0.1) calc(b + 1))
これの結果は rgb(228, 126, 255) になります
0.5 は 128 なので 100 + 128 = 228 です
1 を足すと 255 を超えてしまうので 255 になります
rgb で使うよりも hsl で hue だけを変えたいみたいなケースのほうが使うかもですね
