CSS ブレンドモード シミュレーター

使い方

1. Backdrop(下に敷く色)を選択。
2. Source(上に重ねる色)を選択。
3. グリッドを確認 ─ 各モードのライブプレビューと算出された 16 進値が表示されます。
4. タイルをクリックすると `mix-blend-mode: <モード>;` がクリップボードにコピーされます。
5. プリセット(Red on Blue・写真ティンティング・ステッカー・サンセットなど)で典型例を確認できます。

よくある質問

overlay と hard-light の違いは?

overlay は BACKDROP の明度で式を選択します ─ 暗い背景 → multiply、明るい背景 → screen。hard-light は SOURCE の明度で決定 ─ 暗い source → multiply、明るい source → screen。つまり overlay(A, B) == hard-light(B, A) です。「下の色に応じてコントラストを強調」したいなら overlay、「塗る色に応じて突き抜けさせる」なら hard-light を選びます。

hue/saturation/color/luminosity が他のモードと見た目が違うのは?

この 4 つは「非分離(non-separable)」モードで、チャンネル単位の計算ができません。W3C 仕様は 3 つのヘルパーで定義します:lum(rgb) = 0.3R + 0.59G + 0.11B(輝度)、sat(rgb) = max − min、目標値を保ちつつクリップする setLum/setSat。例えば 'color' モードは source の色相+彩度と backdrop の輝度を組み合わせます。モノクロ写真に色を載せるときに mode: color を使う理由です。

ブラウザが実際に描く結果と一致する?

はい ─ プレビューは実 CSS `mix-blend-mode` を使うため、ブラウザが本物のコンポジティングをします。表示される 16 進値はブラウザと同じ W3C 公式を JavaScript で実装した結果なので、チャンネルあたり ±1 程度の丸め誤差内で一致します。差が出る場合は、ブラウザが線形光 sRGB でブレンドする一方このツールはガンマエンコード sRGB を使うための可能性があります ─ W3C 仕様は両方許容、多くのブラウザはガンマエンコードで mix-blend-mode を処理します。

background-blend-mode との違いは?

式は同じで適用対象が違います:mix-blend-mode は要素を背後とブレンド、background-blend-mode は 1 つの要素の複数背景レイヤーを互いにブレンド。本ツールの出力は両方に使えます ─ モード名を該当プロパティに貼るだけです。

関連ツール