Automatic.css (ACSS) is one of the most sophisticated CSS frameworks for WordPress, powering thousands of professional sites built with Bricks, Oxygen, and other builders. Its color system uses six named slots, and PaletteRx maps your palette directly to them.
Understanding ACSS's Color Slots
ACSS expects six brand colors: Primary (your main brand color), Secondary (your second brand color), Tertiary (a third brand color, if you have one), Accent (a supporting or decorative color), Base (your dark foundation, typically for text and footers), and Neutral (your light foundation, for backgrounds).
From these six colors, ACSS auto-generates an entire shade system: ultra-light, light, medium, dark, ultra-dark, plus hover states and transparent variants. That is why it needs the HSL decomposition. It manipulates hue, saturation, and lightness individually to create those shades.
How PaletteRx Maps Your Colors
PaletteRx's ACSS export uses intelligent role mapping. Your Primary role colors fill the primary, secondary, and tertiary slots in priority order. Your Supporting colors map to accent. Your Dark Base becomes base. Your Light Base becomes neutral.
The Two-Part Export
The ACSS export gives you two outputs. First, a quick reference card showing which hex value to paste into each ACSS dashboard slot. Second, the full CSS variable block with complete HSL decomposition for each color: nine variables per color including -h, -s, -l, -hsl, -r, -g, -b, and -rgb.