双色调

下面四张"图"色温、影调完全不一样(冒充来自不同摄影师)。双色调把它们压成 同一套两色映射——图还是那张图,但整页突然是一套体系了。 悬停任意一张恢复原色。

应用后

原图(未处理)

拼在一起像剪贴板 —— 这就是双色调要解决的问题

两个最常见的翻车点

图片信息会丢失——产品图、人像、任何"细节即内容"的图别用, 双色调是给氛围图和背景图的。
两个混合层 = 两个合成层,长列表里每张图都用会明显吃性能;列表用预处理好的图, 双色调留给 hero。
要更精确的映射(能控中间调)用 SVG feComponentTransfer,CSS 混合版是快而糙的那条。
配色排版是占位。进项目要跟项目的设计体系走(库规范铁律 6)。