Radix color palette

Copy Radix CSS code and paste it here to instantly add your custom palette variables to the file.

Plugin Preview

Step 1: Enter a base color in the Accent section to generate a palette.

Step 2: Copy the accent scale generated below.

Step 3: Copy the CSS code from:

.root, .light, .light-theme { ... }

Step 4: Repeat Steps 1–3 for the Dark Theme.

Step 5: Create a collection in Figma with two modes named exactly: Light Mode, Dark Mode (Case-sensitive)

Step 6: Paste the Light and Dark theme CSS into their respective input fields in the plugin.

Step 7: Click the "Create Variables" button.

Step 8: Edit variable names as needed in Figma.