Relative Color Syntax
Google for Developersの記事を見るのが早い
> The goal of relative color syntax is to allow deriving a color from another color.
> (訳 : 相対色構文の目的は、ある色から別の色を派生させることを可能にすることです。)
めっちゃ使ってる
便利すぎる
使用例 : 個人プロフィールページ
example.css:root {
--brand: #224;
--base: oklch(from var(--brand) 90% 0.04 h);
--text: oklch(from var(--brand) 35% 0.04 h);
--link-left: oklch(from var(--brand) 85% 0.07 h / .5);
--link-right: oklch(from var(--brand) 85% 0.11 h/ .5);
--shadow-light: oklch(from var(--brand) 100% 0.04 h / .3);
--shadow-dark: oklch(from var(--brand) 50% 0.04 h / .2);
}example.cssbody {
background: linear-gradient(
to bottom right,
oklch(from var(--base) l c calc(h - 20)),
oklch(from var(--base) l c calc(h + 20))
);
}