5 ms·

What is good color? (2015)

65 points by lelf 8y ago

JepZ 8y ago
A great tool for choosing harmonic colors: https://color.adobe.com https://color.adobe.com There are others out there, but that URL stuck to my mind.
- mutatio 8y ago
  Similar for paint harmonies and comparison: https://encycolorpedia.com/paints?color=dac8ac&brand=Pantone+/+PMS https://encycolorpedia.com/paints?color=dac8ac&brand=Pantone...
scarygliders 8y ago
Don't want to sound ungrateful, but, if you're going to write an interesting article on good colour, the least you can do is make sure the text of the article isn't in light grey against a bright white background. Just sayin' :)
- deleted 8y ago
  [deleted]
- anonytrary 8y ago
  #666 is closer to dark grey than it is to light grey.
  - scarygliders 8y ago
    Indeed. And #000 is closer to black than to grey, and makes for a better contrast to #ffffff, and hence easier to read for those of us mere mortals with eyesight problems. (p.s. apparently my original comment got downvoted - my apologies if my comment was somehow offensive in some manner to someone - I honestly thought I was making a good observation. Or perhaps it was a web designer who loves making reading web pages as difficult as possible by camouflaging text as much as they can get away with against a #ffffff background ;) )
    - rocqua 8y ago
      Downvotes make text grayer, perhaps it was a communal attempt at humor?
      - scarygliders 8y ago
        That hadn't entered my head as a possibility - since I'm feeling mean, have an upvote to ensure your excellent comment stays black :)
    - anonytrary 8y ago
      High contrast mode is nice for people with eyesight problems, yet it strains people with normal eyesight. More contrast leads to less cognitive ease for the average user.
      - mkesper 8y ago
        Please show the studies proving this.
  - defanor 8y ago
    It is, but still doesn't meet WCAG's AAA requirements [1,2]. And then there's the blinding white background. Though those issues are common, and one can mitigate them with color overriding (supported by some web browsers) or a global CSS theme (Midnight Surfing [3], for instance). Edit: perhaps worth mentioning that contrary to what the grandparent comment says, I don't think one has to be familiar with how colors affect legibility if they are going to write about colors looking good on drawings. [1] https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont... [2] https://contrastchecker.com/ https://contrastchecker.com/ [3] https://userstyles.org/styles/23516/midnight-surfing-global-dark-style https://userstyles.org/styles/23516/midnight-surfing-global-...
rabidrat 8y ago
As someone who does not have a great eye for color but would like to become better, I really liked this model of color and how to create harmonious color pallette. The color wheel never made sense to me.
- renjimen 8y ago
  Me too. It did a good job of putting in to words that which I had a gut feeling for.
stesch 8y ago
I only know that green isn't a creative color.
- jacobush 8y ago
  Teal and magenta is creative. You can't make nonconformist movies unless they are color graded teal and magenta. And drink your coffee!
ItsMe000001 8y ago
The first thing I did was to change the text color from #666 to #000. It is soooo much easier to read now. I don't understand why gray - and a pretty light shade even (666 is pretty far from 000) - has become the standard text color on (way too many) websites. None of my displays, from middlish quality laptop to Adobe color space 32 inch monitor, show that as even close to being the most readable text color. In addition, the page sets a font weight of 300, combined with the font used it ends up with a pretty thin font that looks grayish to begin with. By the way, what is this   character that's all over the text for me?
- KineticLensman 8y ago
  > By the way, what is this   character that's all over the text for me? It's a Line Separator character: U+2028 or HTML entity code &#8232 Not all browsers display it correctly. Based on a quick test, Firefox and Edge do, Opera and Chrome don't. This is why it's worth checking your web content in a variety of browsers as your content creation / publication tools aren't guaranteed to produce browser-independent output.
