CSS custom properties (commonly called CSS variables) are named values that you define once and reference everywhere in your stylesheet. They look like this: --color-primary: #4f46e5; (definition) and color: var(--color-primary); (usage). They are the technology that makes PaletteRx's exports work.
Why They Matter
Before CSS variables, changing a color meant finding and replacing every instance of a hex value across potentially hundreds of files. With variables, you change one line and every reference updates. This is the difference between a palette (static values) and a system (dynamic, maintainable references).
How PaletteRx Uses Them
When you export CSS Variables from PaletteRx, you get a block of variable definitions that goes in your stylesheet's :root selector. Each variable is named by its role: --color-primary, --color-supporting, --color-light-base, --color-dark-base. Every component in your site references these names instead of hex values.
Dark Mode with Variables
CSS variables make dark mode trivial. Define one set of values for light mode and override them for dark mode. Every component that references var(--bg) automatically switches when the variables change. No component-level changes needed.
Browser Support
CSS variables are supported by 97%+ of browsers globally. They work in every modern browser including Chrome, Firefox, Safari, and Edge. The only holdout is Internet Explorer, which is effectively dead. You can use CSS variables in production with full confidence.