Starting with one color and expanding it into a full palette is a process I use on almost every project. Clients often arrive with a single brand color and need an entire design system built around it. The approach is mathematical, not artistic — which means the results are consistent and reproducible rather than dependent on creative inspiration.
Step 1: Generate a Lightness Scale
Take your base color — say #2563EB. Convert it to HSL: hue 217 degrees, saturation 91%, lightness 53%. Now generate variations by adjusting only the lightness value while keeping hue and saturation constant. Reducing lightness to 30% gives you a dark shade for headings. Increasing to 95% gives you a barely-there tint for card backgrounds. I typically create nine steps: 5% increments have a natural feel, though I adjust the extreme ends by eye to make sure the lightest value is not invisible against white and the darkest is not indistinguishable from black.
Step 2: Find Harmonious Accents
For accent colors that harmonize with your base, use color wheel relationships. A complementary color sits 180 degrees opposite — for hue 217, that is roughly 37 degrees, a warm amber. Analogous colors sit 30 degrees to either side — hue 187 (teal) and 247 (purple). Split-complementary takes the two colors flanking your complement — around 7 degrees (red-orange) and 67 degrees (yellow-green).
Each strategy creates a different mood. Complementary provides maximum contrast and energy. Analogous feels calm and cohesive. Split-complementary offers contrast with more variety than a strict complementary pair. For most web projects, I choose split-complementary because it provides enough visual interest for buttons, alerts, and highlights without the visual tension of direct complements fighting for attention.
Step 3: Build Neutral Grays With Character
Instead of using pure neutral grays, tint your gray scale with your base hue. For a blue-based project, your neutral gray might be #64748B — a cool, bluish slate. This subtle tinting makes neutrals feel connected to the rest of your palette rather than disconnected. For warm base colors like orange or red, use warm grays like #78716C. Define nine steps from near-white to near-black and your typographic hierarchy gains subtle harmony with your brand color.
Step 4: Add Semantic Colors
Every interface needs success, warning, and error colors. These are typically green, amber, and red — but pick specific values that feel related to your palette rather than grabbing generic defaults. If your base blue has high saturation, your semantic colors should also have high saturation. If your palette is muted and toned, your error red should be a muted brick red rather than a screaming fire engine. Consistency in saturation levels is what makes a palette feel like one cohesive system rather than a collection of random choices.
Your single starting color has now become a professional design system with 30 or more usable values. Document everything as CSS custom properties and you have a maintainable, extensible system that grows with the project.