8 ms·

Practical Color Theory for People Who Code

491 points by donnemartin 10y ago

jacobolus 10y ago
Ugh. This is well meaning, but because based on a color model with a very tenuous relation to human color perception, with further decisions built on loose heuristics without rigorous support (and apparently ported from paint mixing advice), the choices made are pretty arbitrary, yielding poor results. This part in particular ... > Pick any color by selecting its hue (0-360) on the color wheel at full saturation (100%) and at half lightness (50%) - this way you start with the 'most colorful color' you can get. ¶ Generate your second color without having to guess what will work. Thanks to science and wavelengths, we know that this works. The opposition of these two colors stimulate your photoreceptor cells in a good way! ... ends up being poor advice in general, “science and wavelengths” notwithstanding. Any pair of decently separated hues will do just as well as a pair of HSL “complements”, as long as the chroma and lightness are carefully chosen. If you take this specific advice and just rotate the hue around in HSL space, all of the perceptual color relationships will swing wildly. Someone following this program who has a lot of experience with visual art / design will end up making reasonable choices based on intuition and past experience, but that will be in spite of this guide, not because of it. Sorry to be harsh, but in my opinion non-experts will get better results than this blog post’s recommendations by just choosing perceptual lightness (e.g. in CIELAB space) of each color to have sufficient contrast, and then picking the hue/chroma entirely at random, or using any other desired criteria. Here’s what Cynthia Brewer, expert in color choices for maps and diagrams, had to say about models like HSL and HSV: > Computer science offers a few poorer cousins to these perceptual spaces that may also turn up in your software interface, such as HSV and HLS. They are easy mathematical transformations of RGB, and they seem to be perceptual systems because they make use of the hue–lightness/value–saturation terminology. But take a close look; don’t be fooled. Perceptual color dimensions are poorly scaled by the color specifications that are provided in these and some other systems. For example, saturation and lightness are confounded, so a saturation scale may also contain a wide range of lightnesses (for example, it may progress from white to green which is a combination of both lightness and saturation). Likewise, hue and lightness are confounded so, for example, a saturated yellow and saturated blue may be designated as the same ‘lightness’ but have wide differences in perceived lightness. These flaws make the systems difficult to use to control the look of a color scheme in a systematic manner. If much tweaking is required to achieve the desired effect, the system offers little benefit over grappling with raw specifications in RGB or CMY. http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html If anyone is looking for a better resource, the best one I know of on the web is http://www.handprint.com/LS/CVS/color.html http://www.handprint.com/LS/CVS/color.html. Otherwise, I recommend going straight to books. There are a variety of available books at every level of technical detail.
- scribu 10y ago
  Someone making a color scheme for a chart needs to be very rigorous indeed, because color is actually how the data is represented, in some cases. The tutorial seems to be aimed at front-end developers that want to put together a color scheme for a website. In this case, color is more like decoration, so it doesn't need to be as rigorous, IMHO.
  - jacobolus 10y ago
    My basic claim is that contrast in perceived lightness (a.k.a. value, in Munsell’s terminology) is the most salient color attribute in graphic design. This is based on the architecture of human vision. When light comes into the retina, it is measured by three different types of detectors called cone cells (“long” L, “medium” M, and “short” S). But the independent signals from these cone cells are not directly passed to the visual cortex. Instead, at the first layer of processing, the cone cell responses are combined into 3 different signals, a brightness response (L + M), and two color difference signals, yellow–blue (L + M – S) and red–green (L – M). The brightness signal has the finest resolution, and is used for detection of edges, textures, fine details, motion, depth, and so on. The color difference signals are layered on top of that. “Lightness” or “value” is a perceived attribute of surface color based on the brightness response. (Caveat: this is a pretty simplified description.) Almost any color scheme you choose which has enough lightness contrast will tend to look okay, especially if you avoid picking colors which are outrageously colorful. On the other hand, categorically, any color scheme you choose which does not have enough lightness contrast will look bad (will look muddy or clashing, text will be illegible, etc.). Any color guide which doesn’t start with a discussion of lightness contrast is in my opinion doing a disservice to its readers. Unfortunately, the “L” in HSL and the “V” in HSV are not remotely close to real measures of perceived lightness (value). You need to go to a different color model. The most established choice is CIELAB, from the mid-1970s, supported in a wide variety of software.
    - Coincoin 10y ago
      What fascinates me about human color perception is our brain actually interpret everything as a mix of the four colors you mentioned: red, green, blue and yellow; the opposites of the two color axes. It's why it seems so weird at first that yellow is a mix of green and red while our brain perceive it as a totally different color; it is a color of its own in our brain.
