How to Dynamically Generate Custom Palette Colors

[mayankgupta134]

Hi everyone,

I am working on a project where I need to dynamically generate a set of custom palette colors based on a user's selected branding color. I'm using Radix UI for my design system and would like to maintain consistency with the overall look and feel.

Could anyone guide me on how to approach this? Specifically, I am looking for:

• Best practices for generating a range of palette colors from a single branding color.
• Any tools or libraries that integrate well with Radix UI for color manipulation.
• Examples or snippets of how to implement this in a React application.
• Any help or pointers would be greatly appreciated!

Thank you in advance.

[vladmoroz]

Have you seen https://www.radix-ui.com/colors/custom? The code is open source for that, so you might be able to adapt it for your needs.

[kevinmitch14]

These might help:
#441

https://www.radix-ui.com/colors/custom

https://github.com/radix-ui/website/blob/52578d3c5956b26c117ad8328ee40ecc6170b648/pages/colors/custom.tsx#L79