CSSの知っておくと便利な実装テクニック！ 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます
Post on:2024年3月27日
sponsors
異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。
下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。
CSSの相対カラー構文とは
CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。
|
1 2 3 4 5 |
.syntax-introduction_same-colors { color: green; color: rgb(0 128 0); color: rgb(from green r g b); } |
サポートブラウザは、Chorme 119+, Edge 119+, Safari 16.4+, Opera 106+です。
参考: Can I Use
CSSの相対カラー構文のデモ
デモページで実際の動作をご覧ください。右上からダークモードとライトモードを切り替えられます。
See the Pen
Theming with CSS color functions by coliss (@coliss)
on CodePen.
HTMLは、下記の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div> <aside data-type="error"> <svg ...></svg> A note showing off CSS relative color syntax </aside> </div> <div> <aside data-type="success"> <svg ...></svg> A note showing off CSS relative color syntax </aside> </div> |
CSSは、相対カラー構文（color: rgb(from green r g b);）でカラーを変換します。fromキーワードでベースのカラーを変数で設定し、どのように変換するかを設定します。変換する値にはr g b, h, s, l, l c hなどの色空間だけでなく、r g b / alphaの不透明度やcalc()で入力値と同じにならないように出力することもできます。
|
1 2 3 4 5 6 |
[data-type=error] { --c: red; } [data-type=success] { --c: green; } aside { background: oklch(from var(--c) calc(l * 0.75) c h / 0.5); color: oklch(from var(--c) calc(l * 1.5) c h); } |
前述したように、Firefoxはこの相対カラー構文をサポートしていません。その代わりにcolor-mix()で同じような動作を得ることができるとのことです。
|
1 2 3 4 5 |
aside { background: color-mix( in oklch, var(--c) 50%, oklch(0% 0 0 / 50%) ); } |
元ネタは、下記ポストより。
Use CSS relative color syntax to darken/lighten colors for borders, backgrounds, etc.
.success { --c: green; }
aside {
background: oklch(from var(--c) calc(l * 0.75) c h / 0.5);
color: oklch(from var(--c) calc(l * 1.5) c h);
}Magic! ✨ https://t.co/jT244tltG3 pic.twitter.com/uKC6wTkrUo
— jhey ▲ (@jh3yy) March 21, 2024
sponsors