BadassFractal 10y ago
Do you guys know of any solid guides on how to use and mix and match colors in photography and video making to evoke certain specific emotions? It's easy to find materials on entry level color theory "here are complementary colors, here is a triad etc" but I haven't been able to find a good resource on how to use those coloring choices to influence viewer reactions. Seems like something everybody in the visual arts eventually has to master but also seems very undocumented, like a black art.
- jacobolus 10y ago
  The links between colors and emotions are (at least somewhat) culturally specific and subjective. There have been some efforts to classify specific cultures’ associations and preferences which you can find in a search of the academic literature. It’s hard to find much rigorous material on the subject though. You can of course also find many artists and art teachers with grandiose personal theories about the subject. My recommendation is to just put the time and work into learning your own personal preferences, by doing your own color exercises. For some design-y ideas about exercises to try see e.g. Josef Albers’s book. For photography, the best training IMO is to just make and look at lots of pictures.
- theoh 10y ago
  I'm in the field (recent MA in art). Colour theory, beyond the important concept of complementaries, is very unscientific. I'm not aware of any credible, rigorous scientific findings about colour and emotion that are actually used by artists. (I'm not saying that no credible research will ever exist: see links here https://designshack.net/articles/graphics/the-science-behind-color-and-emotion/ https://designshack.net/articles/graphics/the-science-behind... ) Painters (etc.) choose and apply colour in an intuitive way. Some artists are known as "colourists" for their skill in orchestrating colour effects. The way to learn is to look at that kind of work and absorb the aesthetic.
  - BadassFractal 10y ago
    That's been my experience as well when trying to learn from artists who do this. As you said, they most often will simply follow their intuition built over many years of trying different things and learning what seems to cause what kind of result. It'd certainly be neat to shortcut that process, I don't think there's anything magical about it, it's just that people have likely never had to bother.
Razengan 10y ago
I really wish color-related talks and tools would upgrade to wider-than-sRGB color gamuts, now that many modern devices can display them.
- cmurf 10y ago
  The problem is there's divergence from sRGB, and as yet no convergence on a new single standard. So all image content is rendered to sRGB still. Further, there's substantial inconsistency in various tools when it comes to compensation for the difference in color encoding between the image file, and the display. The technology to do this compensation is old, but it's weakly implemented on mobile outside of web browsers on the client side. And only major apps honor and preserve this color encoding metadata. So the state with color management on mobile is approximately where color management was on the desktop about 15-20 years ago.
  - Razengan 10y ago
    Apple have made good progress on this. All of their devices (iPhones, iPads and Macs, with the last iMac having a 10-bits-per-channel screen) are now capable of accurately displaying DCI-P3, and their software supports it very well [1][2]. Other companies are also expanding outside sRGB, with Samsung's new phones, the Surface Studio from Microsoft, and Razer's Blade [Pro] also supporting wide color gamuts, although the last time I checked Windows and Android didn't seem to be as color-aware as macOS and iOS. [1] https://webkit.org/blog/6682/improving-color-on-the-web/ https://webkit.org/blog/6682/improving-color-on-the-web/ [2] https://developer.apple.com/videos/play/wwdc2016/712/ https://developer.apple.com/videos/play/wwdc2016/712/ To me seeing sRGB now feels like looking at EGA after VGA was invented; the phase where the tech is available but waiting for the content supply to catch up.
    - cmurf 10y ago
      This makes the problem worse. There's 20 years of legacy sRGB images that will not display correctly on wide gamut displays without display compensation in software. iOS and Android are basically repeating all the mistakes made in color management on the desktop, by allowing opt outs by apps and not taking a holistic color management approach. And where the content is created, on the desktop, again if you're using any sort of specialized tool there is a high likelihood the color space information is being ignored or is even stripped out of the image - making it impossible to render correctly downstream. Changing image encoding from sRGB is change for the sake of change - the vast majority of real world image content fits in sRGB.
justinpombrio 10y ago
If you want to do something meaningful with colors, don't use RGB, and don't use HSL (which is based on RGB). These spaces are problematic. For instance, pure blue and pure green in RGB space have very different lightness. Here's a picture of the region of colors covered by RGB: https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-in-cielab.png https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-i... If RGB space corresponded to what our eyes saw, that would be a perfect hexagon. It isn't. It's warped, and the warping isn't subtle. Use CIELAB. CIELAB is designed to match what our eyes see. https://en.wikipedia.org/wiki/Lab_color_space https://en.wikipedia.org/wiki/Lab_color_space In a little more detail, distances in the CIELAB colorspace approximate perceptual distance (how different two colors look). Distances in the RGB colorspace do not.
- bluetwo 10y ago
  RGB and HSL are related, but I wouldn't say HSL is based on RGB. From a design point-of-view RGB actually has some problems, as it is difficult to manipulate in a reliable manner. However, from a data point-of-view if is useful because it can scale up or down depending on how much room you have to store information. Also, it relates to the way TV and many video standards transmit information. In HSL, you have saturation and brighness, which can scale nicely depending on how much information you have, but hue is a a position on a circle, which is a different type of measurement. Also, how exactly is lab color useful in web programming? How do you support it in CSS or HTML?
  - jacobolus 10y ago
    “HSL” is a trivial transformation of RGB. It’s what you get when you prop an RGB cube up on one corner, squish 6 of the other corners into the same plane, and then inflate it until it fills a cylinder shape. (Note that none of these steps make any reference to human perception.) Here’s my 2010 diagram showing that visually https://en.wikipedia.org/wiki/File:Hsl-and-hsv.svg https://en.wikipedia.org/wiki/File:Hsl-and-hsv.svg > Also, how exactly is lab color useful in web programming? How do you support it in CSS or HTML? Implementing CIELAB in Javascript is straightforward. https://github.com/jrus/chromatist/blob/master/src/cielab.coffee https://github.com/jrus/chromatist/blob/master/src/cielab.co... You could alternately use a model like CIECAM02, but that gets a whole lot more complicated. https://github.com/jrus/chromatist/blob/master/src/ciecam.coffee https://github.com/jrus/chromatist/blob/master/src/ciecam.co...
deleted 10y ago
[deleted]
b3rry 10y ago
This is pretty flawed. First off, never, ever use complementary colors as the foundation for your design. A red green color scheme (for example) will produce a result that "vibrates." Open your image editor of choice and look at green text (#00FF00) on a red background (#FF0000). Illegible. Painful to the eye. Don't do it. Read more here: https://webdesign.tutsplus.com/articles/why-you-should-avoid-vibrating-color-combinations--cms-25621 https://webdesign.tutsplus.com/articles/why-you-should-avoid... Secondly, rotating around HSL will not produce true complementary colors. Quick: what are the primary colors? Red, Yellow, and Blue. Here is where the problem lies; In an HSL rotation the primaries occupy the following H values: red (0°), yellow (60°), and blue (240°). These colors are not equidistant. The opposite of red SHOULD be pure green, yet 0°+(360/2)=180° which is #00FFFF (blue-green). The opposite of yellow SHOULD be pure purple, yet 60°+(360/2)=240° which is #0000FF (pure blue). Which means... you guessed it: the opposite of blue SHOULD be orange, but (240°+(360/2))%360)=60° which is #FFFF00 (yellow). This is because color theory is based on pigmented color. ALL of the most common color models used are equidistant between the Red Green Blue values when rotated, instead of the Red Yellow Blue values. No calculation will produce harmonious color schemes. Color theory, like any "creative" skill, is something you can hone through practice and experimentation. There is no formulaic solution. Tl;dr: light and pigment do not have the same "primary" colors. Color theory is based on pigmented colors. RGB, HSB/HSL, etc do not allow for equal transformations between RYB, so you cannot use them to calculate accurate complements.
- scribu 10y ago
  > First off, never, ever use complementary colors as the foundation for your design. A red green color scheme (for example) will produce a result that "vibrates." That's an interesting effect, but I don't see it in the final website layout produced by the tutorial, because neutral colours are introduced between the two complementary colours. So, I don't see how this example supports your assertion against using complementary colours as a starting point.
  - b3rry 10y ago
    To clarify: As a foundation… not a starting point. You're more than welcome to begin with complementary colors, but they should not be the foundation of your final system. Properly segmenting complementary colors of a similar lightness works to reduce this effect, but you are now imposing artificial constraints on your design system: you have to intentionally isolate your colors from one another in order to prevent this from happening. This is less than ideal when trying to create a flexible system of color. When codifying these relationships, you run the risk of improper use, especially if you have multiple developers designing views from this system. One solution, if you must maintain a complementary color scheme is to vary the lightness of a color (as Shelburne's side begins to do): "The conditions for these varying effects occur between colors which are contrasting in their hues but also close or similar in light intensity. […] This initially exciting effect also feels aggressive and often even uncomfortable to our eyes. One finds it is rarely used except for a screaming effect in advertising, and as a result it is unpleasant, disliked, and avoided" -Josef Albers, Interaction of Color: XXII Vibrating boundaries — enforced contours Probably not the best idea to use a scheme that one of the most pre-eminent color theorists describes as “unpleasant, disliked, and avoided.” Shelburne's site goes on to lessen this effect by introducing desaturated values, however the site fails to explain that these shades and tint shifts are just one option when it comes to avoiding this vibrating effect; instead it's solely attributed to the desaturation of these hues. There are many color schemes that mix high-vibrancy colors, and do so by avoiding complements.
kybernetyk 10y ago
That's really handy (especially for someone who's as aesthetically challenged as me) - but it would be nice what mix() actually does/means. I mean it seems to be a handy sass built-in(?) but it would be nice for us who are not webdevs to know how to manually "mix" HSL colors to get the same results.
- abarrett 10y ago
  It's a linear interpolation of RGB values. I'm sure it could be improved on. http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method http://sass-lang.com/documentation/Sass/Script/Functions.htm...
