5 ms·

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 auth

by jjcm 6y ago

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.

amelius 6y ago
> 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.
- RussianCow 6y ago
  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.
- matt_kantor 6y ago
  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".
  - amelius 6y ago
    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.
- Igelau 6y ago
  Wow. Choosing a color palette for a UI and choosing a color palette for a painting are two completely different bags. This should be obvious.
bredren 6y ago
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'd build this if I didn't have my hands full!
- davkap92 6y ago
  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/ https://cloudflare.design/color/
  - davkap92 6y ago
    This one looks good too https://material.io/resources/color/#!/?view.left=0&view.right=0 https://material.io/resources/color/#!/?view.left=0&view.rig...
sundarurfriend 6y ago
> In India [red] represents purity. 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.
- logicuce 6y ago
  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?
  - sundarurfriend 6y ago
    Sorry, missed this comment till now. > 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.
- nautical 6y ago
  All Goddesses wear red colored clothes and normally wear Red "Tilaka" ( along with yellow and white sometimes ). It does symbolize purity in a way.
- vhanda 6y ago
  An Indian Bride also typically wears red clothes.
Daub 6y ago
>RGB simply does not map 1:1 with our biology. 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.
- blauditore 6y ago
  One of the problems is that color perception is linear across RGB, so it's only a rough approximation of biology.
- ath92 6y ago
  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.
- fanf2 6y ago
  RGB leaves out the opponent process, which explains the preschool primary colours red green yellow blue in a way that RGB cannot https://en.wikipedia.org/wiki/Opponent_process https://en.wikipedia.org/wiki/Opponent_process
torgard 6y ago
> 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] [0]: https://en.wikipedia.org/wiki/Red_states_and_blue_states#Contemporary_use https://en.wikipedia.org/wiki/Red_states_and_blue_states#Con...
- croisillon 6y ago
  Republican and Democrat left/right leaning used to be swapped though https://www.livescience.com/34241-democratic-republican-parties-switch-platforms.html https://www.livescience.com/34241-democratic-republican-part...
- tobr 6y ago
  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.
  - vanderZwan 6y ago
    That's not a bad hypothesis, but then why pick the color most strongly associated with communism?
    - sdenton4 6y ago
      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. https://en.wikipedia.org/wiki/Red_states_and_blue_states#Contemporary_use https://en.wikipedia.org/wiki/Red_states_and_blue_states#Con...
tobr 6y ago
> 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.

by jjcm 6y ago

amelius 6y ago

> 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.

RussianCow 6y ago
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.
matt_kantor 6y ago
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".
- amelius 6y ago
  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.
Igelau 6y ago
Wow. Choosing a color palette for a UI and choosing a color palette for a painting are two completely different bags. This should be obvious.

bredren 6y ago

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'd build this if I didn't have my hands full!

davkap92 6y ago
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/ https://cloudflare.design/color/
- davkap92 6y ago
  This one looks good too https://material.io/resources/color/#!/?view.left=0&view.right=0 https://material.io/resources/color/#!/?view.left=0&view.rig...

sundarurfriend 6y ago

> In India [red] represents purity. 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.

logicuce 6y ago
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?
- sundarurfriend 6y ago
  Sorry, missed this comment till now. > 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.
nautical 6y ago
All Goddesses wear red colored clothes and normally wear Red "Tilaka" ( along with yellow and white sometimes ). It does symbolize purity in a way.
vhanda 6y ago
An Indian Bride also typically wears red clothes.

Daub 6y ago

>RGB simply does not map 1:1 with our biology. 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.

blauditore 6y ago
One of the problems is that color perception is linear across RGB, so it's only a rough approximation of biology.
ath92 6y ago
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.
fanf2 6y ago
RGB leaves out the opponent process, which explains the preschool primary colours red green yellow blue in a way that RGB cannot https://en.wikipedia.org/wiki/Opponent_process https://en.wikipedia.org/wiki/Opponent_process

torgard 6y ago

> 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] [0]: https://en.wikipedia.org/wiki/Red_states_and_blue_states#Contemporary_use https://en.wikipedia.org/wiki/Red_states_and_blue_states#Con...

croisillon 6y ago
Republican and Democrat left/right leaning used to be swapped though https://www.livescience.com/34241-democratic-republican-parties-switch-platforms.html https://www.livescience.com/34241-democratic-republican-part...
tobr 6y ago
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.
- vanderZwan 6y ago
  That's not a bad hypothesis, but then why pick the color most strongly associated with communism?
  - sdenton4 6y ago
    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. https://en.wikipedia.org/wiki/Red_states_and_blue_states#Contemporary_use https://en.wikipedia.org/wiki/Red_states_and_blue_states#Con...

tobr 6y ago

> 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.