Color Role
A functional assignment that gives a color a specific job in a design system — like primary, secondary, surface, error, or success.
What it means
A color role defines what a color does rather than what it looks like. Instead of referencing "blue-500" (a specific shade), you reference "primary" or "surface-elevated" (a functional role). The role stays constant; the underlying color can change based on theme, mode, or brand.
Common roles include: primary (main brand/action), secondary (supporting actions), surface (backgrounds), on-surface (text on surfaces), error (destructive states), warning, success, and info.
Why it matters in palette design
Roles are how design systems achieve theme-ability and maintainability. When you reference roles instead of raw colors, you can swap an entire theme (light to dark, brand A to brand B) by changing the role-to-color mapping — without touching any component code.
Common confusion
Color role vs. color token: A token is a named variable ("blue-500"). A role is a semantic assignment ("primary"). Roles reference tokens: "primary" might resolve to "blue-500" in the default theme and "green-500" in an alternate theme. Roles add a layer of abstraction that makes tokens theme-independent.
Example
A SaaS product defines roles: primary (brand blue), surface (white), on-surface (dark gray), error (red), success (green). When they ship a dark mode, they remap surface → near-black, on-surface → light gray, primary → lighter blue. Components reference roles, so dark mode works without touching any component.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.