免费在线CSS color-mix()函数测试工具，实时预览颜色混合效果，支持多种色彩空间和混合比例。纯前端本地运行，数据不上传。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用实时预览CSS color-mix()颜色混合效果，支持多种色彩空间 CSS Color Level 5零依赖
🎨 颜色选择
📊 混合结果
渐变预览
步进色阶
🔄 色彩空间对比
同一对颜色在不同色彩空间下的混合效果对比：
兼容性检测
什么是CSS color-mix()函数？
color-mix()是CSS Color Level 5规范中新增的颜色函数，允许在CSS中直接混合两种颜色。语法为color-mix(in 色彩空间, 颜色1 百分比, 颜色2 百分比)，支持srgb、oklch、lch等多种色彩空间。
不同色彩空间有什么区别？
不同色彩空间的混合效果不同：srgb在RGB空间线性插值可能产生不自然的中间色；oklch基于人眼感知混合结果更自然；hsl在色相环上插值可能产生意外的鲜艳色。推荐使用oklch获得最自然的混合效果。
浏览器兼容性如何？
color-mix()已被所有主流浏览器支持：Chrome 111+、Firefox 113+、Safari 16.2+。本工具会实时检测你的浏览器是否支持该函数。
如何复制生成的CSS代码？
点击结果区域的"复制CSS"按钮即可将color-mix()代码复制到剪贴板，直接粘贴到你的CSS文件中使用。
数据会上传到服务器吗？
不会。所有颜色计算都在浏览器本地完成，不会上传任何数据。
什么是CSS color-mix()函数？
color-mix()是CSS Color Module Level 5规范中引入的强大颜色函数，允许开发者直接在CSS中混合两种颜色，无需预计算或使用CSS变量技巧。它支持8种色彩空间，每种空间产生不同的混合效果。
支持的色彩空间
- oklch：基于人眼感知的色彩空间，混合结果最自然，推荐首选
- oklab：与oklch类似的感知均匀空间，效果接近
- srgb：标准RGB空间，线性插值可能产生不自然的中间色
- srgb-linear：线性RGB空间，物理准确但感知不均匀
- lch：CIELCH空间，感知均匀但不如oklch
- lab：CIELAB空间，传统感知均匀空间
- hsl：色相-饱和度-亮度，色相插值可能产生意外鲜艳色
- hwb：色相-白度-黑度，适合创建柔和色调
color-mix()的实际应用
color-mix()在现代CSS开发中有广泛应用：创建主题色变体（如hover状态变暗）、生成半透明叠加色、构建渐变色阶、实现暗色/亮色模式切换、创建设计系统中的色彩派生规则。