Color Roles Explained: Primary, Supporting, and Base Colors

In PaletteRx, every color gets a role. Understanding those roles is key to building a palette that translates cleanly into a real design system.

Primary

Primary colors are your brand heroes. They carry the most visual weight and appear in the most important places: CTA buttons, main navigation highlights, key headings, and anywhere the user's attention should be drawn first.

Most sites have one to three primary colors. More than three primaries creates visual noise. If everything is primary, nothing is. PaletteRx identifies primary candidates as saturated, mid-to-dark chromatic colors with strong visual presence.

Supporting

Supporting colors are the second tier. They are accents that add variety without competing with the primary. They appear in secondary buttons, hover states, tags, badges, decorative borders, and background tints.

Light Base

Light bases are your backgrounds: the canvas everything else sits on. Page backgrounds, card surfaces, input fields, and modal overlays are typically light bases. These colors have very low saturation and high lightness.

Having at least one light base is critical for contrast. It guarantees your dark and chromatic colors have something to pair against accessibly.

Dark Base

Dark bases are your text and anchoring colors: body text, headings, footer backgrounds, overlay backgrounds. They have very low saturation and low lightness.

Auto-Assignment Logic

PaletteRx auto-assigns roles using HSL analysis. Colors with lightness above 85% become Light Base. Colors below 20% lightness become Dark Base. Saturated colors with medium lightness become Primary. Remaining colors become Supporting. You can always override these assignments manually.