Etch takes a fundamentally different approach to color management than most WordPress page builders. Instead of storing a single hex value per color, Etch decomposes every color into individual channel variables — giving you the building blocks for dynamic color manipulation directly in CSS.
What Makes Etch's Color System Unique
When you define a primary color in Etch, you don't just get --primary: #4F46E5. You get the full breakdown: --primary-h for hue, --primary-s for saturation, --primary-l for lightness, plus the composite --primary-hsl. The same applies to RGB: individual --primary-r, --primary-g, --primary-b channels and a combined --primary-rgb.
This architecture is powerful because it enables dynamic color manipulation without preprocessors. Want a lighter version of your primary? Use hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 15%)). Need a translucent overlay? Use rgba(var(--primary-rgb), 0.3). The channel variables make all of this possible with pure CSS.
Exporting from PaletteRx
In PaletteRx, navigate to Step 5 (Export & Use) and select Etch from the WP Page Builders section. The export generates a complete :root block with every color fully decomposed. Each color in your palette gets nine variables:
The base hex value (--primary), three HSL channels (--primary-h, --primary-s, --primary-l), the composite HSL (--primary-hsl), three RGB channels (--primary-r, --primary-g, --primary-b), and the composite RGB (--primary-rgb). PaletteRx handles all the math — the H, S, L, R, G, B values are pre-calculated from your palette colors.
Importing into Etch
In Etch, go to Settings, then the Colors section. Click Import CSS Variables and paste the entire output from PaletteRx. Etch will recognize the variable structure and map each color to its internal color management system.
Alternatively, paste the CSS into your global stylesheet or the Etch custom CSS panel. The variables will cascade throughout your entire site.
How Roles Map to Variables
PaletteRx's role assignments translate directly to Etch variable names. Your Primary color becomes --primary and all its channel variants. Secondary colors become --secondary, --secondary-2, and so on. Light Base becomes --light-base and Dark Base becomes --dark-base.
This semantic naming means your Etch templates and classes reference meaningful names instead of generic numbered slots. When you update a color in PaletteRx and re-export, the variable names stay consistent — only the values change.
Dynamic Shade Generation
The real power of Etch's channel system is shade generation. With the individual HSL channels available, you can create an entire shade scale in CSS. Subtract lightness for darker shades, add lightness for lighter tints. Reduce saturation for muted variants. Shift hue slightly for warm or cool variations. All without touching a preprocessor.