色阶生成器

色阶生成器根据一个主色自动推导 50、100、200 一直到 950 的深浅色阶,以及与第二个颜色的混合渐变,每个色块给出 HEX、RGB、HSL 色值,点击即可复制,还能一键输出 CSS 自定义属性变量,适合搭建设计系统、主题色、按钮 hover/active 状态和图表配色,浏览器本地计算,免费使用。

色阶生成器:选一个主色就得到 50~950 共 11 档深浅,也可以把两个颜色线性混合出过渡色,支持复制 CSS 变量、全部 HEX 或过渡色值,适合快速定一套配色。

主色

主色阶

50 最浅、950 最深;500 即主色本身。浅色档适合做背景,深色档适合做 hover / active 和文字。

双色混合

在两色之间取 10 等分,常用于渐变、图表色带和状态色过渡。