CSSの相対カラー構文で相対的な色指定を行うメモ📝

デザイントークンのグレースケールを相対的にしたいときに相対カラー構文を利用するといい感じにできそうだったのでメモ📝

developer.mozilla.org

(caniuseを見る限りfirefox以外のモダンブラウザでは利用できるようです)

caniuse.com

以下はhslを利用して明るさを相対的に指定して暗め/明るめの灰色を定義する例です。

:root {
  --grey: #7a7a7a;
  --grey-light: hsl(from var(--grey) h s calc(l * 1.5));
  --grey-dark:  hsl(from var(--grey) h s calc(l * 0.5));  
}

Codepen

See the Pen Untitled by madogiwa (@madogiwa0124) on CodePen.

一応ポリフィルもあるようですが、自分も環境だと上手く適用できなかった・・・😭

github.com

参考

coliss.com

speakerdeck.com