simooooo 10y ago
hmmm I don't like any of the colour examples on this site. Just go to dribbble.com and see what you can see there, many interesting colour themes
k__ 10y ago
What helped me greatly was using HSL instead of RGB/Hex. Get a base color you like and simply change saturation and lightness to get all your other colors.
737013 10y ago
What I found really useful about this was how the presentation laid it out in a way where I could really understand it. For the first time, I got a simple set of concepts behind choosing colors. Without going back to the article, just what I remembered: 1) Choose complements. 2) Mix them with each other until they dull down a bit 3) Make some other neutral color ( possibly by mixing them in equal parts ? ) and then you have 3 colors, and you've got a basis. ( OK -- just considering is there any connection between color theory and the basis of a vector field? ) So what I liked about this was it taught me something I didn't know. I accept there are a lot of comments by experts on here about how this simplified presentation is wrong in such and such a way. I don't think that decreases its utility for me. To a novice, just having something tangible to understand is the first step. I understand how to experts, it seems like the wrong advice. But I felt I understood it, and that's invaluable. If you don't know what I mean by this, maybe it's better explained by something a professor said to me in grad school, "The trick to teaching is to trick people into thinking they understand it. Don't show them all the complexity. Show them a simplified model. Let them come to it in stages." I think that's true. It stuck with me and it seems true. It also matches what I see my science education was like looking back -- a presentation of a series of models, over a number of years, that gradually layered in more and more complexity, but at a pace that was comfortable. This "chain of models" mostly agreed with each other, but the points where they contradicted each other didn't to my memory negatively impact learning, instead they served as signposts that made each model more distinct and aided in remembering them. Also, there is this great feeling of being able to say, "Yes from the perspective of model X that is true, but when you factor in what model Y says, you get a different picture. Here, let me show you." That always sounds like a true expert. I like that and it also seems like having a bunch of models, not all in perfect agreement, in fact strengthened by the points where they do differ, gives overall a far richer picture of the topic. The strongest idea that stayed with me from my science education was that "everything is a model" and "none of them are true" but some of them are useful. Different models, with different levels of faithfulness to evidence. My main critique of what I will label the "dismissive expert answers" is that they posit a inflexible model of the "absolute truth", which, I say is, given by itself: not that useful ( at least to learn the topic ), and not really true ( because well, no model can be ). I am sorry if this length comment is more suited as a blog post. Maybe I should just make blog posts instead of comments and link to the article. Maybe that's better than anyone. I'm not trying to offend any experts or do anything ego based, just push back against the what I feel were dismissive answers that missed another side of the value of this article. I wanted to share what I thought that other side of the value of this article was. It does seem like a highly personal comment, just from my point of view. I hope it's been useful to some others to read it!
spoiler 10y ago
She makes excellent points in the text, but then uses less-than-optimal colours to back up her points. There is also much, much more to colour theory than what is outlined in this nice example. And as others pointed out HSL/RGB are not the best (or easiest) to do heavy colour-theory based deesigns. If you're serious about colour theory in design, use CIE Lab* or Munsell
gibbitz 10y ago
Finally put this "out there". Nice to see it on HN, says the guy from the meetup who can mix Hex colors in his head.

