CSS フィルター生成

CSSの filter プロパティは、ファイルを編集せずに、あらゆる要素・画像・動画へぼかし、明るさ、コントラスト、グレースケール、セピア、色相回転、反転、ドロップシャドウなどの写真風エフェクトを適用します。このジェネレーターはスライダーやプリセットから値を作り、サンプルの画面でブラウザー上にプレビューします。2つ目のモードは「黒いSVGアイコンをCSSで #2563EB にするには？」というよくある悩みを解きます。黒を目標の色に変えるフィルターの連鎖を探索し、どれだけ近づいたかを報告します。

使い方

1. 「フィルターを作る」を選んで値を設定するか、モノクロやビンテージなどのプリセットを選びます。
2. 必要なら、内容の輪郭に沿ったドロップシャドウを追加します。
3. アイコンの色を変えるときは「黒いアイコンの色を変える」に切り替え、目標の色を入力して「先にアイコンを黒にする」をオンにしたままにします。
4. CSSをコピーします。色変換モードでは色の誤差を確認し、2を超えていたら別のシードを試してください。

計算式

brightness: C′ = C × b · contrast: C′ = (C − 0.5) × c + 0.5 · invert: C′ = i + C × (1 − 2i) · sepia, saturate, hue-rotate: 3 × 3 color matrices from the Filter Effects spec

Cは0〜1のチャンネル値で、各段階の結果は0〜1に収められます。色変換の求解は黒から出発してこれらの式を評価し、invert、sepia、saturate、hue-rotate、brightness、contrastについて同時摂動確率近似（シード付きのランダム探索）を行い、RGBとHSLの差でスコアを付けます。

計算例

初期値では filter: brightness(110%) contrast(120%) saturate(130%); となり、メリハリのある写真になります。モノクロのプリセットは grayscale(100%) contrast(110%) です。白いアイコンは invert(100%) だけで黒が白になるため、誤差がほぼない連鎖が見つかります。青 #2563EB はシード1でΔE 2以内に収まり、アイコンサイズでは見えないほどの差です。