🎯 基础颜色
原色
→
结果
⚙️ 颜色空间与调整
📄 生成的CSS代码
🎨 变体预览
📖 什么是CSS相对颜色语法?
CSS相对颜色语法(Relative Color Syntax)是CSS Color Level 4的新特性,允许你基于一个现有颜色的通道值来创建新颜色。
语法格式
color-space(from <color> channel1 channel2 channel3 / alpha)
示例
oklch(from #3b82f6 calc(l + 0.2) c h) - 基于蓝色创建更亮的变体
hsl(from #3b82f6 h calc(s * 0.5) l) - 降低饱和度
rgb(from #3b82f6 r g b / 0.5) - 半透明版本
浏览器支持
✅ Chrome 119+ | ✅ Edge 119+ | ✅ Safari 16.4+ | 🔄 Firefox (开发中)
❓ 常见问题
CSS相对颜色生成器是免费的吗?
是的,完全免费使用,无需注册。
什么是CSS相对颜色语法?
CSS相对颜色语法允许基于现有颜色通过调整通道值来生成新颜色。
支持哪些颜色空间?
支持oklch、oklab、lab、lch、hsl、hwb、rgb等CSS颜色空间。
浏览器兼容性如何?
Chrome 119+、Edge 119+、Safari 16.4+已支持。
数据会上传到服务器吗?
不会。所有处理都在浏览器本地完成。