After working with color palettes across hundreds of projects, certain mistakes appear over and over. Here are the ten most common, each with a concrete fix.
1. Too Many Colors
More than 12 colors in a web palette creates cognitive overload and inconsistency. Fix: constrain yourself to 6 to 10 colors with defined roles. PaletteRx caps at 12 for good reason.
2. No Base Colors
All chromatic colors, no light or dark bases. This makes every color fight with every other color. Fix: add a near-white and near-black. Your health score will jump immediately.
3. Colors Too Similar
Two blues that look distinct in swatches but are indistinguishable in context. Fix: ensure every color pair has enough perceptual distance. PaletteRx's balance scan flags colors that are too similar.
4. Ignoring Contrast
Choosing colors that look good together but fail WCAG. Fix: run Step 3 in PaletteRx before committing to any palette.
5. No Roles Defined
A list of colors with no documentation of which goes where. Fix: assign roles in Step 4. Every color needs a job.
6. All High Saturation
Every color is vivid, creating visual fatigue and no hierarchy. Fix: include muted supporting colors alongside vivid primaries.
7. Copying Without Adapting
Pulling a palette from Dribbble without verifying it meets your project's needs. Fix: always validate extracted palettes through PaletteRx's full workflow.
8. Forgetting Dark Mode
Building a palette that only works on light backgrounds. Fix: check that your chromatic colors have contrast pairs against both your light and dark bases.
9. Inconsistent Naming
Different variable names in CSS, Figma, and documentation. Fix: use PaletteRx's exports consistently across all platforms.
10. No Governance
Palette exists but nobody enforces it. Fix: use CSS variables so deviations are visible in code review, and audit regularly with PaletteRx's extraction feature.