Opening PaletteRx for the first time can feel overwhelming. Five steps, dozens of controls, contrast grids, balance metrics. But the workflow is linear and logical. This walkthrough takes you through each step with concrete actions.
Step 1: Build Your Palette
Start by adding colors. You have three options: type or paste a hex value manually, use the color picker to select visually, or paste a website URL to extract colors from an existing site. For your first palette, start with your brand's primary color. Then click "Smart Suggestions" to see mathematically harmonious additions. Accept a few that resonate. Add a very light color (near-white) for your light base and a very dark color (near-black) for your dark base.
Step 2: Check Balance
Click the balance scan button. PaletteRx analyzes your palette across multiple dimensions: temperature (warm/cool mix), vibrance (saturation distribution), lightness spread, and hue diversity. Green indicators mean healthy. Yellow means acceptable. Red means an issue worth addressing. Follow the specific recommendations to improve any red flags.
Step 3: Validate WCAG
The contrast grid shows every possible color pair in your palette and its contrast ratio. Green cells pass AA. Look for any red cells involving colors you plan to use for text. If your primary fails against your light base, darken it or lighten the base until the pair passes 4.5:1.
Step 4: Assign Roles
Drag colors to their semantic roles: Primary, Supporting, Light Base, Dark Base, and any accents. Auto-assign handles this intelligently for most palettes. Use Live Preview to see your role assignments applied to a real layout.
Step 5: Export
Choose your target platform: CSS Variables, Bricks Builder, Automatic.css, theme.json, Tailwind, or Generic JSON. Click export. Your production-ready color system is generated. Copy the output to your project.