Oxygen Builder is known for its clean code output and developer-friendly approach. Its global color system works through a combination of the Global Colors panel and custom CSS, making PaletteRx's CSS Variables export the ideal integration path.
Two Integration Methods
Method 1: Global Colors Panel. Open Oxygen's Settings and navigate to Global Colors. Add each PaletteRx color by name and hex value. These colors then appear in every color picker throughout the builder. This is the simplest method and works well for small palettes.
Method 2: CSS Variables. Export your palette as CSS Variables from PaletteRx and paste the entire block into Oxygen's Global Stylesheet. This is the more powerful method because it gives you named variables you can reference anywhere in custom CSS, conditions, and dynamic stylesheets.
Design Set Integration
If you use Oxygen Design Sets (pre-built component libraries), the design set's colors may use their own CSS variables. Map your PaletteRx variables to the design set's expected variable names, or override the design set variables with your palette values in the global stylesheet.
ACSS + Oxygen Workflow
Many Oxygen users also run Automatic.css. In this case, use PaletteRx's ACSS export, which generates the exact variable names ACSS expects. The colors flow through ACSS's shade generation system and are available in both Oxygen's color picker and as utility classes.