headsoup 8y ago
His point seems to be 'don't go near the scary end of colour and you're all good: stick to pastels and use a million shades of nearly the same colour. I don't think it explains good colour use, vision differences (e.g. Tetrachromacy) or why artists can sometimes seem to make horrible colours work really well. Better gradients does not necessarily equal better colour.
KineticLensman 8y ago
The artist in me agrees with a lot of what he says but I do feel it necessary to point out that in many applications there are other considerations than colour harmony. Specifically accessibility for the large proportions of the population who have some form of colour blindness and the need to develop clearly distinguished palettes for information presentation (as opposed to art). My go-to resource for non-artistic palette development is [0] [0] https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283 https://blog.graphiq.com/finding-the-right-color-palettes-fo...
- Kagerjay 8y ago
  This is a good resource, I have seen this authors articles before on forums before too Personally, what I have been doing with color choice selection is just use HSL format. It makes it very easy to reason about and A/B test different colors to see what pallettes work. I have not really considered color blindness though, but per the article having color hues work in greyscale makes sense. Its like printing black/white documents VS color based docs. General rule of thumb to me is don't use more than 3 primary colors. The first starting point is to work with the existing theme's logo color choices. This vastly limits what range of colors you can use, depending on what emotions you want to evoke. Finding good color palletes is hard. Even with all the color choice palletes out there. Somedays I spend literally an entire day tweaking color choices on some projects. The critic in me cannot stand poor color choice selections. I sometimes wish I wasn't terrible at art either, telling stories is so much easier when you can make nice hand-drawn / watercolor drawings.
_yawn 8y ago
Like all "theories" of art and music this model is no good as it isn't predictive. There are plenty of good art with brightly saturated color. Deciding spontaneously that muted colors are the one true way and then that preference for saturation is some sort of retardation in development is just laughable at best. I have a friend who prefers muted colors precisely because he's color blind.
hnzix 8y ago
I find it fascinating that many Asian cultures do not distinguish between Blue and Green, including their traffic signals [0]. And color symbology varies between cultures [1]. There are also interesting parallels between the color wheel and the musical circle of fifths. Or as Boards of Canada would have it, Music Is Math [2]. [0] https://www.japantimes.co.jp/life/2013/02/25/language/the-japanese-traffic-light-blues-stop-on-red-go-on-what/ https://www.japantimes.co.jp/life/2013/02/25/language/the-ja... [1] https://jenndavid.com/colors-that-influence-food-sales-infographic/ https://jenndavid.com/colors-that-influence-food-sales-infog... [2] https://www.youtube.com/watch?v=F7bKe_Zgk4o https://www.youtube.com/watch?v=F7bKe_Zgk4o
Jack000 8y ago
there's no universal standard for good color because it depends on context and fashion. eg. MS used blue as a calming color for error screens, but it became a symbol for failure and frustration via the bsod. It's also common knowledge to use warm colors for food, but this creates a vacuum of blue colored food brands which now stands out (eg. blue apron)

65 points by lelf 8y ago

JepZ 8y ago

A great tool for choosing harmonic colors: https://color.adobe.com https://color.adobe.com There are others out there, but that URL stuck to my mind.

mutatio 8y ago
Similar for paint harmonies and comparison: https://encycolorpedia.com/paints?color=dac8ac&brand=Pantone+/+PMS https://encycolorpedia.com/paints?color=dac8ac&brand=Pantone...

scarygliders 8y ago

Don't want to sound ungrateful, but, if you're going to write an interesting article on good colour, the least you can do is make sure the text of the article isn't in light grey against a bright white background. Just sayin' :)

deleted 8y ago
[deleted]
anonytrary 8y ago
#666 is closer to dark grey than it is to light grey.
- scarygliders 8y ago
  Indeed. And #000 is closer to black than to grey, and makes for a better contrast to #ffffff, and hence easier to read for those of us mere mortals with eyesight problems. (p.s. apparently my original comment got downvoted - my apologies if my comment was somehow offensive in some manner to someone - I honestly thought I was making a good observation. Or perhaps it was a web designer who loves making reading web pages as difficult as possible by camouflaging text as much as they can get away with against a #ffffff background ;) )
  - rocqua 8y ago
    Downvotes make text grayer, perhaps it was a communal attempt at humor?
    - scarygliders 8y ago
      That hadn't entered my head as a possibility - since I'm feeling mean, have an upvote to ensure your excellent comment stays black :)
  - anonytrary 8y ago
    High contrast mode is nice for people with eyesight problems, yet it strains people with normal eyesight. More contrast leads to less cognitive ease for the average user.
    - mkesper 8y ago
      Please show the studies proving this.
- defanor 8y ago
  It is, but still doesn't meet WCAG's AAA requirements [1,2]. And then there's the blinding white background. Though those issues are common, and one can mitigate them with color overriding (supported by some web browsers) or a global CSS theme (Midnight Surfing [3], for instance). Edit: perhaps worth mentioning that contrary to what the grandparent comment says, I don't think one has to be familiar with how colors affect legibility if they are going to write about colors looking good on drawings. [1] https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont... [2] https://contrastchecker.com/ https://contrastchecker.com/ [3] https://userstyles.org/styles/23516/midnight-surfing-global-dark-style https://userstyles.org/styles/23516/midnight-surfing-global-...

