实时预览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文件中使用。
数据会上传到服务器吗？
不会。所有颜色计算都在浏览器本地完成，不会上传任何数据。