CSS3のブレンドモード(描画モード)の比較デモ

乗算

「掛ける」という意味あいの乗算は、色と色が重なる部分が暗くなる

.multiply { mix-blend-mode: multiply; }
.bg-multiply { background-blend-mode: multiply; }

スクリーン

重ねれば重ねる程、明るくなり白に近づく

.screen { mix-blend-mode: screen; }
.bg-screen { background-blend-mode: screen; }

オーバーレイ

下の色が暗いと「乗算」、明るいと「スクリーン」が適用される

.overlay { mix-blend-mode: overlay; }
.bg-overlay { background-blend-mode: overlay; }

焼き込み

焼き込みは基本色の色相を保ちつつ重ねた色を暗くする

.color-burn { mix-blend-mode: color-burn; }
.bg-color-burn { background-blend-mode: color-burn; }

覆い焼き

色相は維持しつつ、明るい部分がより明るくなりコントラストが高くなる

.color-dodge { mix-blend-mode: color-dodge; }
.bg-color-dodge { background-blend-mode: color-dodge; }

ソフトライト

オーバーレイと似た効果だがコントラストが弱い

.soft-light { mix-blend-mode: soft-light; }
.bg-soft-light { background-blend-mode: soft-light; }

ハードライト

オーバーレイと似た効果だがコントラストが強い

.hard-light { mix-blend-mode: hard-light; }
.bg-hard-light { background-blend-mode: hard-light; }

比較(暗)

2つの重なり合う色(基本色と合成色)を比較してより暗い方の色を適用する

.darken { mix-blend-mode: darken; }
.bg-darken { background-blend-mode: darken; }

比較(明)

重なる色(RGB)の数値の明るい方を適用する

.lighten { mix-blend-mode: lighten; }
.bg-lighten { background-blend-mode: lighten; }

差の絶対値

合成色と基本色のカラーチャンネルを比較し、明るさの値の大きい方から小さい方を取り除く

.difference { mix-blend-mode: difference; }
.bg-difference { background-blend-mode: difference; }

除外

差の絶対値と似た効果だが、コントラストは低くなる

.exclusion { mix-blend-mode: exclusion; }
.bg-exclusion { background-blend-mode: exclusion; }

色相

下部レイヤーの彩度と輝度を維持しつつ、上部レイヤーの色相を合成する

.hue { mix-blend-mode: hue; }
.bg-hue { background-blend-mode: hue; }

彩度

下部レイヤーの彩度と輝度を維持しつつ、上部レイヤーの彩度を合成する

.saturation { mix-blend-mode: saturation; }
.bg-saturation { background-blend-mode: saturation; }

カラー

下部レイヤーの輝度を維持しつつ、上部レイヤーの彩度と色相を合成する

.color { mix-blend-mode: color; }
.bg-color { background-blend-mode: color; }

輝度

ベースカラーの色相と彩度、そして合成色の輝度を使用してカラーを作成する

.luminosity { mix-blend-mode: luminosity; }
.bg-luminosity { background-blend-mode: luminosity; }