Each site gets its own color, and every color has the same lightness and the same softness. Only the hue changes. That, plus one shared set of neutrals, is the common thread. There is room for more sites as they come.
The family
Preview with
Nine colors, spaced around the wheel. Three are matched to the logos you have. The rest are open for your other sites. Pick one to see it in use.
Steel
Four tones
Logo
Shared neutrals
Every site uses these same backgrounds, lines and text colors. They are faintly warm in light mode and faintly cool in dark mode, so they sit well under any of the nine colors.
Light mode
Dark mode
The common thread
Same lightness, same softnessEvery site color sits at the same lightness and saturation. A new site only picks a new hue, so it always fits.
One set of neutralsBackgrounds, borders and body text are identical everywhere. That shared ground does most of the work of making the sites feel related.
Four tones per siteMain color for logos, links and buttons. Tint for highlights. Light for dark mode. Deep for solid color blocks.
A small family footerEach site can carry the same footer strip of dots, with its own dot marked. It quietly links the sites without a shared logo.
Add a site
Name the new site and slide to a hue. The four tones are worked out with the same rules as the nine colors above.
New site
Use it
Copy the whole family as CSS variables. Each site sets its own accent by pointing the four site tones at its color.