PaletteRx is a professional color palette diagnostic tool that guides you through five steps: Build, Balance, WCAG Compliance, Role Assignment, and Export. Each step adds a layer of validation that transforms a collection of colors into a production-ready system. Here is how to use each step.
Step 1: Build
Add colors to your palette. You can type hex values, use the color picker, paste from another tool, or extract from a URL. As you add colors, PaletteRx analyzes them and the Smart Suggestions panel offers recommendations based on harmony theory and gap analysis. Start with your primary brand color and let suggestions fill the gaps.
Step 2: Balance
The Balance scan evaluates your palette across multiple dimensions: temperature (warm/cool mix), vibrance (saturation distribution), hue diversity (variety of color families), lightness range (from very light to very dark), and completeness (are bases present?). Each metric has a target range. Adjust colors to bring metrics into range.
Step 3: WCAG Compliance
The contrast grid tests every possible pair of colors in your palette. Green cells pass AA. The grid shows the exact contrast ratio for each pair. If pairs that you need to use together (like primary on white) fail, adjust the failing color's lightness until the pair passes. This is the most critical validation step.
Step 4: Role Assignment
Assign semantic roles to each color: Primary, Supporting, Accent, Light Base, Dark Base. These roles determine how colors are named in exports and how they map to platform-specific configurations. Auto-assign makes intelligent guesses that you can override.
Step 5: Export
Export to your target platform: CSS Variables, Bricks Builder JSON, ACSS format, Tailwind config, WordPress theme.json, Elementor JSON, or Generic JSON. Each export format is specifically structured for its platform, ready to paste or import directly.