画像デュオトーン効果
画像
デュオトーンは画像のトーン範囲を2色間のグラデーションに置き換える — シャドウは暗い色、ハイライトは明るい色、中間トーンは補間。結果はSpotifyカバー·インディーアルバムアート·編集写真で見た象徴的なルック。このビルダーはブラウザのキャンバスでデュオトーンを実行（アップロードなし）→ マシンが処理できる任意の画像サイズで動作。ミッドポイントスライダーはカラー分割が起こる場所をシフト、コントラストはカーブを急峻化または平坦化。出力はダウンロード可能なPNG + 同等のSVG `feColorMatrix`+`feComponentTransfer` フィルター → 再ラスタライズなしでCSS `filter: url(#duotone)` 経由で同じ効果を適用可能。
—
使い方
- 画像をドロップ。プリセット（Spotifyグリーン-ブラックがクラシック）またはカスタム2色hexを選択。
- ミッドポイントをスライドしてシャドウ終了とハイライト開始を制御。コントラストでよりパンチのある、または柔らかいトランジション。
- PNGダウンロード、またはSVGフィルターをコピーしてサイト内任意要素にCSS経由で同じ効果を適用。
よくある質問
- なぜ中央が濁って見える?
- デフォルトのコントラスト0は2色間の線形ランプ。コントラストを上げるとトランジションが急峻化 — 多くの中間グレーを持つ画像が濁った混合色になる場合に便利。下げるとより柔らかく絵画的なグラデーション。ミッドポイントスライダーは露出不均等な写真の分割位置をシフト。
- SVGフィルター版の動作?
- `feColorMatrix` で画像をグレースケール変換（BT.709輝度係数使用）、次に `feComponentTransfer` の `table` 関数で各チャネルをシャドウとハイライトのRGB値間の2点グラデーションにリマップ。結果: キャンバス版と同じ効果、ただしラスタライズなしで — SVGフィルター上のCSSトランジションでアニメート可能。