491 points by donnemartin 10y ago

Ugh. This is well meaning, but because based on a color model with a very tenuous relation to human color perception, with further decisions built on loose heuristics without rigorous support (and apparently ported from paint mixing advice), the choices made are pretty arbitrary, yielding poor results. This part in particular ... > Pick any color by selecting its hue (0-360) on the color wheel at full saturation (100%) and at half lightness (50%) - this way you start with the 'most colorful color' you can get. ¶ Generate your second color without having to guess what will work. Thanks to science and wavelengths, we know that this works. The opposition of these two colors stimulate your photoreceptor cells in a good way! ... ends up being poor advice in general, “science and wavelengths” notwithstanding. Any pair of decently separated hues will do just as well as a pair of HSL “complements”, as long as the chroma and lightness are carefully chosen. If you take this specific advice and just rotate the hue around in HSL space, all of the perceptual color relationships will swing wildly. Someone following this program who has a lot of experience with visual art / design will end up making reasonable choices based on intuition and past experience, but that will be in spite of this guide, not because of it. Sorry to be harsh, but in my opinion non-experts will get better results than this blog post’s recommendations by just choosing perceptual lightness (e.g. in CIELAB space) of each color to have sufficient contrast, and then picking the hue/chroma entirely at random, or using any other desired criteria. Here’s what Cynthia Brewer, expert in color choices for maps and diagrams, had to say about models like HSL and HSV: > Computer science offers a few poorer cousins to these perceptual spaces that may also turn up in your software interface, such as HSV and HLS. They are easy mathematical transformations of RGB, and they seem to be perceptual systems because they make use of the hue–lightness/value–saturation terminology. But take a close look; don’t be fooled. Perceptual color dimensions are poorly scaled by the color specifications that are provided in these and some other systems. For example, saturation and lightness are confounded, so a saturation scale may also contain a wide range of lightnesses (for example, it may progress from white to green which is a combination of both lightness and saturation). Likewise, hue and lightness are confounded so, for example, a saturated yellow and saturated blue may be designated as the same ‘lightness’ but have wide differences in perceived lightness. These flaws make the systems difficult to use to control the look of a color scheme in a systematic manner. If much tweaking is required to achieve the desired effect, the system offers little benefit over grappling with raw specifications in RGB or CMY. http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html If anyone is looking for a better resource, the best one I know of on the web is http://www.handprint.com/LS/CVS/color.html http://www.handprint.com/LS/CVS/color.html. Otherwise, I recommend going straight to books. There are a variety of available books at every level of technical detail.

