Webflow uses Global Swatches as its palette system. A swatch is a named, reusable color that you can apply to any element and update globally. Building your swatches from a PaletteRx palette means every color has been contrast-checked and role-assigned before it ever enters Webflow.
Webflow's Color Swatch System
In Webflow Designer, click any color picker, then navigate to the Swatches panel. Click the "+" icon to create a new global swatch. Each swatch gets a name and a hex value. Once created, swatches appear in every color picker across your project.
The critical point: updating a swatch value updates every element that references it. This is design system behavior, and it requires the initial palette to be well-structured.
Exporting from PaletteRx
Select Webflow from the Website Builders section in PaletteRx's export step. The output includes a hex reference card labeled by role, plus CSS variables with the --prx- prefix that you can add to Webflow's custom code panel for additional flexibility.
Creating Swatches
For each color in the PaletteRx export, create a new swatch in Webflow Designer. Paste the hex value and name it according to its role: Primary, Secondary, Light Base, Dark Base, or the specific descriptive name PaletteRx provides.
Keep your swatch names semantic. "Primary Brand" is better than "Blue" because the name stays meaningful even if you rebrand to a different hue later.
CSS Variables for Advanced Use
Paste the CSS variables block from PaletteRx into Webflow's Site Settings, Custom Code, head tag section. This makes variables like var(--prx-primary) available in Webflow's custom CSS fields, Embed elements, and interactions.