Radix 12 色阶生成器

为 Radix UI / shadcn 生成完整 12 阶色板——命名、语义和对比度要求完全对齐 Radix 规范

选色

CSS 变量名 --brand-1 … -12

12 色阶

点击色块复制 HEX；Step 9 显示白色文字对比度

Light

Dark

123456 789101112

1–2 背景 3–5 组件 6–8 边框 9–10 纯色 11–12 文字

语义对照表

每个色阶的官方语义、典型用途及对比度验证

界面预览

Radix色阶系统使用说明

基于Radix Colors规范生成12步语义UI色阶，覆盖背景、组件、边框、文字语义层级，每步有明确使用场景定义，完美适配Radix UI组件库。 12 个色阶各自对应明确的使用场景，从背景到文字层级都有清晰定义，不需要自己摸索每一步该用在哪里。

适合已经决定采用 Radix UI 组件库、或者想借鉴其色彩体系搭建自有设计系统的团队。

常见问题

什么是 Radix 色阶？ 遵循 Radix Colors 规范的 12 步语义色阶，每档对应角色——背景、组件、边框、文字——用于无障碍 UI。

这 12 档分别代表什么？ 大致：1–2 背景，3–5 组件背景，6–8 边框分隔，9–10 实色，11–12 文字——跨色相统一的体系。

这与 Radix UI 兼容吗？ 兼容——色阶遵循与 Radix UI 组件相同的档位语义，生成的颜色可直接接入该系统。