混色器
在 OKLab、OKLCH 或 sRGB 中按任意比例混合两种颜色。复制结果或现成的 color-mix() 表达式。
混合空间
结果#ae7ea4
- HEX
- RGB
- OKLCH
带回退的 CSS
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);从第一种到第二种的过渡
同一混合在各空间中的效果
sRGB 的中间会变灰变暗。OKLab 让亮度保持均匀。OKLCH 和 HSL 保留饱和度，但会沿色相环绕行。
常见问题
CSS 中的 color-mix() 是什么？
color-mix() 是一个 CSS 函数，可以在你指定的色彩空间中混合两种颜色，例如 color-mix(in oklab, #ff5733, #3b82f6 30%)。所有当前主流浏览器都支持它。为了兼容旧浏览器，请像上面的代码片段那样，在它前面先写一个普通颜色作为回退值。
应该在哪个色彩空间里混合？
OKLab 是最稳妥的默认选择：中间色能保持明亮，不会发浑。OKLCH 能保持颜色饱和，但会沿色相环走最短路径，所以红色和蓝色之间会经过紫色和粉色。sRGB 是老工具的混合方式，中间色常常显得灰暗。
为什么光的混合和颜料的混合不一样？
屏幕是叠加光线，所以这个工具对光的数值取平均：蓝色和黄色混合得到灰色或很浅的颜色，而不是绿色。颜料是吸收光线，所以同样的组合画在纸上会变成绿色。想预测颜料混色效果，请使用颜料混合模型，而不是屏幕色彩空间。