Awesome blog post, providing interesting approaches.
What I always struggle with is not the different shades, but finding suitable other colors which go along with a given one. Let’s say your company already has a hex code for a blue. How do you find appropriate greens and reds to go along with it?
1. Hue shift your complements towards the primary instead of trying to use the full range. This mimicks what we experience in different lighting conditions: under a red light, everything looks red.
2. Create ramps of saturation within the palette. If you have a dark blue primary, add a grayish transition and pastels to complement.
3. Make a larger palette than you need right now and then trim it down. When making palettes for pixel art(a great way to learn color), there's an iteration between making color ramps and making test images to spot the flexibility of the palette. You can do similarly for the site design: you don't want to have tons of colors, you want colors that can be used in many different roles.
This is where the triads and tetrads that the article dismissed come in. But a good rule of thumb is to pay attention to saturation and brightness more than hue; they have a larger role in the harmoniousness of a pair of colors.
What I always struggle with is not the different shades, but finding suitable other colors which go along with a given one. Let’s say your company already has a hex code for a blue. How do you find appropriate greens and reds to go along with it?