CSS custom properties (variables) have fundamentally changed how we manage colors in web design. They are the reason a single PaletteRx Export Guide: Every Format Explained">PaletteRx export can work across Bricks, ACSS, Elementor, and raw CSS. They all use the same underlying mechanism.
What Makes CSS Variables Special
Unlike preprocessor variables (Sass, Less), CSS custom properties are live. They cascade through the DOM, can be overridden at any level, and can be changed at runtime with JavaScript. This makes them perfect for theming. Change --primary on the root element, and every element referencing it updates instantly.
The Naming Convention
PaletteRx generates variables following common conventions: --color-primary, --color-supporting, --color-light-base. For ACSS, it follows ACSS's convention. For Bricks, it matches Bricks' internal format. The values are the same. It is the naming and structure that differ between platforms.
HSL Decomposition
Modern CSS frameworks often need colors decomposed into their HSL components. This allows the framework to generate shades by manipulating individual channels: make a hover state by subtracting 10% from lightness, make a tint by adding 30% to lightness.
PaletteRx's ACSS and Bricks exports include full HSL decomposition: hue, saturation, and lightness as separate variables. This is what enables ACSS's automatic shade generation from a single base color.
Fallback Strategy
CSS variables support fallback values: var(--primary, #4f46e5). When building a design system, always provide fallbacks for critical colors. If a variable is not defined, the fallback ensures the site does not break.