scribu 10y ago
Someone making a color scheme for a chart needs to be very rigorous indeed, because color is actually how the data is represented, in some cases. The tutorial seems to be aimed at front-end developers that want to put together a color scheme for a website. In this case, color is more like decoration, so it doesn't need to be as rigorous, IMHO.
- jacobolus 10y ago
  My basic claim is that contrast in perceived lightness (a.k.a. value, in Munsell’s terminology) is the most salient color attribute in graphic design. This is based on the architecture of human vision. When light comes into the retina, it is measured by three different types of detectors called cone cells (“long” L, “medium” M, and “short” S). But the independent signals from these cone cells are not directly passed to the visual cortex. Instead, at the first layer of processing, the cone cell responses are combined into 3 different signals, a brightness response (L + M), and two color difference signals, yellow–blue (L + M – S) and red–green (L – M). The brightness signal has the finest resolution, and is used for detection of edges, textures, fine details, motion, depth, and so on. The color difference signals are layered on top of that. “Lightness” or “value” is a perceived attribute of surface color based on the brightness response. (Caveat: this is a pretty simplified description.) Almost any color scheme you choose which has enough lightness contrast will tend to look okay, especially if you avoid picking colors which are outrageously colorful. On the other hand, categorically, any color scheme you choose which does not have enough lightness contrast will look bad (will look muddy or clashing, text will be illegible, etc.). Any color guide which doesn’t start with a discussion of lightness contrast is in my opinion doing a disservice to its readers. Unfortunately, the “L” in HSL and the “V” in HSV are not remotely close to real measures of perceived lightness (value). You need to go to a different color model. The most established choice is CIELAB, from the mid-1970s, supported in a wide variety of software.
  - Coincoin 10y ago
    What fascinates me about human color perception is our brain actually interpret everything as a mix of the four colors you mentioned: red, green, blue and yellow; the opposites of the two color axes. It's why it seems so weird at first that yellow is a mix of green and red while our brain perceive it as a totally different color; it is a color of its own in our brain.

