Learn how to create custom Radix Colors palettes.
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.
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.
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.
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" componentsFeel free to remove colors from the generated CSS that you don’t need.
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.
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.