乗算
「掛ける」という意味あいの乗算は、色と色が重なる部分が暗くなる
- 通常
- 背景：黄
.multiply { mix-blend-mode: multiply; }
.bg-multiply { background-blend-mode: multiply; }
.bg-multiply { background-blend-mode: multiply; }
スクリーン
重ねれば重ねる程、明るくなり白に近づく
- 通常
- 背景：同画像
.screen { mix-blend-mode: screen; }
.bg-screen { background-blend-mode: screen; }
.bg-screen { background-blend-mode: screen; }
オーバーレイ
下の色が暗いと「乗算」、明るいと「スクリーン」が適用される
- 通常
- 背景：同画像
.overlay { mix-blend-mode: overlay; }
.bg-overlay { background-blend-mode: overlay; }
.bg-overlay { background-blend-mode: overlay; }
焼き込み
焼き込みは基本色の色相を保ちつつ重ねた色を暗くする
- 通常
- 背景：同画像
.color-burn { mix-blend-mode: color-burn; }
.bg-color-burn { background-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; }
.bg-color-dodge { background-blend-mode: color-dodge; }
ソフトライト
オーバーレイと似た効果だがコントラストが弱い
- 通常
- 背景：同画像
.soft-light { mix-blend-mode: soft-light; }
.bg-soft-light { background-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; }
.bg-hard-light { background-blend-mode: hard-light; }
比較（暗）
2つの重なり合う色（基本色と合成色）を比較してより暗い方の色を適用する
- 通常
- 背景：赤
.darken { mix-blend-mode: darken; }
.bg-darken { background-blend-mode: darken; }
.bg-darken { background-blend-mode: darken; }
比較（明）
重なる色（RGB）の数値の明るい方を適用する
- 通常
- 背景：青
.lighten { mix-blend-mode: lighten; }
.bg-lighten { background-blend-mode: lighten; }
.bg-lighten { background-blend-mode: lighten; }
差の絶対値
合成色と基本色のカラーチャンネルを比較し、明るさの値の大きい方から小さい方を取り除く
- 通常
- 背景：赤
.difference { mix-blend-mode: difference; }
.bg-difference { background-blend-mode: difference; }
.bg-difference { background-blend-mode: difference; }
除外
差の絶対値と似た効果だが、コントラストは低くなる
- 通常
- 背景：黄
.exclusion { mix-blend-mode: exclusion; }
.bg-exclusion { background-blend-mode: exclusion; }
.bg-exclusion { background-blend-mode: exclusion; }
色相
下部レイヤーの彩度と輝度を維持しつつ、上部レイヤーの色相を合成する
- 通常
- 背景：オレンジ
.hue { mix-blend-mode: hue; }
.bg-hue { background-blend-mode: hue; }
.bg-hue { background-blend-mode: hue; }
彩度
下部レイヤーの彩度と輝度を維持しつつ、上部レイヤーの彩度を合成する
- 通常
- 背景：緑
.saturation { mix-blend-mode: saturation; }
.bg-saturation { background-blend-mode: saturation; }
.bg-saturation { background-blend-mode: saturation; }
カラー
下部レイヤーの輝度を維持しつつ、上部レイヤーの彩度と色相を合成する
- 通常
- 背景：赤
.color { mix-blend-mode: color; }
.bg-color { background-blend-mode: color; }
.bg-color { background-blend-mode: color; }
輝度
ベースカラーの色相と彩度、そして合成色の輝度を使用してカラーを作成する
- 通常
- 背景：グレー
.luminosity { mix-blend-mode: luminosity; }
.bg-luminosity { background-blend-mode: luminosity; }
.bg-luminosity { background-blend-mode: luminosity; }