🎨 CSS相对颜色生成器

免费在线CSS相对颜色生成器,可视化创建CSS相对颜色语法。支持oklch/lab/lch/hsl/rgb颜色空间,实时预览,无需注册。 | 无需注册 · 数据绝不上传服务器

零依赖·可离线使用

🎯 基础颜色

原色
结果

⚙️ 颜色空间与调整

📄 生成的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+已支持。

数据会上传到服务器吗?

不会。所有处理都在浏览器本地完成。

CSS相对颜色生成器 | 无需注册 · 数据绝不上传服务器

问题反馈: dexshuang@google.com