Building Your Color Palette
refactoringui.com
refactoringui.com
RGB simply does not map 1:1 with our biology. We can't say, "ok here's a simple formula that will create two color that have harmony with humans universally". We can approximate it, but there's no perfect system out there for it. Other color modes (such as HSL or LAB) help, but come with their own drawbacks as well.
Trends is another matter that is rarely considered or talked about. We as society gravitate towards certain colors within each geographical market. As a UX designer, it's important to stay within the bounds of these. There are certain things in life that should follow trends, many of which are items that convey important meaning. Can you imagine if every city in America used a different stop sign? It would be disastrous. Having one universal shape/symbol reduces the mental load required to recognize the meaning of the object. Likewise if a market gravitates towards a certain shade of red as dangerous, then you should stay close to that color when choosing your design palette. Over time these colors will shift as the trends slowly evolve - this is not something that can be approximated by a formula.
The last bit is culture. Color in each culture is widely different. Red in China conveys prosperity, which is why if you look at designs for stock portfolio apps in China, graphs are red when going up in price. In India it represents purity. In the Western world it's danger. None of this can be captured in a formula.
The author breaks down what the correct approach is when choosing color - breaking down meaning and extrapolating shades in your ramp to create a useful, well supported palette.
It would be great if there was a web app that was like coolers but faster, and presented actual UI examples with all of the advice from this piece automatically applied.
I'd build this if I didn't have my hands full!
This is just a Boostrap color palette that I see here and it would be nice if they'd been a bit more creative. Imagine if Rembrandt used Boostrap colors in all his paintings and all his peers copied him ... that would be a boring world, but alas, that's what the internet is currently like, and articles like these certainly don't help.
Does it? There's a lot of subcultures here, so maybe - can someone from north India confirm if this is a thing there? Here in south India, there's no such association with purity I can think of. It generally represents danger and anger and such things similar to in the West.
> Brides traditionally wear predominantly red clothes for certain ceremonies during wedding.
This isn't common in south India (to my knowledge).
> Red, Yellow/Amber, and White are quite common during rituals in North.
Yellow is the one that stands out to me, and has religious connotations of purity and sacredness, but not red. (White too does, but for non-religious reasons, including associations with Khaddar and with Dhotis.)
(From another response:)
> All Goddesses wear red colored clothes
In my region, the colours change every day (or in some similar regular interval), and red isn't significantly more prominently used than others.
I can see a sort of link made via the Kumkum/Tika/Tilaka from red to purity, but honestly that would be a stretch and a pretty unlikely association for someone to make when encountering the colour.
Hate to be picky... but actually it maps rather well to our biology. After we, we see in RGB. what it does map to is our perception. HSL is good for artists as a ‘thinking space’.
The real problem is that in art literature most Colour spaces are expressed as 2 dimensions. So called harmony is discussed most as an attribute of hue, never of a compound of hue, sat and lightness.
For example, the dynamic range you can express with standard 24-bit hex RGB colors (e.g. #ff0000) is way smaller than what the human eye is capable of perceiving.
Also, using mathematical models to create palettes typically relies on a lot of assumptions. For example, #ff0000 is not perceived as equally bright as #00ff00 by a human being, yet looking at it represented like this you'd assume this to be the case.
I think it is possible to build a mathematical model that creates pleasing color palettes, it's just that they're often built on approximations that aren't really accurate.
One thing that confused me a great deal when I was younger: In the political system that I was familiar with, a "red" party is left-leaning. But in the United States, "red" is right-leaning.
Apparently, this convention is also extremely recent; only since the 2000 elections has red-is-Republican and blue-is-Democrat been agreed upon.[0]
[0]: https://en.wikipedia.org/wiki/Red_states_and_blue_states#Con...
https://en.wikipedia.org/wiki/Red_states_and_blue_states#Con...
Another way to put the same argument is that Democrats are centrists/liberals rather than left wing/socialists, so the red used by actual left-wing parties in other countries just doesn’t fit.
I think you just offered an argument against, not for, following trends. Stop signs are universally recognized not just because the same design is used everywhere, but because the design is stable over time.
Articles like this helped me out a bit, as well as just trying different things. This includes taking an app or website you like and analyzing the colors they use. It helps to look at their use of saturation and lightness in specific elements (i.e. CTAs are typically more saturated and backgrounds and other elements you wish to mute are less saturated).
In the end, if you can come up with a cohesive color palette, your product definitely looks more polished and professional. You have an overall feeling of confidence in it, even if the code has not changed one bit. It's like suspension of disbelief in a movie. When you hit something that shatters the illusion, you're taken out of the story and just look at the film as a series of filmed events played out in sequence and less like a narrative.
Honestly, it would be challenging to distill it down into a post. I don't think I could convey it well enough.
A lot of the journey is just training your eye to see things you like and ask what makes it the way it is. You just kind of have to develop an eye for white space, colors, visual hierarchy, and more. It's a heavy topic.
Like writing, it takes practice, and when you do create something, it takes a lot of heavy editing and refining to simplify it more and more.
There is a level of effort required to get good at effectively conveying information to others, and it is best learned by critically observing the situations that have done so in your personal experience.
In at least 100 examples where one of the audit fixes was "change font to #000" was the follow up feedback by a client or user tester saying that the gray was better or that "its unnatural" or "way too legible" nor a single case of analytics showing less dwell or read time ( or conversions) from users.
Complete design myth and it should die
This is also a problem for text on printer paper, where most people would benefit from a larger font and slightly less than 100% black.
One of the major issues on the web currently is that colors aren't properly colorspaced or matched to a brightness curve, so on shitty 6-bit 100 nits panels #000 on #fff will still be grey-on-grey while on a proper 10 or 12-bit 1000 or 4000 nits panel #000 on #fff will be a color contrast of "literally looking into the sun" vs "the darkness of the darkest night".
I've had many situations that I tell someone to "click on the button in that blue box over yonder" and they reply "what blue box?" because the light-blue background got washed to white on their screen.
Personally I've got a Dell UP2718Q right next to a Fujitsu Siemens P17-2, with two decisively different color, brightness, and resolution experiences, and try to make sure everything I design works well on both of these displays.
The only issue is that less than 15% of monitors today actually match the 95% sRGB, 300 nits, 8-bit panel specs which e.g. DisplayHDR 400 sets.
Just think about it, 85% of monitors can't actually display all CSS colors, and that doesn't even begin to handle issues like AdobeRGB, DCI-P3, and other WCG content.
On a true sRGB/300nits/8-bit screen #414141 on #dddddd contrast is actually fine (and meets WCAG guidelines, btw).
But if you display this same contrast on a 6-bit 150nits ~70% sRGB panel (standard cheap monitor from 2014) you won’t be able to read it under most conditions.
The distance in quality between a typical prosumer (be it gamer or designer) panel and a common cheap panel is increasing significantly.
Asus, Apple and Dell are the companies at the forefront of this change, while other companies still sell 6-bit monitors that don't even reach 70% sRGB (~85% of the current market don't have 8-bit/300 nits/95% sRGB)
Also, I am on Windows, and HDR is unusable on Windows in normal usage, and very few games/applications actually support HDR.
I understand that some enthusiast monitors do exist that might reach 1000 nits and are actually used in HDR mode, but I think that those users are way under 1% (even 0.1%) of the traffic for the most websites.
Those two screenshots could not have been more helpful for me or true to life.
I now only wish all these online "color palette" tools were actually useful instead of just starting points.
Handicapped accessibility guidelines mandate specific contrast ratios but even normally sighted people see better resolution for changes in values than changes in hue and saturation. That is built into many video standards. So if you want to make the best of your eyes and the reproduction chain, do it!
Ansel Adams popularized a "zone system" to get the most out of photography but some of the best illustration pays close attention to value. I've made a bunch of receipt printer prints of Pokémon characters and they look great printed on a bad printer because they were designed that way.
It works better than I ever expected, but it has of course its corner cases.
It's open sourced:
tailwind.ink
In case you're considering taking this further: a Figma plugin for this would make it 10x better. Changing the seed color could automatically update the color styles in the file, and would so propagate to every component and element. That would make an incredibly useful tool for experimenting with color schemes.
> Adapted from our book and video series, Refactoring UI.
Well yeah, this explains it, as I have bought (and read!) the book a while ago. The book isn't too extensive, but I don't regret any penny spent on it. Actually, I revisit it from time to time to internalize the lessons.
Except the palette chapter, it doesn't help you build an aesthetically pleasing design from the ground up. All the examples are about making "meh" design better - but many of us back-end developers would be over the moon if we were able to make "meh" design in the first place.
It's also really only helpful for designing 'webform'-style applications (where the main purpose is structuring a lot of information). There are no general principles of design that that would be applicable to something like an interactive mobile application.
I'm not bagging the book, I still think it's quite good for what it is and I did find it modestly useful (which is why I didn't request a refund).
But rightly or wrongly, I thought it would be a good introduction to the fundamentals of visual design, which it mostly isn't.
> I thought it would be a good introduction to the fundamentals of visual design
I can relate, so a recommendation from me may be a case of the blind leading the blind, but the best such book I've seen is The Non-Designer's Design Book by Robin Williams (the writer, not the actor). (It's up to four editions now but get any one; mostly only the examples change.)
The second half of the book is about type, and the first half is organized around four principles: Contrast–Repetition–Alignment–Proximity, leading to a memorable acronym that you may have found elsewhere but whose origin is this book. She starts with examples of designing things like brochures and flyers, but IMO if you remember to apply those 4 principles as illustrated in the book, you go from “ugh, I don't know why this looks ugly” design to pretty effective design.
These are lessons you never want to forget, and you can use them all the time.
https://www.google.com/search?q=santa+fe+bluebonnet&source=l...
It would certainly stand out on my desktop. Depending on the application, could be a plus. Probably not natural for a mail client or text-centric app, but you never know.
The sidebar is okay I think, but the yellow for the pane pane would be incredibly overwhelming scaled up to a full page. Also the blue text on yellow does weird things to my eyes.
https://www.amazon.com/Contemporary-Color-Theory-Steven-Blei...
[0] light gray, dark gray, white, black, navy blue, the other gray (scrollbars), the light yellow used for help text backgrounds
Depending on your target market, the color scheme you use can have an effect on how your product is perceived by your potential customers. User tastes and expectations have become more sophisticated since the 90s and users expect a higher level of polish now than back then. That can include color choice as a part of overall branding.
It was definitely more clear what was a button, vs tree, etc. in old Windows UIs, where there was exactly one standard. In the modern web, each application reimplements the widgets from scratch.
Certainly, that’s less clear than a well thought out standard set of UI elements.
Lets look at Word 95: https://live.staticflickr.com/5161/5199339764_7a2b6036eb_b.j...
Ah, yes... many buttons. I can see that there are buttons. What do they mean? Dunno. But, yep - they're definitely buttons.
Now let's look at Pages. (Admittedly, I myself am still not 100% happy with Big Sur's look) https://ibb.co/0MKRcPd
No! How am I supposed to know what I can click on? Never mind the fact that everything is much better labeled and structured. How will I ever remember that the row of icons at the top are actually a toolbar.
I could go on about other aspects in which Win95 falls short, but this sums it up quite nicely.
No, standardized widgets are not the most important aspect of an interface and no, Win95 was not the peak of design.
The labelled sections for the broad categories of formatting are nice, I guess, but I'm not sure they're a good use of screen space, especially given the individual formatting options are, just like Word 95, represented only by icons and unlabelled drop-down boxes. In either UI you have to hover over buttons if you're not sure what they're mean, and it's telling that the iconography is essentially unchanged from the 1990's. Except for one quite important aspect: Word 95's icons use colour to help the eye read them and distinguish them from one another. I know what the Pages icons mean but it's harder to quickly find the right icon when the only difference between the icons is shape.
By the way, if you really want that more spaced-out and verbose vertical list of formatting options, Word has it too, at least in 97 (haven't used 95). It's available as a dialog box and actually offers more formatting options than Pages does.
Moreover, the Word 95 UI's compactness is valuable. You can quickly find all the formatting options you'll ever need without clicking around in menus. Most of the screen space is occupied not by UI text and padding but by commonly-used commands and useful information about the document. Since the icons are laid out close together and horizontally rather than vertically, it's also easier for my eyes to quickly scan them than in Pages.
It's not nostalgia speaking when I say that I'd much prefer to use Word 95 on a daily basis than Pages.
You can get away with many fewer colors if you use different design language, but very few (not none, but few) apps are built with those sorts of aesthetics.
Multiple colours cost nothing, don't incur performance penalties, but do help make the UI look prettier and more finished. I'd be way more likely to spend time in an app if it looked beautiful, and by almost any metric, Windows 95 was not a thing of beauty. It had clarity, I agree, but it was far from the pinnacle of what humanity can achieve.
Various categories of content have exactly the same colour: light backgrounds and dark text and borders (or vice versa), different hues (e.g. traffic lights red, yellow and green like in the article) for specific text and box meanings. Nothing should have an ambiguous or arbitrary colour.
For example, the HN comment editing page can get away with 3 or 4 gray shades plus some in browser UI elements because they are completely unrelated objects: main background, button background (darker than main background, needs to be just noticeably different), dark grey text (also darker than main background, needs to be legible) and dark grey arrows (not text and not buttons, and therefore not necessarily matching the text and button shades).
Regarding colour generally, I think it's a useful tool and it is nice that it's used more in certain respects than in the 90's, but I'm not convinced in general that “modern” design makes the best use of it. For example, use of more than one colour within UI icons has become uncool because it's less pretty, despite it making them harder to read and distinguish. Function has taken a backseat to æsthetics.
I wish this myth would die. #000 is already dark gray on any normal real-life screen anyone uses because of ambient light, halos, etc. It's nowhere near "true black".
There is a good reason to avoid pure black or pure white in an interface, but it's nothing to do with "naturalness" or even legibility.
It's simply so that images or content which do include the full brightness gamut from #000 to #FFF "pop" in comparison. You want the darkest shadows and brightest highlights to catch your attention, and not have them compete with browser or interface chrome.
An interface is generally intended to "recede" next to actual content. But if your interface is star of the show? Use pure black and pure white. Go crazy. It's been used to great effect before.
No, it's not. And with OLED, mini-LED etc, it will be even less so.
The "unnatural" black argument is not valid, as others are making clear.
Avoiding display artifacts is something different. And it is not "unnatural" black.
It is better to discuss black, as in 0, in those terms that have a basis in reality. "Unnatural" black is not reality.
Similar things happened with TV programs. NTSC has low color resolution and much higher luma resolution. Large shifts around the color wheel, at higher resolutions, smaller pixel sizes, generated undesirable artifacts.
Luma changes generally didn't.
This kind of thing drove art direction toward more broad swaths of color, luma and gentle hue changes to imply texture and detail, rather than actually forcing detail.
Frankly, these subtle limits in display tech are all over the place.
4k HDMI does not have 4k pixel perfect color, or didn't last time I looked.
Discussing art in these contexts makes great sense!
For that matter, one might also say to avoid high saturation colors... many displays cannot even render them. CRT displays can, plasma TV can, and some new OLED apparently can.
LCD, generally can't.
Nature does present these colors to us, so... yeah.
I much prefer to talk about these things in terms of display capability, potential artifacts and such myself. It is a far more useful discussion.
Thanks for the quickie update.
I would say phones would be an exception to this rule, since a large number, perhaps even the majority, use OLED panels which are capable of displaying true black. This is becoming true for TVs as well.
An OLED or LCD panel, even one that is entirely turned off, isn't "true black". If you put something like Vantablack next to it, it would become very obvious that it's merely dark gray. It's still reflecting a significant amount of light from the environment.
And then it appears even lighter when you've got "black" text on a white background, because on our retina the white background "bleeds" into the black as well.
Painters, photographers -- these people are very aware that with real-world common objects, "black" is never actually black. Unless you're literally in a room with no light at all, it's only ever dark gray. Computer screens are nowhere near capable of producing any kind of "unnatural true black". It's not a thing to worry about.
We're talking design here, not physics.
It's a bizarre idea that started gaining traction maybe around 5 years ago, that using #000 in designs is therefore bad because it doesn't occur in nature.
That's what I'm pushing back against. The #000 on your screen does occur in nature, because its output on your screen is just a normal household black like lots of other objects.
Yeah, something like 10 years ago there was a web designer who took an Art 101 class, where the teacher told them to never use pure black paint. Because black objects in the real world appear to the viewer as a dark gray.
This is all true! On a canvas, painting a black car—which uses actual black paint in real life—using pure black paint, will not look right. The painting is supposed to "have its own light" included. So you must represent what the object would look like under the lighting conditions of the world you're recreating. Highlights are not different colors in real life, but they are on a painting.
But anyway, so this web designer, fresh from his Art 101 course, decided to write some blog post about it, and it's been accepted wisdom ever since.
1) We're not painting cars here, we're writing text. I don't load up "dark gray" ink in my fountain pen, nor do I use a "dark gray" toner in my printer. I would much rather the text on my screen be the same.
2) Contrast is good for legibility. Make the contrast as sharp as possible. Or, if you don't want that harsh look, then darken the background instead of lightening the text. Not too much, just enough to please your aesthetic sense while maintaining readability.
Yup. Agreed across the board.
Displays do have technical issues. CRT's bloom on high contrast elements. I just read OLED ghosting is a thing when pixels are full black, not driven, as examples.
How to best handle those makes sense.
There are technical reasons to avoid both extreme white and black. Discussing those makes sense.
Same with grays. Grays look better when you add a subtle amount of blue to them, instead of plain ass grays. Cold grays look better.
Finding a grey color range that more accurately reproduces seems like a more fruitful undertaking.
So? The contrast between 'black' and 'white' is still extreme relative to what people normally have around them. The same goes for the neon colors. They are 'diluted', but they're still incredibly garish and generally look unnatural. If you don't like the word 'unnatural' just replace it with 'digital looking'.
Now, looking 'unnatural' isn't necessarily bad (especially for a website interface) and something like text should definitely have a high contrast, but it's definitely something to keep in mind.
It's actually the opposite. The truth is, our eyes are able to easily register extreme levels of contrast -- clearly taking in a bright sunlit day through the window next to a dark but still clearly visible interior.
Computer screens (and film and camera sensors) don't achieve anything close to the level of contrast our eyes can take in, which is why things like exposure and blowout require so much careful attention -- why you simply can't take a photo of a bright landscape in the window of a dark room without artificial-looking HDR.
If you stand in an office and look around, it's not like computer screens stand out as blazing white with inky black figures on them. To the contrary — they fit in rather harmoniously in terms of brightness. (And in dark rooms, we tend to reduce brightness in order to keep the harmony.) The idea that computer screens have extreme levels of contrast in comparison with the surroundings is simply not true — it's entirely the opposite.
And I didn't say anything to the contrary. It's about what people are used to, not to what is physically possible. Again, digital neon colors are definitely not even close to the most extreme you can get - that doesn't mean they're not garish and ugly.
> clearly taking in a bright sunlit day through the window next to a dark but still clearly visible interior
Do you think most people would call that 'natural' and pleasant lighting conditions?
>If you stand in an office and look around, it's not like computer screens stand out as blazing white with inky black figures on them
If you look at them from their intended viewing angle, they're absolutely going to stand out (unless your display is just really dumpy).
>The idea that computer screens have extreme levels of contrast in comparison with the surroundings is simply not true
Feel free to name all the items in your (normally lit) office that have a higher or even just comparable contrast to your screen.
What do designers mean by 'pop'?
Colorblind friendly red/yellow/green for status for danger/warning/success goes a long way. And it's not that hard.
It's kind of discouraging to see insinuations that the author doesn't consider certain people because an article doesn't explore and include caveats for everything.
> "Always use color to support something that your design is already saying; never use it as the only means of communication."
https://jsfiddle.net/peteryates/uqdnj4sa/10/
Note, darken and lighten aren't always favoured these days, it's good advice to learn scale (https://sass-lang.com/documentation/modules/color#scale), but darken or lighten makes for an easier demo.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...
https://stripe.com/blog/accessible-color-systems
It'd be fantastic if they could open source it, are there any Stripers here that could nudge the right people? :-)
Saying, “Well, you need a color for the errors, and the successes, and the warnings” will almost invariably provoke the answers “Red, Green, Yellow” in some varying shade. The net effect is we can all tell when a website is using bootstrap or lacks branding.
If you are taking out the time to steer away from appearing generic and are trying to differentiate your app design and branding, I think this advice might be a subtle disservice.
You can change the presentation of the message by changing the position, the font, the size, the shape, the weight. You can add icons and other visuals. (E.g. your company’s mascot making a sad face).
Looking at errors and warnings handled in Google’s websites (not the generic Material UI Kit), Apple products, Slack, etcetera can be used as an example to see that “You need a color for errors, and a color for successes, and a color for warnings.” is not necessarily the only way to design errors, warnings, and successes.
It's not the only way, but it is the best way. Straying too far from semantic meanings of colors can create confusion for users that expect a certain thing. Can you imagine if your bank had a two buttons - "delete account" and "cancel", where the delete button was green and inviting and the cancel was red? Danger should be semantic if your app has any sort of high risk actions involved in it.
It's fine if a game or a rss reader uses their own funky palette that shows off their brand, but any time you start handling money you should really stray away from that.
Please be unique in other ways.
But here’s one scenario. Let’s assume the app in question is used for therapy or meditation[0] and its primary color is a sage green to emphasize calmness and a connection with nature. (BetterHelp is an example)
In this case, red over navy green is one direction you could go in. But another direction might be a notice with a darker green background and a large white error graphic (bold exclamation marker with a circle or triangle). The header could read “Error” in bold and the error message could appear in white.
To me the dark-green/white mixture would just as clear and usable as the red-over-green method.
[0] Theoretical Branding - https://dribbble.com/search/Therapy
It's a reasonable choice to use them, but you don't necessarily need to. It is a useful example for palette building as it is a common choice to us semantic colors, and it helps to demonstrate adding colors with substantially different hues.
At the end of the day "good" UI doesn't have a lot of room to be different -- it actually needs to be recognizable -- but you don't need to change much to avoid being generic. Using different shade(s) of red for errors is one way.
When looking at this site I immediately though: aha, this guy has been using TailwindCSS to design the website... (until I realized that in fact yes, it was designed with Tailwind and the author is also the author of tailwind itself.)
So I guess it's the same as bootstrap at the end of the day. Both provide you with options to customize them. Most people don't.
That being said: Working with tailwind is amazing!
As a user I want a "coherent experience" when using my computing device, also when several apps are on screen at the same time. Your fancy app is not the center of the universe and doesn't "deserve" its own color palette. If I'm in a "green mood" today, I want to pick a green color palette for all apps, the same way I can switch to a different background image.
But i can definitely see the appeal of a system wide color scheme. Dark mode is a nudge in this direction.
My hunch is that this is dependent on contrast. I've also seen several comments talking about designing in black and white first and then adding colour. A lot of this feels similar to painting. When learning to paint you first learn to paint in black and white to understand values (lightness/darkness) and contrast. This is not directly related but there's a great video on painting that shows how the colour picker's values can be deceiving in showing the true brightness/contrast of colours. If anyone's interested in how colours truly relate to brightness this video is definitely worth a watch -> https://youtu.be/gJ2HOj22gDo
They aren't and weren't ever meant to be used as-is. They intend to give you a base of color harmonies from wich to derive all those shades for primaries, accents etc.
I paid for a high contrast screen with uniform black and whites. I don’t want to clamp the palette to stuff that looks good on a worn out tft.
Wow this book sounds extremely promising as well, I think I’ll end up purchasing it in the future
For a lot of things, I've learned to step back, and let trained designers come up with a lot of this kind of thing. They don't always do things the way that I would, and I sometimes need to bite my tongue, but I think it's important to let them dictate things like graphic design and UI.
Most of my interaction is designing the software with as many "hooks" as possible, and also acting as an agent of the platform UI standards (in my case, Apple).
An additional guide that I would love to see: how to make a complementary dark mode (or light mode) palette that still holds on to your app's existing color brand.
So much of the existing advice seems easy to follow in light mode but doesn't click for me the other way around.
The one thing I would add is that once you pick your base color, the lighter shades are probably going to be low saturation and the darker shades are going to be high saturation.
HSL/HSV attempt to mimic paint mixing. Hue is the color. It’s a degree because imagine all colors of the rainbow arranged in a circle, that’s the color wheel and each degree corresponds to a different color. Saturation is how much color (0% saturation at 50% lightness is grey), and lightness is how light or dark the color is (0% is black, 100% is a very bright color or white depending on the saturation).
Here’s a good article on HSL/HSV with diagrams: https://psychology.wikia.org/wiki/HSL_and_HSV
I feel seen
grey message text is annoying though -- always go for contrast
I’m skeptical, you see. I’ve never seen an attractive web site designed that way.
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.
https://en.wikipedia.org/wiki/Riemannian_manifold
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.
> 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.
Also two shades of grey for text color, a dark one (main), a light one (Wikipedia title)
Edit:
The article I looked: https://en.m.wikipedia.org/wiki/Mark_Robinson_(American_poli...
The front page has even more colors: https://en.m.wikipedia.org/wiki/Main_Page
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.
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.
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.