colofilter.css核心技术详解：luminosity、hue、hard-light等mix-blend-mode混合模式完全解析-育师

colofilter.css核心技术详解：luminosity、hue、hard-light等mix-blend-mode混合模式完全解析

【免费下载链接】colofilter.cssColofilter.css - Duotone filters made with CSS !项目地址: https://gitcode.com/gh_mirrors/co/colofilter.css

colofilter.css是一个用纯 CSS 实现双色调（Duotone）滤镜效果的开源项目：无需 Photoshop，只需给图片加上mix-blend-mode混合模式，就能一键把照片变成红、蓝、黄、粉等 27 种电影感双色调风格，灵感来自 Spotify 2015 年那波刷屏的品牌视觉。下面带你完全搞懂它背后的核心技术。

双色调滤镜的核心原理：两层叠加

colofilter.css 的魔法只来自两个 CSS 属性：mix-blend-mode（混合模式）和filter（滤镜函数）。

它的思路是"三层叠加"：

图片层：先把原图变成灰度图；
颜色层：用::after伪元素铺一层纯色或渐变背景；
混合层：让颜色层和灰度图按特定混合模式"化学反应"。

图中展示 colofilter.css 支持的全部滤镜：7 种单色 × 3 档明暗 + 3 组渐变色，每种都标注了对应的类名（如.blend-blue-dark）

逐个解析关键混合模式

1. luminosity（亮度模式）：把图片"榨干"成灰度

在 styles/colofilter.scss 中，所有[class^="blend"]容器的图片都默认应用：

img { mix-blend-mode: luminosity; }

luminosity是理解整个项目的钥匙：它只保留颜色的明度（亮度），丢弃色相和饱和度。也就是说，不管原图是蓝天还是绿草，叠上任何颜色后都会变成一张对比强烈的黑白照片——这正是双色调的"单色底"。

💡 项目演示页里还额外用filter: grayscale(100%) contrast(1.2)增强灰度质感，见 styles/main.scss。

2. hue（色相模式）：给灰度图"注入"颜色

颜色层默认使用hue混合模式，并搭配对比度滤镜：

&:after { content: ''; width: 100%; height: 100%; filter: contrast(1.3); mix-blend-mode: hue; }

hue模式只取颜色层的色调（色相），亮度则继承自下层灰度图。于是你看到的"蓝色滤镜"，其实是：灰度图的明暗 + 蓝色的色调。这就是为什么不同颜色的滤镜下，照片的明暗细节几乎完全一致。

🎨 各颜色值定义在 styles/colofilter.scss 的$color-map变量表中（如'red': '#E50914'、'blue': '#0066BF'），改一张表就能定制整组滤镜。

3. hard-light（强光模式）：加强色彩冲击力

并非所有颜色都用hue。部分滤镜改用hard-light（强光）叠加，效果更浓更"冲"：

// 蓝色滤镜（非 dark/light 档） &:not([class*="-dark"]):not([class*="-light"]) { &:after { mix-blend-mode: hard-light; filter: brightness(0.6); } }

hard-light根据下层明度决定是变暗还是变亮：暗部更暗、亮部更亮，对比被放大。所以blend-red用hard-light+contrast(0.6) brightness(1.2)得到浓郁暖调，而blend-blue压暗到brightness(0.6)呈现出深邃的赛博感。

📌 完整的逐色配方见 styles/colofilter.scss：每一种颜色都是"混合模式 + 滤镜参数"手工调校过的组合。

dark / light 变体：混合模式的"明暗开关"

同一颜色还提供-dark和-light两档，核心技巧是把两层的混合模式对调：

变体	图片层`img`	颜色层`::after`
默认	`luminosity`	`hue`/`hard-light`等
`-dark`	`darken`（变暗）	`lighten`（提亮）
`-light`	`lighten`（变亮）	`darken`（压暗）

&[class*="-dark"] { img { mix-blend-mode: darken; } &:after { mix-blend-mode: lighten !important; } } &[class*="-light"] { img { mix-blend-mode: lighten; } &:after { mix-blend-mode: darken !important; } }

这就是 styles/colofilter.scss 里-dark/-light的通用规则——用darken/lighten两个互补模式控制明暗走向，再叠加特殊配方：

🔴blend-red-light：color-dodge+saturate(400%)，得到极亮的荧光红；
🟡blend-yellow-dark：color-dodge+hue-rotate(70deg)，偏金的复古调；
🟣blend-purple-light：超高saturate(520%) brightness(10.5)，梦幻淡紫。

另外 3 组双色系（blue-yellow、pink-yellow、red-blue）不用单色背景，而是直接铺linear-gradient渐变，再配合hard-light/screen等模式，做出从上到下的双色渐变双色调。

三步上手 colofilter.css

第一步：把 styles/colofilter.css 引入页面<head>：

<link href="path/to/colofilter.css" rel="stylesheet">

第二步：给包含图片的容器加上滤镜类名，命名规则是blend-颜色，可选加-dark/-light后缀：

<div class="blend-blue"> <img src="your-photo.jpg" alt="示例照片"> <span>lorem</span> </div>

第三步：换类名即换风格，blend-red-dark、blend-yellow-light、blend-pink-yellow等 27 个组合随意切换。

需要本地完整体验的话，可以克隆仓库：

git clone https://gitcode.com/gh_mirrors/co/colofilter.css

然后打开 index.html，点击任意图片即可复制对应类名（由 scripts/main.js 配合 scripts/clipboard.min.js 实现）。

浏览器兼容性与使用建议

⚠️注意：hue、saturation、color、luminosity这几个模式目前 IE、Edge、Opera Mini 完全不支持，Safari（桌面与 iOS）也缺失支持，详见 index.html 中的兼容性说明；Chrome、Firefox 等现代浏览器均可正常使用。
图片必须是块级、100% 宽度铺满容器（overflow: hidden），伪元素才能完美覆盖。
想作用于background-image时，需改用"透明占位元素 + 混合模式"方案，思路一致。
双色调适合品牌视觉、Banner、作品集等强风格化场景；日常照片慎用color-dodge配方，高光容易过曝。