Primary brand color
Start with one color that embodies your brand. This is your anchor. Example: Stripe uses a distinctive blue.
Choose a hue that's memorable and different from competitors. Test it across backgrounds and sizes.
Building tints and shades
Generate a scale from your primary color: tints (lighter) for backgrounds, shades (darker) for text and borders.
Typical scale: 50, 100, 200, 300, 400, 500 (base), 600, 700, 800, 900. Huelab can generate these automatically.
Secondary colors
Add 1-2 secondary colors to support the primary. Often complementary or analogous. Examples: accent for CTAs, secondary for neutral actions.
Secondary should never compete with primary. Keep it subtle unless emphasizing contrast.
Semantic colors
Define role-specific colors: success (green), warning (orange/yellow), error (red), info (blue).
Test all semantic colors for colorblind accessibility. Avoid red+green combinations.