图像双色调效果
图片
双色调用两种颜色之间的渐变替换图像的色调范围 — 阴影变成暗色，高光变成亮色，中间色调插值。结果是你在 Spotify 封面、独立专辑艺术和编辑摄影中看到的标志性外观。这个构建器在你浏览器的 canvas 中运行双色调（无上传），所以适用于你机器能处理的任何图像大小。中点滑块移动颜色分割发生的位置；对比度使曲线更陡或更平。输出是可下载的 PNG，加上等效的 SVG `feColorMatrix` + `feComponentTransfer` 滤镜，所以你可以通过 CSS `filter: url(#duotone)` 应用相同效果而无需重新光栅化。
—
使用方法
- 拖入图像。选预设（Spotify 绿黑是经典）或两种自定义 hex 颜色。
- 滑动中点控制阴影结束和高光开始的位置。调整对比度获得更强或更柔的过渡。
- 下载 PNG，或复制 SVG 滤镜以通过 CSS 在站点中任何元素上应用相同效果。
常见问题
- 为什么中间看起来浑浊?
- 默认对比度 0 是两色之间的线性斜坡。提高对比度使过渡变陡 — 当你的图像有很多中间灰色变成浑浊混合色时有用。降低给出更柔和、更绘画式的渐变。中点滑块为曝光不均的照片移动分割发生位置。
- SVG 滤镜版本如何工作?
- 用 `feColorMatrix` 将图像转换为灰度（使用 BT.709 亮度系数），然后用 `feComponentTransfer` 的 `table` 函数将每个通道重新映射到阴影和高光 RGB 值之间的 2 点渐变。结果：与 canvas 版本相同的效果，但无需光栅化 — 并可通过 SVG 滤镜上的 CSS 过渡进行动画。