123 Design StudioColor theory in design is often taught as a wheel and a set of harmonies, but for product work what matters is building a system that is legible, consistent and accessible. This guide skips the fluff and focuses on how to construct palettes, balance them, meet contrast requirements, encode them as tokens, and handle dark mode without surprises.
From hues to a working palette
You only need a handful of roles, not a rainbow. A practical palette has a primary (brand and key actions), one or two accents or secondaries, a semantic set (success, warning, error, info), and a neutral ramp of grays for text, borders and surfaces. The neutral ramp does more work than any brand color; get it right first.
- Generate each color as a ramp of tints and shades, not a single value.
- Keep the neutrals slightly tinted toward your brand for cohesion.
- Reserve saturated, high-contrast color for actions and meaning, not decoration.
The 60-30-10 rule for balance
A reliable way to balance a composition is the 60-30-10 rule: roughly 60% a dominant (usually neutral) color, 30% a secondary, and 10% an accent for emphasis and calls to action. The discipline keeps interfaces calm and makes the accent actually stand out, because it is rare. When everything competes for attention, nothing wins.
Restraint is the difference between a brand color and a loud interface. Use your boldest color where you most want the eye to go.
Contrast and accessibility are non-negotiable
Color choices must satisfy accessibility before aesthetics. Following WCAG 2.2, body text needs at least 4.5:1 contrast against its background, large text 3:1, and meaningful non-text elements such as icons and input borders at least 3:1.
- Test every text/background pair, including hover and disabled states.
- Never use color as the only signal — pair status colors with icons or text.
- Check that your accent passes contrast when used on white and on dark surfaces.
Encode the palette as tokens
Hard-coded hex values are the enemy of a maintainable system. Express color as design tokens with two layers: primitive tokens (the raw ramp, e.g. blue-600) and semantic tokens that describe intent (e.g. color-action, color-text-default, color-surface). Components reference semantic tokens only.
A token structure that scales
- Primitives:
gray-50…900,blue-50…900 - Semantic:
text-default,text-muted,surface,border,action - State:
action-hover,action-disabled,danger
The payoff is enormous: rebranding, theming and dark mode become a matter of remapping semantic tokens rather than hunting through stylesheets.
Dark mode considerations
Dark mode is not an inversion. A few principles keep it usable:
- Avoid pure black backgrounds and pure white text; the harsh contrast causes halation. Use near-black surfaces and slightly off-white text.
- Reduce saturation of accent colors, which appear more intense against dark surfaces.
- Convey elevation with lighter surfaces rather than heavy shadows, which are nearly invisible on dark.
- Re-check every contrast pair in the dark theme; passing in light mode does not guarantee passing in dark.
Putting color theory to work
Effective color in product design is a system, not a mood board. Build neutral and brand ramps, balance them with something like 60-30-10, enforce contrast from the start, and express everything as semantic tokens so themes and dark mode fall out naturally. Do this and your color decisions will be defensible, consistent and accessible — which is what separates a designed product from a decorated one.