Start with One Color
Every great color system starts with a single carefully chosen primary color that represents the brand's core identity. This color appears most frequently and carries the most brand recognition. Everything else — secondary colors, neutrals, semantic colors — is built in relationship to this primary.
Build a Full Scale
A professional color scale contains 9–11 steps from lightest to darkest. The convention popularized by Tailwind CSS uses 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. The middle value (500) is usually close to your base hue at full saturation. Lighter values (50–300) work for backgrounds and tints. Darker values (600–950) work for text, hover states, and emphasis.
💡 Pro Tip
Use HSL to build your scale. Start with your base hue and saturation, then step lightness from ~97% (50) down to ~5% (950) in non-linear steps. The middle of the scale moves faster to create better differentiation where you need it most.
Add a Secondary Color
Secondary colors complement the primary and add flexibility. They're typically used for secondary actions, alternative UI states, or accent elements. A good secondary color is either analogous (adjacent on the wheel) for a harmonious feel, or complementary (opposite) for energy and contrast. Avoid choosing a secondary that's too similar in hue and lightness to your primary.
Semantic Colors
Semantic colors communicate meaning rather than brand. Every design system needs at minimum: success (green), error (red), warning (yellow/amber), and info (blue). These should be chosen for their psychological associations and accessibility — they must meet contrast requirements and work for color blind users. Don't use your brand colors for semantic states unless they naturally fit.
Neutral Colors
Neutrals are the foundation that everything else sits on. A complete neutral scale runs from near-white to near-black with subtle warm or cool undertones. Warm neutrals (slightly yellow or red) feel comfortable and human. Cool neutrals (slightly blue) feel modern and digital. Avoid pure gray (#808080) — it looks flat and lifeless on screens.
💡 Pro Tip
The best neutrals have just a hint of your primary color mixed in. If your brand color is blue, try neutrals with 2–5% blue tint. This creates subconscious brand reinforcement even in your grays.