CSSフィルター・backdrop-filter
filterとbackdrop-filterをスライダーでプレビューしながら作ります。HEXの色から、黒いアイコンをその色にするfilterも求められます。
スライダーを動かすと、その場でCSSを作ります。
CSS
HEX の色から filter を求める
黒いアイコンや SVG を、filter だけで指定の色に見せるための値を求めます。filter の組み合わせは式で解けないため、 最適化で近い値を探します。計算するたびに結果が少し変わります。
色を入れると計算します。
- filter —
- 誤差（loss） —
- 実際にできる色 —
補足
- filter は書いた順に左から適用されます。出力はこの画面の並び順で、既定値（変化なし）のままの関数は書きません。
-
backdrop-filter は要素の背後に効きます。要素自体の背景が不透明だと効果が見えないため、半透明の背景と組み合わせて使います。Safari 向けに
-webkit-backdrop-filterも一緒に出します。 - 「HEX の色から filter を求める」は近似です。誤差（loss）が 1 未満ならほぼ一致、5 未満ならかなり近い目安です。大きいときは「もう一度計算」で改善することがあります。黒（#000000）の要素が前提で、それ以外の色の要素には「先頭で黒にする」をオンにしてください。
- プレビューは画像を使わず CSS だけで描いています。入力した値は、この端末の外へ出ません。
よくある質問
filter と backdrop-filter は何が違いますか？
filter は要素そのもの（中の文字や画像）に効き、backdrop-filter は要素の背後に見えているものに効きます。すりガラス風の表現は、半透明の背景を持つ要素に backdrop-filter: blur() をかけて作ります。上の切り替えで出力とプレビューが入れ替わります。
出力に書かれない関数があるのはなぜですか？
既定値（brightness 100%、blur 0 など、見た目を変えない値）のままの関数は書かないためです。すべて既定値なら none を出力します。filter は左から順に適用されるので、出力はこの画面の並び順で書きます。
HEX の色から filter を求める機能は、正確な色になりますか？
完全に一致する保証はありません。filter の組み合わせは式で解けないため、最適化で近い値を探す近似です。誤差（loss）を一緒に表示し、1 未満ならほぼ一致、5 未満ならかなり近い目安です。計算するたびに結果が少し変わるので、誤差が大きいときは「もう一度計算」を押してください。
黒ではないアイコンにも使えますか？
使えます。「元の色が黒でない要素にも使う」をオンにすると、先頭に brightness(0) saturate(100%) を付けて一度黒にしてから色を付けます。透明な部分は透明のままですが、元の濃淡は失われ、不透明な部分はすべて同じ 1 色の塗りつぶしになります。
プレビューに自分の画像を使えますか？
できません。プレビューは CSS だけで描いた見本です。出力した CSS を自分のページの画像やアイコンに当てて確認してください。