自定义调色板

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

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

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

您将获得什么

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

在 理解色阶指南中了解基本调色板构成。生成的 CSS 还包含一些仅在 Radix 主题中使用的额外颜色，例如

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

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

颜色格式

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

深色主题

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

在 GitHub 上编辑此页面。