Color
Color shapes how your product works and feels, defining both accessibility and brand expression.
Working in harmony
Strong color systems come from how colors, shades, and hues work together across an entire experience.
Start with palettes
Palettes are a tool for grouping different sets of colors together. You’ll want to start by making sure your Primary, Secondary, and System palettes work together, and don’t conflict with each other in different states.
Define key properties
Prioritize the elements that have the greatest impact on function.
- Contrast: Federal guidelines regulate contrast requirements (WCAG). These ensure that sites don’t rely on color vision for successful usage.
- Saturation: This will draw the user’s eye. Make sure you’re directing them toward where they need to go.
- UX psychology: Some colors have established associations, both emotionally and functionally. Check that your colors will have the intended effect.
Additional considerations
- Start small. It’s harder to manage large palettes
- Focus on function. Everyone sees color differently, make sure it works for users first, then factor in personal preferences.
- Anticipate confusion. Consider system colors, browser colors, and any other areas that might create confusion for a user.