Separate brand colors from interface roles
A brand palette describes identity; a website palette must also handle reading, navigation, feedback and accessibility. Map colors to roles such as canvas, surface, primary text, muted text, border, action and focus. This prevents a hex code from being used differently on every page.
Build from the background outward
Choose the page background and card surfaces first. Then select text colors that remain comfortable on both. Add structural borders and dividers only where spacing alone cannot communicate separation.
Define interactive states
A button is not one color. It needs default, hover, focus, pressed and disabled states. Links need to remain recognisable without depending on color alone. Form errors, warnings and success messages require text or icons in addition to hue.
Map the 60/30/10 roles
- 60%: page canvas, broad sections and calm whitespace.
- 30%: cards, navigation areas, secondary buttons and illustrations.
- 10%: primary calls to action, active indicators and selected highlights.
- Neutrals: text, borders, disabled states and shadows.
Use design tokens
Name variables by purpose rather than appearance: --color-action is more durable than --orange. If the visual theme changes, components can keep the same role names. Tokens also make light and dark themes easier to manage.
Test real pages
Place the palette on a long article, a form, a pricing card and an empty state. A scheme that works in a decorative hero may fail once dozens of controls appear. Test on mobile, with browser zoom and with actual content lengths.
Keep attention scarce
If every card contains a bright button, badge and icon, the accent stops guiding the eye. Decide what the primary action is on each screen. Everything else should support it or remain quieter.