All these examples use way too many colors. The ideal (and minimum) number of colors for a sober site is two: one color for the background and a very different color for the text, each of them an extreme and opposite shade of gray. If you are really fancy, add a third color on a couple of very small places, almost inconspicuously. More than three colors results in an ugly pastiche. The worst offence is having several slightly different shades of the same base color. This is what this article seems to propose and it is unbearably horrendous.
Pretty much every design system out there disagrees with you. Material (Google's design system) uses 10 shades, Fluent (Microsoft's) uses 8, Lightning (Salesforce's) uses 12. Even the most basic terminals in use support 2 shades of EACH color.
While 2 or 3 colors are fine for a simple blog, any app that has more functionality than just reading can benefit from a wide range of semantic colors. A dangerous action should be red, a graph trending upwards should be green (or red in East Asian markets), a warning should be yellow. These colors help convey meaning to the actions that are present, and the usefulness of a wide spectrum should not be discounted.
There's yellow, orange, blue borders, grey borders, different shades of blue for different links, grey background etc. so you're oversimplifying.
The linked article even makes the point you end up needing several greys, reds etc. for things like borders and warning pop-ups. Nobody is arguing you should have 10 brand colours.
OK, so there are more colors. The example that you show uses colors to signal things that are wrong with the current page. This is somewhat logical: if things look wrong (because there are more than three colors) then they are wrong. Regular wikipedia entries do not have yellow nor orange:
You are right that there's still more colors: very light shades of gray, and a thin light blue line for separator. They are almost imperceptible on my screen, but I would say that the page would look even better if the thin separator was black, and there were no different background shades.
TFA specifically says that the colors added to greys and primary are there to convey states: warnings, destructive operations, tendencies and so on.
> They are almost imperceptible on my screen, but I would say that the page would look even better if the thin separator was black, and there were no different background shades.
Most would disagree. Separating the content from sidebar and asides such as the table of contents is useful because your eyes can follow where you are.
I just opened a Wikipedia article on my phone and I saw 5 background colors: white (main), light gray (background of card), less light gray (background of footer, green (background of banner to show last edit), and light purple (background of card title).
Also two shades of grey for text color, a dark one (main), a light one (Wikipedia title)
Wikipedia has dark grey text on a white background for the primary text. Headers are in actual black. I found another 6 shades of gray that are all used in multiple places on the site.
I found 5 shades of the primary color blue.
A good color palette uses many colors but feels like few. Wikipedia is doing a great job of this.
The article actually kind of addressed this with the shades, and I think that's what a lot of non-designers miss; having several shades of the same color adds a lot of variety without looking cluttered ("feels like few" as you said).
But I don't understand the point of the shades, then. Why not go for the real thing? Why not use the exact same color, and it will not only "feel like few"? What's the actual advantage of using different shades (besides making the work of the web designer seem more difficult).
It lets you display more granular information. You can have light blue buttons with dark blue text, as well as solid blue buttons, to convey "primary" and "secondary" CTAs for instance.
You could try to display the same amount of info in less color, or even black and white (maybe outlined buttons, bold/regular fonts in the text), but color variation looks "good" to the majority of eyeballs.
Practically speaking, you end up using colours many more than 3. Even designing a button needs a base colour, a hover state colour, a clicked state colour and sometimes border colours too. You can ‘wing’ it by using sass ‘darken’ etc as someone stated above, but I’ve found that to be interpreted differently by different browsers, and it’s just better to anticipate these needs and come up with the required colour stops upfront.
