自定义调色板

了解如何创建自定义 Radix Colors 调色板。

使用自定义调色板工具，仅基于几个参考颜色生成 Radix Colors 色阶。 对结果满意后，将生成的 CSS 粘贴到你的项目中，并像使用常规 Radix Colors 色阶一样使用它们。

生成的色阶基于 Radix Colors 色阶本身，因此它们可以很好地与类似的组件设计配合使用。 只要你使用合理的背景颜色，对比度将与 Radix Colors 提供的对比度相似。

你将获得

你的自定义调色板将包括 Radix Colors 的步骤 1 到 12，以及它们的 alpha 变体和广色域颜色定义。 需要广色域颜色定义以确保 alpha 颜色在广色域色彩空间（例如支持 P3 的 Apple 显示器）中以完全饱和度显示。 这是因为 alpha 混合在 P3 中的工作方式与 sRGB 中不同。

在“理解色阶”指南中了解基本调色板构成。 生成的 CSS 还包括一些 Radix Themes 独有的额外颜色，例如

• 表面颜色，由某些 variant="surface" 组件使用
• 指示器颜色，由 Checkbox、Radio 和 Tabs 等组件使用
• 轨迹颜色，由 Slider 和 Progress Bar 等组件使用

你可以随意从生成的 CSS 中删除不需要的颜色。

颜色格式

你可以在输入字段中使用任何常见的 CSS 颜色格式，甚至可以使用广色域色彩空间，例如 color(display-p3 1 0.5 0)。 生成的 CSS 将提供最接近的 sRGB 回退。

深色主题

要生成深色主题颜色，请在网站标题中将外观切换为深色。 确保在浅色主题颜色覆盖之后粘贴生成的 CSS。