I work on design systems as my day-to-day job. This is the first post I've seen on HN that actually captures how to properly set up your color palette. The author's early call out on how palette generators are not a one-stop-shop for your color palette rings true. Color meaning and harmony cannot be broken down into a mathematical formula. It's too heavily influenced by a.) biology, b.) trends, and c.) culture.
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.
I use coolors.co for my palette work but have had to use my intuition for button state shades horizontal rules and otherwise.
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 was just thinking the same thing!
May also build something like this. This from cloudflare seems quite close to what i had in mind
https://cloudflare.design/color/
> The last bit is culture. Color in each culture is widely different.
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]
I’ve been wondering if it is because of Americans’ phobia of socialism? Democrats don’t (generally) want to be seen as socialists, so they can’t embrace the red of the American flag more than the blue.
I don't think there was any real picking involved on the part of the parties... Election maps would use red and blue, but that was a very intermittent thing to look at (once every four years for most people; voter turnout in the US was abysmally low, and who knows how many voters actually watched the results with interest). And each network would kinda randomly assign them to each party, without even agreement over which is which from one network to another. And then it finally settled into consistency in 2000.
Maybe I misunderstand your comment, but my point is they didn’t. Communism/socialism is red, and the US is blue+red. If the “left” side of US politics feel a need to distance themselves from socialism, they need to claim blue as their main color. No one is likely to mistake Republicans for communists so it’s safe for them to use red.
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.
Apologies, I meant to say why would Republicans pick red in that case, since they're even more anti-communist, but forgot to be specific enough in expressing that
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.
Red cloth is commonly used in Pooja, and you put Red tika (and rice grains) on forhead. Brides traditionally wear predominantly red clothes for certain ceremonies during wedding. Red, Yellow/Amber, and White are quite common during rituals in North. Are they not in South India?
> 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.
> 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.
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.
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.
The RGB you'd typically use when designing or developing something does not really map very well to human biology because it's just an approximation that happens to work well with the technology we currently have.
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.
> This is the first post I've seen on HN that actually captures how to properly set up your color palette.
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.
I don't understand this criticism. The article isn't about a specific palette, but rather rules of thumb for building your own. The hues they use in the examples are pretty bland, but the advice isn't "use these colors", it's "here's how to create a palette using colors of your choice".
The criticism is that they shouldn't use a palette as an example that everybody already uses. Instead they should show how their rules can help us arrive at something interesting and new.
Depending on your brand, boring might be a good thing. You don't want a backend business/reporting tool or data viz solution to go "wild" with its color palette; you want things to be readable and distinct without looking horrible. For that type of software, guides like this are great.
I thought I had a good sense of aesthetics, but I struggled with coming up with a color scheme for my own app. Once you pick colors that look nice, when you put them together, something always seems off! There isn't a unity and it's hard as an analytical thinker to explain why. You just can feel it.
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.
I checked out your website and the app listed on your profile and they definitely looks professional and polished! Would you care to share the resources you used to learn this stuff? Even better if you could write more about your own journey. It's exactly the not-a-designer-by-trade-but-enthusiastic-about-it types whose backgrounds I can relate to the most.
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.
I haven't seen your work, but this to me is generally excellent advice. I wish more people would provide and hear it.
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.
I audit sites frequently, the most common flaw is designers treating text as an afterthought. This article had one point that probably assists in the poor contrast choices that are so common. As I type in black on white in this text box I have trouble understanding why design professionals would call "black" on white unnatural. It is not. Unnatural isn't even an appropriate word to use for images and text displayed on a screen unless you are describing the entire experience. Do yourself ( and us) a favor and throw that whole idea out the window and start at #333 to pure black on white as your minimum contrast unless something particularly important in the overall aesthetic changes that priority.
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.
Get a properly calibrated 1000 nits screen and display #000 on #fff (without wearing sunglasses). Have fun ;)
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".
On the other hand, for most use-cases users will be using a shitty old monitor not only uncalibrated, but with "digital vibrancy" and "sharpness" or whatnot set to 1000% and all careful color design is pointless. You have to design to what users will be using, just like game developers test their games on toaster-PCs.
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.
True, but you have to be able to support both. And unless we actually have a coloraware workflow for everything, the "too much/too little" contrast war won’t ever end.
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.
It is, but most systems aren't using a color managed workflow. And sRGB content on an sRGB screen looks exactly the same as on a DCI-P3 panel if you're using a color-managed workflow.
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.
I am, and many other designers are as well. With HDR monitors becoming more popular, more and more gamers are now using such monitors, too.
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)
I do have a "HDR" monitor, but as far as I know most gaming HDR monitors don't have true HDR, and usually have a peak brightness of 250nits (or 400-500 nits for the more expensive ones).
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.
That's the point I was trying to make: those extremely high-quality monitors are basically ~0% of users, but a significant percentage of creators. And creators often design stuff so it looks great on their own displays.
Some web designers like to do gray background with just a bit darker text. Little contrast, hard to read. Even code editors often have "dark theme" with gray background an not-light-enough text color. Sometimes I am able to override CSS rules, sometimes I have to modify theme to create "black theme". But reducing contrast seems to be a bad modern habit, unfortunatelly.
Black on white is considered unnatural because it doesn't really ever occur in nature. I agree on the text is not an afterthought thing. It should be the first thought. Content is and always will be king.
But it occurs in print, which humans have become very accustomed to over the last 500 years. It's like the "paleo food" argument that somehow we aren't properly evolved to digest grains.
Gonna say I really appreciate this article, and I feel a bit dense in hindsight. I've had a helluva time trying to understand a lot of design articles talking about 3-5 colors... "Why does everything I make using these same colors look like shit tho?" and that's because they ain't using only 3-5!
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.
Any design should make sense in black and white and color should be the cherry on top.
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.
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.
I coded a beta plugin for Figma. I don't know how to contact you, but if you read this comment, please DM on Tweeter at @manceraio so I can share it with you!
When I saw that palette it felt so familiar, then I started reading:
> 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.
I actually toyed with asking for a refund on this book (though in the end I decided not to).
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.
> many of us back-end developers would be over the moon if we were able to make "meh" design in the first place
> 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.
Maybe I'm a weirdo but I rather like his first example of "unless you want your site to look like this". The red is a bit much but it is an error message, after all. Overall it looks like the iconic Santa Fe Railroad "bluebonnet" color scheme:
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.
I am not a designer, but I thought that that example is both awful and reflected my own experience with color scheme generators (“How do I make a design look good with these five colors?!”).
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.
Problem is that most generators just give you your two or three primaries. You’d need to turn those into the 50 to 900 range of shades that the author talks about.
I am shocked sometimes on how "designers" are in mass without a solid design foundation. In context of usability and interface there is a simple rule: contrast and white space is mandatory. For colours and palettes there are a ton of solid research and historically validated materials. If you are designer do your self a favour and invest time and money not on "quick and dirty" approach on this subject but in building serious knowledge about colour. Colour is deep topic with functional and emotional impact on the user. I am with impression that tools and product implementation are leading real design process. And this is bad. Tech knowledge is a tool for implementation. Design knowledge is not new. This article is good selling pitch but knowledge-wise is scratching the surface of the topic.
Unfortunately, compared to engineering there's a low barrier to entry for design. Many, especially small companies make their design hires without knowing what they're looking for. There are many nebulous concepts involved so it's easy to underestimate the challenges involved. For example, I took two semesters of color theory in college and we barely scratched the surface.
Hmm, but 90's UI design got by with far fewer shades. Windows 95 has at most seven colours[0] used in the UI aside from the desktop background and icons, and yet it had a very clear visual hierarchy compared to today's designs.
[0] light gray, dark gray, white, black, navy blue, the other gray (scrollbars), the light yellow used for help text backgrounds
Because buttons weren't distinguished by color in Windows 9x, but by borders and shadows. You can do that on the web too, but this article is about color.
You can make a usable product using a Windows 95 palette, but I think it may look outdated to users.
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 must be possible to achieve a happy medium: something with the legibility of an older design that doesn't look dated or unpolished. (Though I reject the notion that 90's designs weren't sophisticated or polished.) It doesn't need to limit itself to six colours, but I'm not convinced that an endless series of shades with low contrast to one another is good design from a functional perspective.
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.
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.
I honestly don't see why the Pages example would be a big improvement over Word.
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.
I think it's implied, but unstated, that this guide is for picking a palette for an app that follows modern design trends. The choice of a slack-like UI reinforces that.
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.
I don't see what one gains by limiting the number of shades of colour when designing a professional app (as opposed to a personal/art project where one might enjoy constraints). Just a mental satisfaction of 'I used less!'?
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).
There may need to be more than one shade of a colour, but having a large number of shades suggests to me that the design has too many subtle contrasts in brightness.
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.
> True black tends to look pretty unnatural, so start with a really dark grey
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.
> 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".
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.
My point is that it's now a common misconception that #000 is an "unnatural" black -- that's literally the word the article uses. That it's blacker than anything natural, i.e. blacker than objects in real life, that it becomes an "unnatural" level of contrast.
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.
I was about to write my own diatribe, but found yours first.
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.
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.
>#000 is already dark gray on any normal real-life screen
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.
> The contrast between 'black' and 'white' is still extreme relative to what people normally have around them.
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.
> our eyes are able to easily register extreme levels of contrast
>Computer screens (and film and camera sensors) don't achieve anything close to the level of contrast our eyes can take in
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.
It's funny seeing this question because in the early 2000s it was designers complaining "what the hell do clients mean by 'pop'?" Now it seems designers have adopted the lingo and it's others asking designers this question.
I think people scale their perception when looking at a screen, looking at white on black is too harsh for most uses with text these days. I personally think it looks really unprofessional and uninspiring going for the most possible contrast in a design.
I agree. In my case, my art teacher told us, almost 20y ago now, that we shouldn’t use pure black in digital design because it‘s unnatural. He failed to explain why though, and I never found an argument that didn’t sound dogmatic, so I‘ve filed it under cargo cult.
20 years ago, pure black on a CRT, for example, up against pure white would have generated artifacts on many displays.
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.
I’m totally stunned you would not even consider for a minute the ~10% of people who are colorblind (not part of that group, but always aware while creating visualizations as a scientific writer)
That seems pretty out of the scope of this article. An article about accessibility can be covered separately and most accessibility articles already recommend that color isn't the only indicator, so a warning/error is still distinguishable with icons & shapes & text.
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.
I am part of colorblind groups. People loves mixing green and red in scientific plots in papers I read. It's effing irritating. 10% is not such a small number, we are many more than IE users.
This used to be so much more of a pain before Sass (and friends) came along. Having a red error box with a separate border colour used to be a pain to maintain but it's so simple with darken/lighten and a few commonly used context-specific variables.
Do you have any resources or examples you recommend for this? My front-end knowledge is over a decade old. I would still be assigning all these colours individually in CSS!
Worth it if you're not from the web design world. For those already in that sphere, there's nothing new here; no lesson that hasn't already been taught in web design blogs over the years.
I got it a while back and have to say it was worth it. Sure it’s more expensive than a normal book, but if $100 can get me the condensed reference of an expert then I see it as a win.
I think there is a lot of validity to this article. But extrapolated as “general advice” would seem to replicate Bootstrap aesthetics every time.
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.
> “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.
The author is one of the creators of Tailwind CSS, which gives you a predefined color palate but no components, and is intentionally opposed to the Bootstrap ideas. The recognizable part of Bootstrap isn't the fact that errors are red, it's the shape of the buttons, inputs, etc., and the fact that all errors are the exact same red as other Bootstrap sites.
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.
The irony is that you can now often recognize sites being designed with Tailwind the exact same way. They tend to use a certain font, they tend to slightly overuse the card metaphor with a rather specific corner radius and box shadow...
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 the author says: "You might also need colors to emphasize different semantic states"
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.
I think it’s fair to say that “swapping” the symbolic colors with each other would be an antipattern in most cases.
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.
This might sound strange to today's UI design crowd, by why is there so much emphasis on applications picking their own color palette when this should be the job of the operating system?
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.
I disagree.
I think that the OS should provide a set of UI elements so that all applications have a similar navigation and learnability. Colors however are a great way to set a Brand and distinguish apps from another. A benefit is that I can instantly see if I'm in Powerpoint(red) or Excel(green), even if the view I have is just some pixels wide (e.g. previews).
But i can definitely see the appeal of a system wide color scheme. Dark mode is a nudge in this direction.
> It's important to note that there are no real rules here like "start at 50% lightness" or anything — every color behaves a bit differently, so you'll have to rely on your eyes for this one.
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
I feel like the article intentionally misses a huge point about those color palette generators.
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.
There were some studies about how colors had systematic effects on user mood. But they were before the replication crisis and I could easily imagine them falling through - does anyone know the current state?
Ah, I too love his work. I have yet to use tailwind but I plan on it for my current project. Read his rationale behind utility classes vs semantic/classic/whatever-you-call-it CSS and... it just makes so much sense. It reads like he thought of every “well, but what about X” and it shows
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).
I hope we see more articles like this on HN. I am not a designer, but when I build a site, just some basic guidance around design would make it much nicer.
I made a tool a little while ago that helps generate color shades and blends: https://colorkit.io
It's nice that Bootstrap, Tailwind, and other libraries come with default shades of gray and colors, but I think these should typically be customized to match the brand, so I made this tool to speed up that process!
It's pretty good advice. I'd like to add that colors aren't defined in vacuum. You probably want to start with a mockup design, add some colors. Then grab those colors and start to nail them down. Then put the updated colors back into more designs. Do this back and forth a couple of times. Do not spend too much time staring at color palettes.
I'm building a color palette now for a hobby site. The MaterialUI color guide matches this writeup pretty well.
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.
My biggest issue when I'm trying to put together a palette is that dark mode comes first in my eyes, with a light mode as an option later should people request it.
So much of the existing advice seems easy to follow in light mode but doesn't click for me the other way around.
It would be cool to see a follow-up post that incorporates patterns (different marks likes dots and hatches, different densities, etc.) as an additional distinguishing characteristic for areas fills that aids accessibility.
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.
I'm at a loss here. Which value should I change when I try to create different shades of color X? The hue? Brightness? What kind of color encoding should I use?
The hue is the color, so generally you should change the lightness and saturation to get a different shade. You should use HSL (hue-saturation-lightness) because that’s what CSS3 uses, and HSL/HSV are colorwheels designed for representing RGB (what screens use).
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).
This way of thinking is why every commercial software package looks the same. Why must every background and panel be grey? Why must we have only one primary colour? Why must every colour field have edges?
Probably because these guidelines have been "proven to work" to produce a usable UI. The priority of commercial software isn't usually to produce a work of art, it's to produce a usable tool, there's little incentive to take creative risks.
I’d genuinely find the blue and yellow design at the start delightful to use. Warm, bold, readable, tons of personality. My brain almost hurt looking at the drab follow-up.
Does anyone know a good categorical color palette with equal perceptual intensity? I mean, all colors should be maximally distinct in any ordering they come. I can get up to 10 colors by hand but then they all start looking too similar. I am using it to display spans in a text labeling interface.
Sounds like a great idea for a long term poll. Task varied persons through several generations across the world with categorizing colors. If somethings similar has been done I'd love to know.
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.
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.