rabidrat 8y ago

As someone who does not have a great eye for color but would like to become better, I really liked this model of color and how to create harmonious color pallette. The color wheel never made sense to me.

renjimen 8y ago
Me too. It did a good job of putting in to words that which I had a gut feeling for.

stesch 8y ago

I only know that green isn't a creative color.

jacobush 8y ago
Teal and magenta is creative. You can't make nonconformist movies unless they are color graded teal and magenta. And drink your coffee!

ItsMe000001 8y ago

The first thing I did was to change the text color from #666 to #000. It is soooo much easier to read now. I don't understand why gray - and a pretty light shade even (666 is pretty far from 000) - has become the standard text color on (way too many) websites. None of my displays, from middlish quality laptop to Adobe color space 32 inch monitor, show that as even close to being the most readable text color. In addition, the page sets a font weight of 300, combined with the font used it ends up with a pretty thin font that looks grayish to begin with. By the way, what is this   character that's all over the text for me?

KineticLensman 8y ago
> By the way, what is this   character that's all over the text for me? It's a Line Separator character: U+2028 or HTML entity code &#8232 Not all browsers display it correctly. Based on a quick test, Firefox and Edge do, Opera and Chrome don't. This is why it's worth checking your web content in a variety of browsers as your content creation / publication tools aren't guaranteed to produce browser-independent output.

headsoup 8y ago

His point seems to be 'don't go near the scary end of colour and you're all good: stick to pastels and use a million shades of nearly the same colour. I don't think it explains good colour use, vision differences (e.g. Tetrachromacy) or why artists can sometimes seem to make horrible colours work really well. Better gradients does not necessarily equal better colour.

KineticLensman 8y ago

The artist in me agrees with a lot of what he says but I do feel it necessary to point out that in many applications there are other considerations than colour harmony. Specifically accessibility for the large proportions of the population who have some form of colour blindness and the need to develop clearly distinguished palettes for information presentation (as opposed to art). My go-to resource for non-artistic palette development is [0] [0] https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283 https://blog.graphiq.com/finding-the-right-color-palettes-fo...

Kagerjay 8y ago
This is a good resource, I have seen this authors articles before on forums before too Personally, what I have been doing with color choice selection is just use HSL format. It makes it very easy to reason about and A/B test different colors to see what pallettes work. I have not really considered color blindness though, but per the article having color hues work in greyscale makes sense. Its like printing black/white documents VS color based docs. General rule of thumb to me is don't use more than 3 primary colors. The first starting point is to work with the existing theme's logo color choices. This vastly limits what range of colors you can use, depending on what emotions you want to evoke. Finding good color palletes is hard. Even with all the color choice palletes out there. Somedays I spend literally an entire day tweaking color choices on some projects. The critic in me cannot stand poor color choice selections. I sometimes wish I wasn't terrible at art either, telling stories is so much easier when you can make nice hand-drawn / watercolor drawings.

_yawn 8y ago

Like all "theories" of art and music this model is no good as it isn't predictive. There are plenty of good art with brightly saturated color. Deciding spontaneously that muted colors are the one true way and then that preference for saturation is some sort of retardation in development is just laughable at best. I have a friend who prefers muted colors precisely because he's color blind.

hnzix 8y ago

I find it fascinating that many Asian cultures do not distinguish between Blue and Green, including their traffic signals [0]. And color symbology varies between cultures [1]. There are also interesting parallels between the color wheel and the musical circle of fifths. Or as Boards of Canada would have it, Music Is Math [2]. [0] https://www.japantimes.co.jp/life/2013/02/25/language/the-japanese-traffic-light-blues-stop-on-red-go-on-what/ https://www.japantimes.co.jp/life/2013/02/25/language/the-ja... [1] https://jenndavid.com/colors-that-influence-food-sales-infographic/ https://jenndavid.com/colors-that-influence-food-sales-infog... [2] https://www.youtube.com/watch?v=F7bKe_Zgk4o https://www.youtube.com/watch?v=F7bKe_Zgk4o

Jack000 8y ago

there's no universal standard for good color because it depends on context and fashion. eg. MS used blue as a calming color for error screens, but it became a symbol for failure and frustration via the bsod. It's also common knowledge to use warm colors for food, but this creates a vacuum of blue colored food brands which now stands out (eg. blue apron)