CSSの知っておくと便利な実装テクニック！ 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます

異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。

[coliss]

CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。

[inazuma2073]

使い所がよくわからない…ダークモード切り替え用？

[rogertroutman]

デザイナーがこの仕様を知らなければ結局それぞれにスポイトで拾った色を使うしかないんす（逆も亦然りですが）。

[suika3417]

そうかダークモード対策か

[sujoyu]

テーマの中でプライマリとかセカンダリカラー定義しといても足りなかったので助かる。明るくしたり暗くしたりしたいよね。

[izoc]

これ欲しかったやつ。ダークモードでちまちまcssや切替処理を書かなくて良い

[nekoline]

どうせならSASSに寄せてくれんかのぉ