画像デュオトーン効果
デュオトーンは画像のトーン範囲を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トランジションでアニメート可能。
関連ツール
画像ヴィネット (周辺光量低下) ジェネレーター
写真にやわらかな放射状ヴィネットを追加 ─ 強さ・ぼかし・半径・楕円/円/矩形の形状・暗く/明るく・自由な色。ブラウザ内処理、アップロードなし。
ティルトシフト / ミニチュア効果
写真をミニチュアジオラマ風に — シャープなフォーカス帯と上下のぼかし、オプションの彩度ブースト、すべてブラウザ内。
画像ぼかし
Gaussian・ボックス・モーションぼかしをブラウザで適用。半径0-64px調整可、等価なCSS filter文字列も提供。
画像ポスタライズ
1 チャンネルあたり N レベルに減らしてフラットなポスターアートの見た目に、オプションで Floyd-Steinberg ディザリングとチャンネルごとのレベル制御。
CSS フィルタープレイグラウンド
blur・brightness・contrast・hue・sepia・invert など 9 種を視覚的に組み合わせ — CSS や Tailwind 任意値でコピー。
画像カラーピッカー
画像をドロップしてクリックするだけで該当画素の HEX / RGB / HSL を取得 — パレットも一緒に。
画像スプライトシートジェネレーター
複数の画像をドロップして単一の PNG スプライトに焼く — 水平、垂直、またはグリッド — 貼り付け可能な CSS background-position ルール付き。