BadassFractal 10y ago

Do you guys know of any solid guides on how to use and mix and match colors in photography and video making to evoke certain specific emotions? It's easy to find materials on entry level color theory "here are complementary colors, here is a triad etc" but I haven't been able to find a good resource on how to use those coloring choices to influence viewer reactions. Seems like something everybody in the visual arts eventually has to master but also seems very undocumented, like a black art.

jacobolus 10y ago
The links between colors and emotions are (at least somewhat) culturally specific and subjective. There have been some efforts to classify specific cultures’ associations and preferences which you can find in a search of the academic literature. It’s hard to find much rigorous material on the subject though. You can of course also find many artists and art teachers with grandiose personal theories about the subject. My recommendation is to just put the time and work into learning your own personal preferences, by doing your own color exercises. For some design-y ideas about exercises to try see e.g. Josef Albers’s book. For photography, the best training IMO is to just make and look at lots of pictures.
theoh 10y ago
I'm in the field (recent MA in art). Colour theory, beyond the important concept of complementaries, is very unscientific. I'm not aware of any credible, rigorous scientific findings about colour and emotion that are actually used by artists. (I'm not saying that no credible research will ever exist: see links here https://designshack.net/articles/graphics/the-science-behind-color-and-emotion/ https://designshack.net/articles/graphics/the-science-behind... ) Painters (etc.) choose and apply colour in an intuitive way. Some artists are known as "colourists" for their skill in orchestrating colour effects. The way to learn is to look at that kind of work and absorb the aesthetic.
- BadassFractal 10y ago
  That's been my experience as well when trying to learn from artists who do this. As you said, they most often will simply follow their intuition built over many years of trying different things and learning what seems to cause what kind of result. It'd certainly be neat to shortcut that process, I don't think there's anything magical about it, it's just that people have likely never had to bother.

Razengan 10y ago

I really wish color-related talks and tools would upgrade to wider-than-sRGB color gamuts, now that many modern devices can display them.

cmurf 10y ago
The problem is there's divergence from sRGB, and as yet no convergence on a new single standard. So all image content is rendered to sRGB still. Further, there's substantial inconsistency in various tools when it comes to compensation for the difference in color encoding between the image file, and the display. The technology to do this compensation is old, but it's weakly implemented on mobile outside of web browsers on the client side. And only major apps honor and preserve this color encoding metadata. So the state with color management on mobile is approximately where color management was on the desktop about 15-20 years ago.
- Razengan 10y ago
  Apple have made good progress on this. All of their devices (iPhones, iPads and Macs, with the last iMac having a 10-bits-per-channel screen) are now capable of accurately displaying DCI-P3, and their software supports it very well [1][2]. Other companies are also expanding outside sRGB, with Samsung's new phones, the Surface Studio from Microsoft, and Razer's Blade [Pro] also supporting wide color gamuts, although the last time I checked Windows and Android didn't seem to be as color-aware as macOS and iOS. [1] https://webkit.org/blog/6682/improving-color-on-the-web/ https://webkit.org/blog/6682/improving-color-on-the-web/ [2] https://developer.apple.com/videos/play/wwdc2016/712/ https://developer.apple.com/videos/play/wwdc2016/712/ To me seeing sRGB now feels like looking at EGA after VGA was invented; the phase where the tech is available but waiting for the content supply to catch up.
  - cmurf 10y ago
    This makes the problem worse. There's 20 years of legacy sRGB images that will not display correctly on wide gamut displays without display compensation in software. iOS and Android are basically repeating all the mistakes made in color management on the desktop, by allowing opt outs by apps and not taking a holistic color management approach. And where the content is created, on the desktop, again if you're using any sort of specialized tool there is a high likelihood the color space information is being ignored or is even stripped out of the image - making it impossible to render correctly downstream. Changing image encoding from sRGB is change for the sake of change - the vast majority of real world image content fits in sRGB.

justinpombrio 10y ago

If you want to do something meaningful with colors, don't use RGB, and don't use HSL (which is based on RGB). These spaces are problematic. For instance, pure blue and pure green in RGB space have very different lightness. Here's a picture of the region of colors covered by RGB: https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-in-cielab.png https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-i... If RGB space corresponded to what our eyes saw, that would be a perfect hexagon. It isn't. It's warped, and the warping isn't subtle. Use CIELAB. CIELAB is designed to match what our eyes see. https://en.wikipedia.org/wiki/Lab_color_space https://en.wikipedia.org/wiki/Lab_color_space In a little more detail, distances in the CIELAB colorspace approximate perceptual distance (how different two colors look). Distances in the RGB colorspace do not.

bluetwo 10y ago
RGB and HSL are related, but I wouldn't say HSL is based on RGB. From a design point-of-view RGB actually has some problems, as it is difficult to manipulate in a reliable manner. However, from a data point-of-view if is useful because it can scale up or down depending on how much room you have to store information. Also, it relates to the way TV and many video standards transmit information. In HSL, you have saturation and brighness, which can scale nicely depending on how much information you have, but hue is a a position on a circle, which is a different type of measurement. Also, how exactly is lab color useful in web programming? How do you support it in CSS or HTML?
- jacobolus 10y ago
  “HSL” is a trivial transformation of RGB. It’s what you get when you prop an RGB cube up on one corner, squish 6 of the other corners into the same plane, and then inflate it until it fills a cylinder shape. (Note that none of these steps make any reference to human perception.) Here’s my 2010 diagram showing that visually https://en.wikipedia.org/wiki/File:Hsl-and-hsv.svg https://en.wikipedia.org/wiki/File:Hsl-and-hsv.svg > Also, how exactly is lab color useful in web programming? How do you support it in CSS or HTML? Implementing CIELAB in Javascript is straightforward. https://github.com/jrus/chromatist/blob/master/src/cielab.coffee https://github.com/jrus/chromatist/blob/master/src/cielab.co... You could alternately use a model like CIECAM02, but that gets a whole lot more complicated. https://github.com/jrus/chromatist/blob/master/src/ciecam.coffee https://github.com/jrus/chromatist/blob/master/src/ciecam.co...

deleted 10y ago

[deleted]

b3rry 10y ago

This is pretty flawed. First off, never, ever use complementary colors as the foundation for your design. A red green color scheme (for example) will produce a result that "vibrates." Open your image editor of choice and look at green text (#00FF00) on a red background (#FF0000). Illegible. Painful to the eye. Don't do it. Read more here: https://webdesign.tutsplus.com/articles/why-you-should-avoid-vibrating-color-combinations--cms-25621 https://webdesign.tutsplus.com/articles/why-you-should-avoid... Secondly, rotating around HSL will not produce true complementary colors. Quick: what are the primary colors? Red, Yellow, and Blue. Here is where the problem lies; In an HSL rotation the primaries occupy the following H values: red (0°), yellow (60°), and blue (240°). These colors are not equidistant. The opposite of red SHOULD be pure green, yet 0°+(360/2)=180° which is #00FFFF (blue-green). The opposite of yellow SHOULD be pure purple, yet 60°+(360/2)=240° which is #0000FF (pure blue). Which means... you guessed it: the opposite of blue SHOULD be orange, but (240°+(360/2))%360)=60° which is #FFFF00 (yellow). This is because color theory is based on pigmented color. ALL of the most common color models used are equidistant between the Red Green Blue values when rotated, instead of the Red Yellow Blue values. No calculation will produce harmonious color schemes. Color theory, like any "creative" skill, is something you can hone through practice and experimentation. There is no formulaic solution. Tl;dr: light and pigment do not have the same "primary" colors. Color theory is based on pigmented colors. RGB, HSB/HSL, etc do not allow for equal transformations between RYB, so you cannot use them to calculate accurate complements.

scribu 10y ago
> First off, never, ever use complementary colors as the foundation for your design. A red green color scheme (for example) will produce a result that "vibrates." That's an interesting effect, but I don't see it in the final website layout produced by the tutorial, because neutral colours are introduced between the two complementary colours. So, I don't see how this example supports your assertion against using complementary colours as a starting point.
- b3rry 10y ago
  To clarify: As a foundation… not a starting point. You're more than welcome to begin with complementary colors, but they should not be the foundation of your final system. Properly segmenting complementary colors of a similar lightness works to reduce this effect, but you are now imposing artificial constraints on your design system: you have to intentionally isolate your colors from one another in order to prevent this from happening. This is less than ideal when trying to create a flexible system of color. When codifying these relationships, you run the risk of improper use, especially if you have multiple developers designing views from this system. One solution, if you must maintain a complementary color scheme is to vary the lightness of a color (as Shelburne's side begins to do): "The conditions for these varying effects occur between colors which are contrasting in their hues but also close or similar in light intensity. […] This initially exciting effect also feels aggressive and often even uncomfortable to our eyes. One finds it is rarely used except for a screaming effect in advertising, and as a result it is unpleasant, disliked, and avoided" -Josef Albers, Interaction of Color: XXII Vibrating boundaries — enforced contours Probably not the best idea to use a scheme that one of the most pre-eminent color theorists describes as “unpleasant, disliked, and avoided.” Shelburne's site goes on to lessen this effect by introducing desaturated values, however the site fails to explain that these shades and tint shifts are just one option when it comes to avoiding this vibrating effect; instead it's solely attributed to the desaturation of these hues. There are many color schemes that mix high-vibrancy colors, and do so by avoiding complements.

kybernetyk 10y ago

That's really handy (especially for someone who's as aesthetically challenged as me) - but it would be nice what mix() actually does/means. I mean it seems to be a handy sass built-in(?) but it would be nice for us who are not webdevs to know how to manually "mix" HSL colors to get the same results.

