做深色模式配色不再瞎调：Radix Colors 开源免费，明暗同步设计

做深色模式最难的不是把背景改成黑色，而是让所有颜色在深色底上都还能看。Radix Colors 的每套色板都同时提供了浅色与深色两个版本，且逐档对应。

它解决什么问题

深色模式常常是「浅色配色硬改」，导致文字对比不足、颜色发脏。

自己调色阶很难保证每一档的对比度都达标，尤其是有色背景上的文字。

核心能力

深色模式配色的三个要点

第一，深色模式不是把白底变黑底。深色底上的颜色要「降饱和、提亮」，直接把浅色模式的颜色搬过去会显得刺眼或发脏。

第二，深色底上的文字不要用纯白。纯白与深底对比度过高，长时间阅读容易疲劳，用略偏灰的白更舒服。

第三，深色模式下的「层级」靠明度而不是靠阴影。浅色模式用阴影表达凸起，深色模式应该用底色明度差来表达。

同类工具怎么选

谁适合用

• 做深色模式适配的前端与产品设计
• 独立开发者，需要一套现成、可直接用的配色体系
• 做数据可视化，需要明暗两套色板的场景

怎么开始

1. 打开 radix-ui.com/colors，浏览色相列表。
2. 选定主色，看 12 档色阶分别对应的用途说明。
3. 复制色值，或按官方文档安装对应的包。
4. 注意区分 Light 与 Dark 两组变量，按主题切换。
5. 文字与背景的搭配优先用语义色（如 text / background），而不是自己挑档位。

常见问题

和 Tailwind 配色比呢？
Tailwind 提供的是基础色板，Radix 的色阶设计更偏向「每一档都有明确用途」，更适合做完整设计系统。

必须配 Radix UI 组件用吗？
不用，色板可以单独使用。

能用在印刷物料吗？
色值可自由使用，但印刷需注意色域与屏幕显示的差异。

授权与合规

Radix Colors 以 MIT 许可证发布，可免费用于个人与商业项目。 官网：www.radix-ui.com/colors。