UI Color Schemes

A complete UI color scheme includes five categories: brand primary (and its scale), brand secondary or accent, neutral scale (for surfaces, text, borders), semantic colors (success, warning, error, info), and interactive states (hover, active, disabled, focus).

The neutral scale is the most used category and often the most neglected. In a typical dashboard, 70–80% of the visible pixels are neutral surfaces, text, and borders. Getting the neutral scale right, specific values that feel cohesive, neither too warm nor too cool for the brand, is more impactful than perfecting the brand primary.

Your UI's primary color drives all primary interactive elements: main buttons, active navigation, primary links, progress bars, and selected states. Choose a primary that: passes 4.5:1 contrast on white as a button background (test with Contrast Checker), has clear brand associations for your product category, and generates a useful tint scale (very light tints for backgrounds, medium values for interactive, dark values for text).

Secondary or accent colors are used for supporting elements and differentiation from primary: secondary buttons, highlight backgrounds, decorative elements, and alternative CTA styles. Secondary colors should work harmoniously with the primary (typically analogous or complementary in hue relationship) while being visually distinct enough to prevent confusion.