abarrett 10y ago
It's a linear interpolation of RGB values. I'm sure it could be improved on. http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method http://sass-lang.com/documentation/Sass/Script/Functions.htm...

simooooo 10y ago

hmmm I don't like any of the colour examples on this site. Just go to dribbble.com and see what you can see there, many interesting colour themes

k__ 10y ago

What helped me greatly was using HSL instead of RGB/Hex. Get a base color you like and simply change saturation and lightness to get all your other colors.

737013 10y ago

What I found really useful about this was how the presentation laid it out in a way where I could really understand it. For the first time, I got a simple set of concepts behind choosing colors. Without going back to the article, just what I remembered: 1) Choose complements. 2) Mix them with each other until they dull down a bit 3) Make some other neutral color ( possibly by mixing them in equal parts ? ) and then you have 3 colors, and you've got a basis. ( OK -- just considering is there any connection between color theory and the basis of a vector field? ) So what I liked about this was it taught me something I didn't know. I accept there are a lot of comments by experts on here about how this simplified presentation is wrong in such and such a way. I don't think that decreases its utility for me. To a novice, just having something tangible to understand is the first step. I understand how to experts, it seems like the wrong advice. But I felt I understood it, and that's invaluable. If you don't know what I mean by this, maybe it's better explained by something a professor said to me in grad school, "The trick to teaching is to trick people into thinking they understand it. Don't show them all the complexity. Show them a simplified model. Let them come to it in stages." I think that's true. It stuck with me and it seems true. It also matches what I see my science education was like looking back -- a presentation of a series of models, over a number of years, that gradually layered in more and more complexity, but at a pace that was comfortable. This "chain of models" mostly agreed with each other, but the points where they contradicted each other didn't to my memory negatively impact learning, instead they served as signposts that made each model more distinct and aided in remembering them. Also, there is this great feeling of being able to say, "Yes from the perspective of model X that is true, but when you factor in what model Y says, you get a different picture. Here, let me show you." That always sounds like a true expert. I like that and it also seems like having a bunch of models, not all in perfect agreement, in fact strengthened by the points where they do differ, gives overall a far richer picture of the topic. The strongest idea that stayed with me from my science education was that "everything is a model" and "none of them are true" but some of them are useful. Different models, with different levels of faithfulness to evidence. My main critique of what I will label the "dismissive expert answers" is that they posit a inflexible model of the "absolute truth", which, I say is, given by itself: not that useful ( at least to learn the topic ), and not really true ( because well, no model can be ). I am sorry if this length comment is more suited as a blog post. Maybe I should just make blog posts instead of comments and link to the article. Maybe that's better than anyone. I'm not trying to offend any experts or do anything ego based, just push back against the what I feel were dismissive answers that missed another side of the value of this article. I wanted to share what I thought that other side of the value of this article was. It does seem like a highly personal comment, just from my point of view. I hope it's been useful to some others to read it!

spoiler 10y ago

She makes excellent points in the text, but then uses less-than-optimal colours to back up her points. There is also much, much more to colour theory than what is outlined in this nice example. And as others pointed out HSL/RGB are not the best (or easiest) to do heavy colour-theory based deesigns. If you're serious about colour theory in design, use CIE Lab* or Munsell

gibbitz 10y ago

Finally put this "out there". Nice to see it on HN, says the guy from the meetup who can mix Hex colors in his head.