CSS 混合模式模拟器
颜色
CSS `mix-blend-mode` 把 Photoshop 中熟悉的 16 种混合模式直接搬到了 Web 上 — multiply·screen·overlay·darken·lighten·color-dodge·color-burn·hard-light·soft-light·difference·exclusion,以及 HSL 风格的 4 种非分离(non-separable)模式(hue·saturation·color·luminosity)。本工具用纯 JavaScript 完整实现了 W3C Compositing & Blending Level 1 中的算法,计算 source(前景)叠加到 backdrop(背景)上后的颜色。每种模式都同时给出使用真实 `mix-blend-mode` CSS 的实时预览与算出的十六进制值,既能验证浏览器实际渲染结果,也能直接复制片段。分离模式逐通道计算;非分离模式使用 W3C 的 setLum/setSat/clipColor 辅助函数在感知亮度/饱和度空间中工作。
—
基础
变暗 / 变亮
对比
非分离 (HSL)
预设
说明
实现 W3C Compositing & Blending Level 1 规范。分离模式(multiply、screen 等)逐通道计算;非分离模式(hue、saturation、color、luminosity)使用 lum = 0.3R + 0.59G + 0.11B,并通过 setLum/setSat/clipColor 辅助函数保持亮度/饱和度。点击任一卡片即可复制对应的 mix-blend-mode CSS 声明。
使用方法
- 选择 Backdrop(底层颜色)。
- 选择 Source(在上层混合的颜色)。
- 浏览网格 — 每种模式都显示实时预览和算出的十六进制值。
- 点击任一卡片可把 `mix-blend-mode: <模式>;` 复制到剪贴板。
- 试试预设(蓝底红、照片着色、贴纸、日落)看典型用例。
常见问题
- 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 看起来与其他模式差别这么大?
- 这四个是"非分离"(non-separable)模式,无法逐通道计算。W3C 规范通过三个辅助函数定义:lum(rgb) = 0.3R + 0.59G + 0.11B(亮度)、sat(rgb) = max − min,以及保持目标值并做裁剪的 setLum/setSat。例如"color"模式取 source 的色相+饱和度,以及 backdrop 的亮度。给黑白照片着色就常用 mode: color。
- 和浏览器实际渲染一致吗?
- 一致 — 预览使用真实 CSS `mix-blend-mode`,所以是浏览器在做真正的合成。显示的十六进制值是用 JavaScript 实现的同一套 W3C 公式算出的,所以两者应在每通道 ±1 的舍入误差内一致。如果有差异,通常是因为浏览器在线性光 sRGB 中混合,而本工具使用伽马编码的 sRGB;W3C 规范两者都允许。
- 和 background-blend-mode 的关系?
- 公式相同,适用对象不同:mix-blend-mode 是元素与其后面的内容混合;background-blend-mode 是一个元素自身的多个背景层之间混合。本工具的结果两者都适用 — 把模式名粘到你使用的属性上即可。