{"id":1,"date":"2024-04-07T08:10:12","date_gmt":"2024-04-07T08:10:12","guid":{"rendered":"http:\/\/csholgate.com\/?p=1"},"modified":"2024-06-18T22:40:15","modified_gmt":"2024-06-19T05:40:15","slug":"colors","status":"publish","type":"post","link":"https:\/\/csholgate.com\/index.php\/2024\/04\/07\/colors\/","title":{"rendered":"colors"},"content":{"rendered":"\n<p>Recently, I have been falling in love with and haunted by colors. I believe color choice in figures is an under appreciated but critical for communication of data and ideas. Colors should be good looking, accessible (including printing in greyscale well), and reflect the underlying data. In trying to understand color better, I have fallen into a deep rabbit hole of color theory. I won\u2019t pretend to be an expert here, but I have learned things along the way that are hopefully interesting if not helpful for how scientists can choose better colors.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">It isn\u2019t as simple as primary colors.<\/h2>\n\n\n\n<p>Having no serious art training, I don\u2019t think my brain ever internalized what the primary colors are. If you would have asked me, I probably would say red, green, and blue (RGB) based off my love of technology and the RGB pixels that power displays. These three colors when added together can produce many of the colors the human eye can see! But still not <em>that<\/em> much\u2014think around 30\u201350% depending on the exact technology used.<\/p>\n\n\n\n<p>If I did have art training, I\u2019d probably say that red, yellow, and blue (RYB) are the primary colors. These are called the \u201csubtractive\u201d colors because they subtract from a white background. Adding the three primary colors together creates black. Ask a printer and they\u2019ll have a similar but slightly different answer\u2014cyan, magenta, yellow, and possibly black (CMYK). <\/p>\n\n\n\n<p>Regardless of what the primary colors are, in principle these primary colors can combine to create a whole color wheel. But color wheels produced from different primary colors are distinctly different. For example, in RGB space, red and green are \u201cbuddy\u201d colors; they can be combined to produce yellow as a new color. In RYB color space, however, green is created through the mixture of yellow and blue and, as such, is directly opposite to red on the color wheel. In other words, this suggests that red and green can <em>not<\/em> be mixed to produce a new color. This also sort of follows intuitively\u2014it is easy to think about a color that is a reddish-yellow, but I cannot picture in my head what a reddish-green would be other than a muddy <em>blah<\/em>. <\/p>\n\n\n\n<p>This thinking motivates other, more niche, sets of primary colors. <a href=\"https:\/\/en.wikipedia.org\/wiki\/Opponent_process\">Opponent process<\/a> (a color theory) and <a href=\"https:\/\/en.wikipedia.org\/wiki\/CIELAB_color_space\">CIELAB<\/a> (a color space like RGB), as two examples, describe four \u201cprimary\u201d colors, each setup as an opposite pair: red and green, and blue and yellow.<sup data-fn=\"27ff0175-ff67-4ade-a708-051a94625950\" class=\"fn\"><a href=\"#27ff0175-ff67-4ade-a708-051a94625950\" id=\"27ff0175-ff67-4ade-a708-051a94625950-link\">1<\/a><\/sup> This allows for any color to be described through a combination of lightness, and of hues in the red-green and yellow-blue axes. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Defining color is just math.<\/h2>\n\n\n\n<p>All of this boils down to a key point: working with colors requires creating a <em>color space<\/em> and a way to access it through mathematics. That\u2019s really all that RGB, CMYK, or CIELAB models are. When choosing a color, say in Adobe Illustrator, this is most commonly done through setting values for one of four different systems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>RGB: values of red, green, and blue, are provided as described above. This system is \u201cadditive\u201d and meant to generate its own light (like a display). Mathematically, each value traditionally ranges between 0 and 255 (capturing 8 bits of data). Setting these three values affects not only the hue produced, but also the saturation (how colorful it is), and its lightness.<\/li>\n\n\n\n<li>Hexadecimal: this is equivalent to RGB, but each value ranges from 00 to FF (instead of 0 to 255). The red, green, and blue channels are capture by the first, middle, and last two digit pair. This is most useful (in my opinion) for copying and pasting, because the whole color is defined in one string, like #E34234 for the color vermilion. <\/li>\n\n\n\n<li>CMYK: Values of cyan, magenta, yellow, and black are provided as described above. This system is \u201csubtractive\u201d because it assumes the inks (e.g., from a printer) will be placed on a white background, which then subtract from that background. Mathematically, the four values are traditionally set between 0 and 100. Like RGB and Hexadecimal, these values control the hue produced, its saturation, and its brightness.<\/li>\n\n\n\n<li>HSB: Values of hue, saturation, and brightness. Rather than setting the amount of each primary color, this method <em>tries <\/em>to allow for more direct selection of individual parameters. I say \u201ctries\u201d because, even here, there are issues with exactly how bright a color is. More on that later! Anyway, mathematically, this system looks like either a cylinder or a cone\u2014so it is accessed through polar coordinates. Hue is captured by an angle of the cylinder\/cone between 0\u00b0\u2013360\u00b0. Saturation and brightness make up the radius and height, respectively, each traditionally set between 0\u2013100. This method is the same as HSV (hue, saturation, and value) but different from HSL (hue, saturation, and lightness). <\/li>\n<\/ul>\n\n\n\n<p>The trouble with all of these systems is that human vision does not fall within such a neatly organized box. Each system takes a shortcut for ease of use (or computation) that either simplifies color theory or, worse, misleads color choice decisions. Worst of all, these simplifications aren\u2019t well \u201cadvertised\u201d.<\/p>\n\n\n\n<p>For example, let\u2019s take three basic colors: red, green, and blue primaries from RGB space. These colors are defined in the following way for the four color systems above (from Adobe Illustrator):<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td><\/td><td>RGB<\/td><td>Hex<\/td><td>CMYK<\/td><td>HSB<\/td><\/tr><tr><td>Red<\/td><td>(255, 0, 0)<\/td><td>#FF0000<\/td><td>(0, 100, 100, 0)<\/td><td>(0\u00b0, 100, 100)<\/td><\/tr><tr><td>Green<\/td><td>(0, 255, 0)<\/td><td>#00FF00<\/td><td>(100, 0, 100, 0)<\/td><td>(120\u00b0, 100, 100)<\/td><\/tr><tr><td>Blue<\/td><td>(0, 0, 255)<\/td><td>#0000FF<\/td><td>(100, 100, 0, 0)<\/td><td>240\u00b0, 100, 100)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>The values in the table above\u2014and <em>especially HSB<\/em>\u2014imply all three colors are the same brightness. But this doesn\u2019t actually turn out to be the case. We can take the three colors, convert them into greyscale using a tool like Photoshop and see three very different levels of grey.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"706\" src=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/Color-1024x706.jpg\" alt=\"\" class=\"wp-image-112\" srcset=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/Color-1024x706.jpg 1024w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/Color-300x207.jpg 300w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/Color-768x529.jpg 768w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/Color.jpg 1338w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It turns out that humans perceive different colors at different effective brightnesses. In other words, green will appear brighter than red, which will appear brighter than blue (assuming all colors are saturated). The common mathematical models for color don\u2019t make this distinction, however. Their job is to give us that nice box to choose colors from, where we don\u2019t have to worry about entering a set of color values that are \u201cout of bounds\u201d to reality. The price we pay is a lack of control\u2014for example, it becomes very difficult to pick visually distinct saturated colors and guarantee that they will remain distinct if printed on a greyscale printer. You as the author or artist have to know that brightness isn\u2019t a uniform quantity.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A color\u2019s brightness and saturation are inherently linked!<\/h2>\n\n\n\n<p>The simplifications from RGB, etc. color spaces start feeling somewhat justified when you see more realistic depictions of the colors humans can see.  It is fundamentally three dimensional, making it hard to visualize on a screen, and not at all uniform in shape. Certain regions are skinny, where others jut out reaching into the void. <\/p>\n\n\n\n<p>But one point stands out to me from these more complex color models: how bright a color can be depends on how colorful that color is! <\/p>\n\n\n\n<p>A very blue-blue can only be obtained if it is also fairly dark. Conversely, a very yellow-yellow <strong>has<\/strong> to be bright. This is why it is challenging to read yellow text on a white background, or <span style=\"color:0000FF\">blue text on black<\/span>. It\u2019s possible to map these peak colorfulness points out: blue hues are most blue through a decent range of absolute lightness, between 0% and ~39%, but all of these are quite dark; purple has a narrow window of peak color, at about 37.5% lightness; red hues reach peak redness between 40\u201352% lightness; orange near 68%; greens between 75\u201385%; and yellows top off near a whopping 97%! My favorite way of visualizing this is through the online color picker tool <a href=\"http:\/\/HSLuv.org\">HSLuv.org<\/a>, which implements a CIELUV color space that has been transformed to cylindrical coordinates similar to HSL space. Such a transformation requires a sacrifice\u2014the saturation value becomes normalized and not absolutely comparable between hues, but lightness is retained absolute. (And unlike HSB, HSLuv is very transparent about this simplifying assumption.) I fully recommend you try out this tool! Peg the saturation at 100% and drag the lightness slider around to see how different hues appear and disappear.<\/p>\n\n\n\n<p>One neat thing this showed me was how an absolute lightness of ~70% gives the most choices for <em>saturated colors<\/em>. This gives colors with pastel-like brightness but boosting saturation gives colors that pop and distinguish themselves from one another. Reds are notably missing at this brightness, but greens, oranges, salmon, purples, and light blues are well represented. In comparison, setting an absolute lightness of 30% really only gives saturated blue and red, with a sort of low-brightness purple verging on pink in between. This, and my love of yellow-gold hues, has really pushed me toward embracing dark themes lately to use more of the colors I find pleasurable and maintain adequate contrast to pass <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">accessibility standards<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/IMG_0234-1024x768.jpeg\" alt=\"\" class=\"wp-image-107\" srcset=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/IMG_0234-1024x768.jpeg 1024w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/IMG_0234-300x225.jpeg 300w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/IMG_0234-768x576.jpeg 768w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/IMG_0234-1536x1152.jpeg 1536w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/06\/IMG_0234-2048x1536.jpeg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Two figures, one in dark theme and one in a normal light theme. In all cases colors between the two versions are the same hue, set at either 70% absolute lightness (left) or 30% absolute lightness (right). To my eye, the lines in the dark-theme version are much more distinguishable from one another. The most saturated colors for the dark theme are orange and green, whereas blue and red are most saturated for the light-theme.<\/figcaption><\/figure>\n\n\n\n<p>There is so much more to talk about\u2014like how RGB and CMYK capture slightly different areas of what the human eye can see (called their gamut), or how many color systems are out there. But these are\u2014perhaps\u2014stories for another day. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<ol class=\"wp-block-footnotes\"><li id=\"27ff0175-ff67-4ade-a708-051a94625950\">These colors are slightly simplified, but get the point across well enough. For example, opponent process suggests the opposite pairs are carmine-red, cobalt-green, cobalt-blue, and yellow. Even still, everybody\u2019s eyes are unique, and different individuals identify slightly different exact opposite hues. <a href=\"#27ff0175-ff67-4ade-a708-051a94625950-link\" aria-label=\"Jump to footnote reference 1\">\u21a9\ufe0e<\/a><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>Recently, I have been falling in love with and haunted by colors. I believe color choice in figures is an under appreciated but critical for communication of data and ideas. Colors should be good looking, accessible (including printing in greyscale well), and reflect the underlying data. In trying to understand color better, I have fallen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"[{\"content\":\"These colors are slightly simplified, but get the point across well enough. For example, opponent process suggests the opposite pairs are carmine-red, cobalt-green, cobalt-blue, and yellow. Even still, everybody\u2019s eyes are unique, and different individuals identify slightly different exact opposite hues.\",\"id\":\"27ff0175-ff67-4ade-a708-051a94625950\"}]"},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":49,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":116,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions\/116"}],"wp:attachment":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}