自定义调色板

学习如何创建自定义 Radix 颜色调色板。

使用 自定义颜色调色板工具 来生成一个基于几个参考颜色的 Radix 颜色色阶。当您对结果满意时，将生成的 CSS 粘贴到您的项目中，并以与常规 Radix 颜色色阶相同的方式使用它们。

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

您会得到什么

您的自定义颜色调色板将包括 Radix 颜色的步骤 1 到 12，以及它们的 alpha 变体和宽色域颜色定义。宽色域颜色定义用于确保在宽色域色彩空间（例如，支持 P3 的苹果显示器）中以全饱和度显示 alpha 颜色。这是因为在 P3 中，alpha 混合的工作原理与 sRGB 不同。

了解基本调色板组成的内容，请参见 理解色阶 指南。生成的 CSS 还包括一些仅在 Radix 主题 中使用的额外颜色，例如：

• 表面颜色，用于某些 variant="surface" 组件
• 指示颜色，用于复选框、单选按钮和标签等组件
• 轨道颜色，用于滑块和进度条等组件

请随意删除生成的 CSS 中您不需要的颜色。

颜色格式

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

暗黑主题

要生成暗黑主题颜色，您可以在网站头部切换外观至暗黑模式。确保在您的亮色主题颜色覆盖之后粘贴生成的 CSS。