← 云枢 AI 导航 · 工具库

颜色格式转换：一个颜色，四种写法，一套色阶

设计师给 HEX、前端要 rgb()、配置文件要 hsl()——同一个颜色四种写法。顺便把 10 级色阶也生成出来。

立即使用 → English

做设计系统时最耗时的不是选主色，而是定深浅层级：hover 用哪个、disabled 用哪个、边框用哪个。手工调十几个色值，往往越调越乱。

这里的做法是保持色相与饱和度不变，只按 HSL 明度递减生成 50-900 十级色阶。这是最不容易跑偏的方法——所有层级看起来还是同一个色系。

它会检查什么

常见问题

色阶是怎么算的？

保持色相和饱和度不变，只降低 HSL 的明度（L）。所以整套色阶看起来是同一个颜色的深浅，而不是十个不同颜色。

支持透明度吗？

不支持。带 alpha 的颜色请用 rgba()，并配合「颜色对比度检查」判断可读性——透明度会改变实际呈现的对比度。

为什么 HEX 是小写？

和主流设计工具（Figma、Tailwind）一致。大小写在 CSS 里等价，但统一格式能减少 diff 噪音。

相关工具