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.
> 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]
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.
> 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.
> 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 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.
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".
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.
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.
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.
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.
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
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.
> 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’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!
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.
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.
[+] [-] jjcm|5 years ago|reply
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.
[+] [-] bredren|5 years ago|reply
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!
[+] [-] torgard|5 years ago|reply
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...
[+] [-] sundarurfriend|5 years ago|reply
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.
[+] [-] tobr|5 years ago|reply
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.
[+] [-] Daub|5 years ago|reply
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.
[+] [-] amelius|5 years ago|reply
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.
[+] [-] allenu|5 years ago|reply
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.
[+] [-] helmholtz|5 years ago|reply
[+] [-] theartfuldodger|5 years ago|reply
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
[+] [-] kuschku|5 years ago|reply
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".
[+] [-] neop1x|5 years ago|reply
[+] [-] wmeredith|5 years ago|reply
[+] [-] rubyn00bie|5 years ago|reply
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.
[+] [-] PaulHoule|5 years ago|reply
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.
[+] [-] jan6|5 years ago|reply
[+] [-] manceraio|5 years ago|reply
It works better than I ever expected, but it has of course its corner cases.
It's open sourced:
tailwind.ink
[+] [-] polk|5 years ago|reply
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.
[+] [-] dawnerd|5 years ago|reply
[+] [-] dannyeei|5 years ago|reply
[+] [-] arendtio|5 years ago|reply
> 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.
[+] [-] nmfisher|5 years ago|reply
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.
[+] [-] stickfigure|5 years ago|reply
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.
[+] [-] justusthane|5 years ago|reply
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.
[+] [-] sundarurfriend|5 years ago|reply
[+] [-] xori|5 years ago|reply
[+] [-] nbzso|5 years ago|reply
[+] [-] mushbino|5 years ago|reply
[+] [-] TazeTSchnitzel|5 years ago|reply
[0] light gray, dark gray, white, black, navy blue, the other gray (scrollbars), the light yellow used for help text backgrounds
[+] [-] zer0tonin|5 years ago|reply
[+] [-] tomtheelder|5 years ago|reply
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.
[+] [-] helmholtz|5 years ago|reply
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.
[+] [-] crazygringo|5 years ago|reply
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.
[+] [-] leonmoonen|5 years ago|reply
[+] [-] xgad|5 years ago|reply
> "Always use color to support something that your design is already saying; never use it as the only means of communication."
[+] [-] themacguffinman|5 years ago|reply
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.
[+] [-] dilawar|5 years ago|reply
[+] [-] jaxn|5 years ago|reply
Colorblind friendly red/yellow/green for status for danger/warning/success goes a long way. And it's not that hard.
[+] [-] petepete|5 years ago|reply
[+] [-] kowlo|5 years ago|reply
[+] [-] kowlo|5 years ago|reply
[+] [-] tdons|5 years ago|reply
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? :-)
[+] [-] anomaloustho|5 years ago|reply
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.
[+] [-] jjcm|5 years ago|reply
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.
[+] [-] amelius|5 years ago|reply
[+] [-] xkyscore|5 years ago|reply
[+] [-] flohofwoe|5 years ago|reply
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.
[+] [-] mqus|5 years ago|reply
But i can definitely see the appeal of a system wide color scheme. Dark mode is a nudge in this direction.
[+] [-] nstart|5 years ago|reply
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
[+] [-] krsdcbl|5 years ago|reply
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.