Practical Color Theory for People Who Code (2016)

(tallys.github.io)

199 points | by martinlaz 7 days ago

9 comments

  • Daub 6 days ago
    This site assumes that for a designer complementary colors are defined as pairwise opposites on the RGB wheel. This is a common mistake.

    Complementary colors have two properties:

    1: Mixed together physically or optically, they produce a neutral. For this the RGB pair sets are the most truthful.

    2. Incorporated into the same design, they present as 'perceptually opposite'. For this the RYB pair sets are the most truthful.

    1. Is easy to prove (Muncell for physical mixing or Maxwell for optical mixing). 2 is not yet proven, but my own work certainly supports it (*informal tests on large groups of art students).

    The genealogy of RYB complementary colors goes back to before Leonardo DaVinci's, who defined these pair sets as retto contrario (literally ‘exactly opposite’).

    http://www.treatiseonpainting.org/cocoon/leonardo/chap_one/v...

    • There's also a model of 'psychological primaries' under which the complements are Red/Green and Yellow/Blue.

      https://en.wikipedia.org/wiki/Primary_color#Psychological_pr...

      • Daub 6 days ago
        Primaries are only tangently related to complementary colors. Sure, it is commonly said that every RYB complementary pair is also a primary/secondary pair.

        But complicating this is that primaries can be defined in many ways.

        Any primary set expresses indivisibility. The psychological primaries set is: black, white, red, green, yellow, blue. To me this seems wonderfully commonsensical. No matter that in RYB space, black can be expressed as a mix of red, yellow and blue in equal proportion. For me, black is black. Full stop. However, these primaries have limited utility in design.

        The RYB primaries started life exactly as utilitarian tools for painters. From this set, all other colors can be defined (so long as one had a warm/cool pair of each primary).

        • dfranke 6 days ago
          The CIECAM02 and CAM16 color models include a "hue quadrature" correlate from which "redness/greenness" and "yellowness/blueness" can be calculated. I find changing the hue quadrature by 200 (which flips the signs on the latter two quantities) gives results that match my own perception of "complementary" pretty well.
          • Daub 5 days ago
            I will look into this. Sounds intriguing.
      • eurleif 6 days ago
        Is there any evidence that RYB is more than a historical mistake which our culture has been slow to grow out of? We know now that the correct subtractive primary colors are CMY. Your informal experiments with art students may speak more to how they were (mis)educated than to anything intrinsic about color perception, no?
        • klodolph 6 days ago
          The idea that RYB is somehow a mistake is a difficult one to defend.

          > We know now that the correct subtractive primary colors are CMY.

          It is not that simple. CMY is not "correct" by any sense of the word. Both additive and subtractive color models suffer from the same flaw... you cannot represent all perceptible colors by starting with three colors and mixing them. CMY is simply a choice from one of many possible choices.

          CMY and RGB are both simply convenient choices. By choosing RGB primaries (and there are a lot of different reds, greens, and blues to choose from) you can represent a reasonably large subset of the colors present in the natural world.

          However, if create a monochromatic (narrow band of wavelengths) light source which looks yellow, you won't be able to reproduce that color of yellow by mixing red and green. There are experiments that test exactly this property. RGB is limited.

          In a sense, the choice of red, green, and blue is arbitrary. The primary colors are not derived from some property of physical light, nor are they derived from some truth about human color perception. They do happen to work very well--because the space of colors we can perceive is vaguely triangular.

          There are consumer printers you can buy that go well beyond simply CMY or CMYK color models. Epson sells printers with six colors of ink, not counting black. Commercial printing services also provide "spot" channels for whatever color of ink you are able to source.

          • zokier 6 days ago
            > In a sense, the choice of red, green, and blue is arbitrary. The primary colors are not derived from some property of physical light, nor are they derived from some truth about human color perception.

            What about the cone cell response curves which roughly correspond to r, g, and b? https://commons.m.wikimedia.org/wiki/File:Cones_SMJ2_E.svg#m...

            > They do happen to work very well--because the space of colors we can perceive is vaguely triangular.

            That is hardly a coincidence. Our perceived color space is vaguely triangular because we have vaguely three types of cone cells to detect color.

            • klodolph 6 days ago
              > What about the cone cell response curves which roughly correspond to r, g, and b?

              The diagram is misleading because the spectral sensitivity curves are drawn using red, green, and blue colors on the chart. Read the wavelengths on the bottom--they do not roughly correspond to red, green, and blue. This is why they are named L, M, and S instead.

              The peak sensitivities are closer to green, a different green, and violet.

              > That is hardly a coincidence. Our perceived color space is vaguely triangular because we have vaguely three types of cone cells to detect color.

              It's a poor approximation of a triangle. It's more paraboloid.

              It would be a triangle if there were no overlap between the spectral sensitivity of different receptors. Since there is overlap between the green, other green, and purple receptors, the shape is not a triangle.

              • tobr 6 days ago
                > The peak sensitivities are closer to green, a different green, and violet.

                This is fascinating. My first instinct is to say that the peak of those curves are not as important as where they discriminate best/where they are most different from the other curves - which does seem to give a more clear red, green and blue. But I’m sure it’s not that simple when you take into account how the brain processes these signals.

                Would it be possible to create a good color screen using subpixels emitting light at the peak sensitivity frequencies?

                • klodolph 5 days ago
                  Any three-primary system is going to cover a triangle of colors. RGB primaries cover a fairly large triangle. If you wanted a larger gamut, you might consider switching to four primaries. You can still encode colors using the RGB space and convert to e.g. RGBY in the display or whatever.
                  • zokier 5 days ago
                    I do note that this is a limitation mostly for physical systems/models. For non-physical color spaces you can make a triangular shape cover far more of the human visible gamut by having the primaries be "imaginary", i.e. not real visible colors. ACES AP0 is one great example of that
                    • klodolph 5 days ago
                      Yes, if you had something like a RGBY display, you would probably use a high-gamut RGB space to encode the data and do a transformation prior to display.
                  • kps 6 days ago
                    No, because light at the L (‘red’ cone) peak still stimulates M (‘green’) around 75%, and the brain makes that yellow. To see red, you need a lower frequency that stimulates L twice as much as M.
                  • invincing 6 days ago
                    This is not about peak sensitivities. The RGB colors are used as primaries because they provide a large response on one type of cones, and as small as possible response on the two other types of cones.

                    Blue is chosen to have as small wavelength as possible (S=small) and red is chosen to have as long wavelength as possible (L=long), while both being still in the visible spectrum with large enough response from S and L cones respectively.

                    Since M and L response profiles overlap anyway and just the ratio of the response changes, green is chosen to be as far away from the red, but still outside of the response curve of S cones that get stimulated by blue. This happens to be also around the peak sensitivity for the M cones.

                • invincing 6 days ago
                  CMY/RGB is not an arbitrary choice for color model. It's the best approximation for stimulating the color receptors in the human eye. RYB on the other hand is just historical model that still exists because traditions in the art teaching change slowly.

                  It's a wrong notion of primary colors that one could choose any three colors for primaries. Yes, it's possible to choose any three colors and mix a set of other colors within the triangle defined by these three. However, by definition a primary color is a color that can't be mixed from any other colors. Cyan, magenta and yellow are such colors. It's not possible to mix cyan or magenta from the RYB palette, on the other hand red can be mixed from magenta and yellow, and blue can be mixed from cyan and magenta.

                  The reason why RGB/CMY are the primaries is exactly because of the stimulus response of the human eye. The purpose of color reproduction is to cause a specific response in the three receptors in the eye. Since there are only three different kinds of receptors, it's possible to produce the exact same response in the receptors in multiple ways (thus we have metamerism). RGB primaries are chosen because each of the primary colors causes a large response in one type of receptors and as small response as possible on the other two receptors. (And CMY is then the opposite of this by causing as large response as possible on two receptors, and as small as possible on one.)

                  The reason why the traditional RYB palette has two versions of each of its "primaries" is because RYB "primaries" are so bad at covering the visible color gamut that by introducing two versions of each color it's possible to expand the triangle from which to mix into a hexagon.

                  The exact wavelength profiles for R, G and B may vary between different display technologies, and some technologies can represent the color better than others. This doesn't mean that the RGB model is arbitrary in any way, but that there are just practical reasons why the theoretical optimum is not always reachable. Some of the standards for RGB reproduction take this into account and define a color space that follows the common technologies rather than the theoretical optimum, and thus have a limited gamut.

                  Color printers with more than 4 inks don't abandon CMYK model. I have a large-format printer that in addition to basic CMYK has gray, light cyan, light magenta and light yellow inks. The purpose of these lighter shades is to allow printing light areas with less visible dot raster. The color model is still CMYK.

                  Some printers also include red, green and blue. These exist basically for the same reason there's black in CMYK. Even if CMY is theoretically correct model for wavelength response to match the human eye, there are real-world limits to ink and paper technology; for instance 100% fill of all CMY is not as black as 100% fill of black.

                  Purpose of spot colors is not related to color model, but color reproduction. If you define your spot colors by Pantone number, there's a guarantee that the color will match exactly what you ordered. It's much harder to get exact color reproduction with CMYK process, because the number of variables affecting the end result is so high. Another purpose for spot colors is all kinds of specialty inks like metallic colors etc. Sometimes it's also a cost issue, because it can be cheaper to use black + one accent spot color than a full CMYK process, or a quality issue, because with spot colors you don't get the color raster.

                • Daub 6 days ago
                  A good question.

                  The disputable value is 'maximum possible perceptual hue difference'.

                  In color science, difference is usually understood in terms of 'minimum possible'. This is how the god-like Albert Munsell first mapped the perceptual color domain. Maximum possible has almost no presence in color science literature. I assume that this is because of the asymmetry of perceptual maximum/perceptual minimum.

                  Without solid empirical data, I can only support the validity of RYB pairs by pointing out that Leonardo (and everyone else who wrote about color prior to Newton), supported this pairing without knowing the relative position of these pairs on any color wheel. A weak argument, perhaps.

                  I know it is possible to design an experiment to prove/disprove the validity of RYB complementaries. It was on our to-do list before our computational aesthetics project ran out of money. However, I shall continue to assume its truth. My reason is simple: from a life time as a painter I know that RYB complementary pairs are true. An even weaker argument.

                  • tobr 6 days ago
                    Our understanding and interpretation of colors are very much shaped by the culture, such as which words we have to describe colors. So can you really say that it would amount to miseducation, just because it doesn’t fit color perception perfectly?
                • PebblesRox 6 days ago
                  I think this article is a lot more practical: https://learnui.design/blog/color-in-ui-design-a-practical-f...

                  Eric Kennedy does a great job of giving me rules-of-thumb to work with so that I don't feel like I'm just making arbitrary adjustments to numbers.

                  And I think the examples he provides look a lot better than the result of the original tutorial above.

                  • cjohnson318 5 days ago
                    I'm a painter and I learned a lot from this. (Granted, knowing how color theory works on paper doesn't get you very far in CSS.)
                  • null_object 6 days ago
                    I think this guide falls into the trap described in this article:

                    https://refactoringui.com/previews/building-your-color-palet...

                    where the mathematical model gives us colors that we should believe are harmonious, but which actually lead to clashing primaries, and a chaotic-looking interface.

                    The RefactoringUI book (from which the preview above is an extract) gives a much more useful model to work with, when creating a palette that helps the end-user by establishing a clear and harmonious hierarchy of visual information.

                    • klodolph 6 days ago
                      Why do all these color theory sites generate a complementary color just by flipping the hue 180°? I feel like the reason we do that is just because the math is easy, not because these color combinations look good.
                      • covidthrow 6 days ago
                        Flipping the hue 180 degrees is "correct". The problem is that they typically use HSV which is based on sRGB and thusly results in incorrect complementaries. The mathematics of harmonious color are fairly well understood, but they do not align with sRGB's encoding, so the math is effectively broken.

                        sRGB is a non-linear color space that's designed to encode color information for display on CRT monitors and enable low quantization of dark shades. It's not designed to be worked within.

                        sRGB is an "output referred" color space, which means it was specifically to display color. A "scene referred" color space is designed for manipulation of colors within the image.

                        Lab is a wonderful scene referred color space, but suffers from mathematical complexities that disables simple mathematical operations. The reason is that shifting a hue, for example, may describe a color that simply does not exist. (Think of it as divide by zero, but for colors.)

                        Then there are "perceptual" color spaces. Those are designed to enable simple mathematic relationships to produce color relationships that mirror our perception and expectations.

                        Oklab is one such color space that produces wonderful and quite harmonious color relationships:

                        https://raphlinus.github.io/color/2021/01/18/oklab-critique....

                        • klodolph 6 days ago
                          > Flipping the hue 180 degrees is "correct".

                          I assume that you're putting "correct" in quotes because you disagree with the idea that this is correct.

                          > The mathematics of harmonious color are fairly well understood...

                          Disagree. Human perception of color is highly nonlinear and we are constantly inventing new color spaces as tools to understand human color perception. These color spaces all have various tradeoffs and limitations. While useful, it's clear that our understanding is very limited.

                          > Lab is a wonderful scene referred color space, but suffers from mathematical complexities that disables simple mathematical operations. The reason is that shifting a hue, for example, may describe a color that simply does not exist. (Think of it as divide by zero, but for colors.)

                          (Note: Color spaces are neither "scene referred" or "display referred", so it is incorrect to call Lab "scene referred".)

                          This is true of various RGB color models as well. It is not unique to Lab. Many color models have this property because of the overlap between different receptor responses in the eye... it is fiendishly difficult to figure out a way to represent perceptible colors without including imaginary colors.

                          My conclusion here is that the only reasonable way to teach people how to pick harmonious colors is to have real humans use their brains and sense of aesthetics. Mathematical models for color perception tend to be either poorly suited for this task, or difficult to work with.

                          • covidthrow 6 days ago
                            > I assume that you're putting "correct" in quotes because you disagree with the idea that this is correct.

                            It is in quotes because it conforms to some definition of "correct", which is rather ambiguous, and because hue isn't the only factor of complementary colors.

                            > While useful, it's clear that our understanding is very limited.

                            I respectfully disagree. (Though acknowledge that our understanding of color is not complete.) I assert that our understanding of the mathematics of harmonious color are well understood because the spectral relationships are fairly straightforward. It's not uniform, like auditory relationships, but at least narrow-frequency relationships follow pretty simple patterns once the perceptual space is compressed. (Thus 180 degrees being "correct" complementary.)

                            The problem arises in our computationally-efficient matrices/transfer functions which distort those relationships and introduce the lightness and chromacity. I acknowledge, however, that it's not quite as "firm" as I phrased it.

                            > ...the only reasonable way to teach people how to pick harmonious colors is to have real humans use their brains and sense of aesthetics.

                            I agree that it's way better than shifting an HSL/HSV hue 180 (or however many) degrees to find a harmonious color. It's way more complex than that, and a proper tutor is much more valuable than an erroneous color space representation.

                            • klodolph 6 days ago
                              > I assert that our understanding of the mathematics of harmonious color are well understood because the spectral relationships are fairly straightforward.

                              I definitely disagree with this. The relationship between color and spectrum is not straightforward.

                              Again, the human perception of color is complicated and nonlinear. We have made great strides sussing out that relationship with experiment, but when we discuss hue and relative differences, it becomes far more difficult to translate our experimental data on human color perception to some kind of useful model. The models have evolved over the years, from tristimulus models (based on the spectral response of photoreceptors) to more complicated nonlinear perceptual models (Lab and its successors), but as we work towards more accurate perceptual models, the models become more complicated and therefore more difficult to use and understand.

                              I am not trying to say this in order to be difficult--at one point I was working on image compression techniques and trying to create a perceptually uniform color quantization system. All models of color differences had noticeable limitations which made my work more difficult.

                              > Thus 180 degrees being "correct" complementary.

                              This assumes some kind of linearity in human visual perception which simply does not exist. You can do a hundred experiments showing that green light and magenta light mix to form white light, and yet this does not imply that they are complementary colors--the notion of complementary colors is only loosely related to the physics of light, just as color itself is only loosely related.

                              One line of questioning here is, "Is it reasonable to consider red and green to be complementary colors? If so, should our color space encode this relationship?"

                            • Elzear 6 days ago
                              HSLuv does a very good job at making color wheels human-friendly.

                              https://www.hsluv.org/ https://www.boronine.com/2012/03/26/Color-Spaces-for-Human-B...

                          • ansgri 6 days ago
                            Because the hue scale was designed to be perception-based, so flipping by 180 is the intended use. Obviously a single formula cannot describe all complexity of human color perception, especially if you take into account spatial interactions and background illumination.

                            The color science is far from developed, and better models than HSV and CIELAB are available, but typically are very complex with little practical gain.

                            • klodolph 6 days ago
                              The hue scale is not designed to be based on perception. It is simply a polar coordinate version of RGB.
                              • hanche 6 days ago
                                Even that is an approximation: The hue is piecewise linear instead of using trigonometric functions. Linear, that is, in each 60° sector. (Or affine for the super pedantic.)
                            • Yeah, it's a bit disappointing. I know they're trying to come up with formulae to do this stuff, but color is a deeply subjective experience. You can have all the javascript machinery in the world, and it won't ever match quality with what visually trained folks can come up with using the artist Josef Alber's "Interaction of Color" theory.
                              • danwills 6 days ago
                                There's certainly a fair difference in difficulty between hue=(hue+0.5)%1.0, and doing things 'properly' (perceptually uniform spectral sampling? Sounds quite a lot harder tbh!). HSL and HSV certainly include compromises, but in many cases the utility of being able to work with colour represented in this way means they're still super useful, even if inaccurate.
                                • lifthrasiir 6 days ago
                                  HSL and HUV would be useful for complementary colors if its hue is uniform enough. The problem is, they are not even that uniform. In some cases the complementary RGB hue can differ up to 30 degrees from the complementary CIELAB hue (which would be much closer to the true perceived hue) [1].

                                  [1] https://en.wikipedia.org/wiki/File:Hsv-hues-cf-lch-hues.png

                                  • klodolph 6 days ago
                                    Wouldn't it be a lot easier to just ask a human to pick colors? By my reckoning, if you write a piece of code that's simple but generates garish colors, it's better to just pick out the colors yourself.

                                    Why even bother teaching people about hue=(hue+0.5)%1.0 if the results are so ugly?

                                    • danwills 5 days ago
                                      I do agree the colours in the article were garish, but I'd say that is less because of the HSV/L usage and more the author's choices (including choosing to make complementary colours in this way). The ability HSV gives to easily be able 'rotate' colour, (even though it's around a deformed blob nothing like a circle), and increase and decrease saturation makes it quite useful.

                                      I agree that human-picked (where the human very often will be selecting in an HSV-based picker themselves) probably yields a more pleasing result more often (tastes can vary a lot there however), but I think there are some quite solid possibilities with code using HSV too, without having to go the whole-hog with colour-science. Makes it heaps easier to just play with colour for one thing, and code can be just for fun/exploration sometimes I think that's a good thing.

                                  • Groxx 6 days ago
                                    Because that is complementary color, by color theory. Or, one kind of complementary color, anyway: https://en.wikipedia.org/wiki/Complementary_colors . It's a purely computational process, no aesthetic taste is implied.

                                    But yeah, that default cyan/red combination is incredibly garish.

                                    • klodolph 6 days ago
                                      > Because that is complementary color, by color theory.

                                      If your notion of color theory is limited to RGB, then this might be reasonable. However, if you read the article that you linked (https://en.wikipedia.org/wiki/Complementary_colors) you'll see a much wider notion of complementary colors.

                                      Let your eyes and sense of aesthetics be the judge... most will agree that the RGB red/cyan and green/magenta pairs are garish and ugly.

                                      • Groxx 6 days ago
                                        I think you just restated everything I said.
                                        • klodolph 6 days ago
                                          You said that it is complementary, I'm not sure how else to respond except by disagreeing.
                                • fouronnes3 6 days ago
                                  I've had a dream project for years, but I have no idea how to do it. To build an accurate physical representation of the CIE 1931 xy plane. To see literally all the colors before your eyes at once. To see how far into infrared and ultraviolet your perception extends. Looking at an RGB rendering of CIE 1931 is kinda sad and makes me wonder of all the colors I've never seen.
                                  • weinzierl 6 days ago
                                    I've had the same dream for years until I realized that the reason I had no idea how to do it is actually that it is impossible. Of course approximations are possible and they do exist, but to make such a diagram accurate and comprehensive at the same time there are multiple obstacles:

                                    First of all the obvious fact that there is no printing or display technique with an all encompassing gamut. Also CIE 1931 is not perceptually uniform and unsuitable "To see how far [..] your perception extends.", as you expressed it.

                                    Apart from the technical difficulties the problems run deeper:

                                    Color space in reality is non-Euclidian. There is not even a perceptually uniform embedding in 3D Euclidian space, let alone one in 2D. This is how jacobolus put it once:

                                    "No, it’s not possible to have uniform color differences at all scales and in all directions in a 3-dimensional Euclidean space. If you go around a hue circle in little steps and then sum up all the perceived color differences you end up with more than π times the sum of differences you get if you go across the circle through gray." [1]

                                    Unfortunately your diagram can either be a fairly accurate depiction of a part or a fairly inaccurate depiction of the whole.

                                    [1] https://news.ycombinator.com/item?id=15485397

                                    • fouronnes3 5 days ago
                                      All good points. Thanks for that answer! Maybe it's possible to make a device that shows a single point of the color perception space of the human eye, but could show all the points? I'm thinking lots of monochromatic sources and optical mixing. The you could at least pick a point at a time of CIE 1931 and look at it.
                                    • > To see how far into infrared and ultraviolet your perception extends.

                                      For this one you could use a prism with a full-spectrum light behind it.

                                      • user-the-name 6 days ago
                                        CIE 1931 does not actually represent any deeper reality. It does not contain "literally all colours", it is a highly simplified mathematical model of colour, with plenty of tradeoffs and issues. It does not contain ultraviolet or infrared, those are entirely outside its scope.
                                        • devwastaken 6 days ago
                                          The problem with that is probably color accuracy. Usually with things like UV light sources you have to have a specific filter glass that blocks out most of the visible light being emitted.

                                          Perhaps you need to somehow create a rapidly changing filter glass of all different wavelengths. Purely hypothetical.

                                          • > Perhaps you need to somehow create a rapidly changing filter glass of all different wavelengths. Purely hypothetical.

                                            Monochromatic colors are just a tiny, tiny sliver of the perceptible color space. They're not even the boundary of it, they're such a small part of perception that they're only a part of the boundary. In the CIE model, the curved part of the boundary represents monochromatic colors. The surface itself is not monochromatic, and neither is the straight boundary (line of purples). And that model is a simplification in and of itself.

                                        • swang 6 days ago
                                          i thought this would be interactive so i spent time trying to figure out how to pick the second color in the "pick a color" box before realizing it was just text to read and not an actual call to action thingy. gonna bookmark it for future reference though.
                                          • loosetypes 5 days ago
                                            > to reveal color selection as being logical, predictable, and driven by principles anyone can learn.

                                            In that regard, is there any sort of algebra for color compatibility to quantify legibility?

                                            Specifically, say we have some text and change the background and font colors from default values.

                                            When I do this, I generally have no sense for the color change’s impact on readability or if the contrast would hurt my eyes until I take a look at the output. Then when I make a slight change - has it gotten better or worse? It feels so murky.

                                            I know there are more factors at play: font choice, font size, brightness of screen, etc. but does anyone know of a rough heuristic for or programmatic means of checking?

                                            • nateroling 6 days ago
                                              This is awesome! I’ve never seen the process of desaturation and palette building described as mixing the base colors together before. This gives me a whole new perspective.
                                              • bogdanoff_2 5 days ago
                                                What if I don't want to have a fully saturated chromatic color as a main part of my palette?