免费在线CSS color-mix()函数可视化生成器，混合两种颜色并选择混合模式和比例，实时预览混合颜色效果，一键复制CSS代码。纯前端本地运行。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
颜色设置
预设方案
实时预览
#ff6b6b
#4ecdc4
混合色
生成的 CSS 代码
color-mix(in srgb, #ff6b6b 50%, #4ecdc4 50%);
使用说明
CSS color-mix() 函数混合两种颜色，指定色彩空间和比例。
语法： color-mix(in <colorspace>, <color1> <percentage>, <color2> <percentage>)
色彩空间： sRGB（标准）、OKLCH（感知均匀）、HSL（色相饱和）、Lab（感知）等
提示： 颜色比例总和不必等于100%，浏览器会自动归一化。