自定义调色板

¥Custom palettes

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

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

¥Use the custom color palette tool to generate a Radix Colors scale based just on a couple reference colors. Once you are happy with the result, paste the generated CSS into your project and use them the same way you would use the regular Radix Colors scales.

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

¥The generated scales are based on the Radix Colors scales themselves, so they will work well with similar component designs. As long as you use a reasonable background color, the contrast ratios will be similar to what Radix Colors provide.

你获取

¥What you get

你的自定义调色板将包含 Radix Colors 步骤 1 至 12,以及它们的 Alpha 变体和广色域颜色定义。需要广色域色彩定义来确保在广色域色彩空间中(例如在支持 P3 的 Apple 显示器上)alpha 颜色能够以全饱和度显示。这是因为 Alpha 混合在 P3 和 sRGB 中的工作方式不同。

¥Your custom color palette will include Radix Colors steps 1 through 12, as well as their alpha variants and wide-gamut color definitions. Wide-gamut color definitions are needed to ensure that alpha colors are displayed with full saturation in wide-gamut color spaces, such as on Apple’s displays that support P3. This is because alpha blending works differently in P3 than in sRGB.

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

¥Learn about the base palette composition in the Understanding the scale guide. The generated CSS also includes a few extra colors used exclusively in Radix Themes, such as:

  • 某些 variant="surface" 组件使用的表面颜色

    ¥Surface color, used by certain variant="surface" components

  • 复选框、单选按钮和选项卡等组件使用的指示符颜色

    ¥Indicator color, used by components like Checkbox, Radio, and Tabs

  • 跟踪颜色,用于滑块和进度条等组件。

    ¥Track color, used by components like Slider and Progress Bar

欢迎从生成的 CSS 中删除不需要的颜色。

¥Feel free to remove colors from the generated CSS that you don’t need.

颜色格式

¥Color formats

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

¥You can use any common CSS color format in the input fields, or even wide-gamut color spaces, such as color(display-p3 1 0.5 0). The generated CSS will provide the closest sRGB fallbacks.

暗黑主题

¥Dark theme

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

¥To generate dark theme colors, toggle the appearance to dark in the website header. Make sure to paste the generated CSS after your light theme color overrides.

Previous锯齿