2b:null 2c:["$","title",null,{"children":"sRGB, RGB & Gamma | Sébastien Pierre | Observable"}] 31:T698,md`# sRGB, RGB & Gamma Working with colour is not that easy, especially when you need to apply transformations and processing — it is actually easier to get things wrong than right, and this notebook is an attempt at making things a bit clearer. One of the key source of that confusion is that the RGB components that we manipulate in computer graphics, or on the Web, do not always mean the same thing. In other words, the same *(r,g,b)* triple might give different results depending on the context. A lot of the aspects we're going to talk about are related to the *linearity* and *non-linearity* of colours: 1. When we work with colours, we expect to be able to add them, substract them, multiply them and divide them as vectors of their primary components (like the classic *r,g,b*). However, to do that, they need to be expressed in a vector space that is linear and would respect *a - b = (a + k) - (b + k)*. It is not always the case, due to the *gamma correction* (see below). 2. Our perception of the intensity of colour is not linear, meaning a 50% intensity might be perceived as 25% brightness. Actually, most natural and physical systems work in non-linear ways, such as our old CRT monitors which given the same increase of energy in the input signal would not output a proportional amount of colour or brightness change. As it turns out, colors on the Web are expressed in the sRGB colour space, which is gamma-corrected (also called gamma-compressed), which is a *non linear* space. As a result, *any computation on Web colours* is likely going to be off, as it assumes to operate in a linear space while it is not. We're going to unpack this in more detail here. `32:T881,md`## Definitions - **RGB Components**: defined as an *(r,g,b)* triple, usually between 0–1.0 (computer graphics) or 0–255 (web), identifies a colour in a RGB colour space. - **RGB Colour space**: the set of colors that can be defined by RGB components. The colour space is usually defined by a *primaries*, a *white point* and a *colour component transfer function* (CCTF) - **Transfer Function**: a function that maps input value to a device's output values. In computer graphics, the transfer function between a RGB triple and the colour on the screen is *non linear* and is often referred to as the *gamma*. - **Gamma**: the [transfer function](https://en.wikipedia.org/wiki/SRGB#The_sRGB_transfer_function_(%22gamma%22)) in the sRGB colour space, sometimes called [gamma correction](https://en.wikipedia.org/wiki/Gamma_correction). The role of the gamma correction is to ensure that a constant increment to RGB component yields a constant proportional increment in the perception of the displayed colour. In other words, "*with this nonlinear relationship, equal steps in encoded luminance correspond roughly to subjectively equal steps in brightness*". Of particular interest to this article are these two subtle differences: - **linear sRGB** (often called linear RGB, or *gamma-expanded* values), are the RGB components expressed in the RGB colour space *before* the application of the transfer function (gamma correction) - **non-linear sRGB** (or *gamma-compressed* values) are the RGB components expressed in the RGB colour space *after* the application of the transfer function. Originally, the gamma function was describing the physical behaviour of CRT monitors: "*a typical gamma of 2.2 means that a pixel at 50 percent intensity emits less than a quarter of the light as a pixel at 100 percent intensity—not half, as you would expect! Gamma is different for every individual display device*" (from [GPU Gems 3](https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear)). It is good to note that in computer graphics (such as when writing shaders), the RGB pixels that you pass must be gamma-corrected `33:T42f,md`## Accessibility & Colour in Information Graphics One of the practical application of all the above is to help inform the question: which colours should I choose if I want to distinguish visual elements with colour (lines in a line chart, slices of a pie chart, etc). The notion of colour distance (or proximity) is key to that, but we have to be mindful of the context. The first thing to be mindful of is that a subset of the population has reduced to no ability to distinguish some of the colours. As a result, choosing a set of colours should ideally take in consideration the potential reduced perception of colours for people with different colour blindnesses. Next to that, there is always the possibility of a chart being printed on a black and white printer, which adds the requirement of the chart to be readable when converted to greyscale. Although this problem is less and less likely as people tend to look at charts on the screen and most printers are colour printer nowadays, it is nonetheless a question to be explored. We'll start with that one. `34:T8e8,md`## References sRGB, gamma, linear and non-linear spaces: - [Gamma FAQ](https://poynton.ca/GammaFAQ.html) — probably the first thing to read as it introduces the terms very clearly and gives practical examples as well a precise definitions. - [sRGB](https://en.wikipedia.org/wiki/SRGB#The_sRGB_transfer_function_(%22gamma%22), a good overview of the sRGB colour space and an introduction of the gamma function (Wikipedia). - [CSS Color Module Level 3](https://www.w3.org/TR/css-color-3/#SRGB) specifies that Web RGB colors are expressed in the sRGB color space. This [W3C sRGB document](https://www.w3.org/Graphics/Color/sRGB.html) has more detailed information but is now obsolete. - [Gamma correct blurring](https://www.iquilezles.org/www/articles/gamma/gamma.htm) — an article from IQ that talks about being mindful of gamma when performing linear manipulation of RGB components - [How to interpret the sRGB color space](http://color.org/chardata/rgb/sRGB.pdf) - [The Importance of Being Linear](https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear), a GPU Gems article that gives some clear examples of the gamma function and its relation to how computer monitors were built. - [Confusion between usages of linear RGB and sRGB](https://computergraphics.stackexchange.com/questions/3970/confusion-between-usages-of-linear-rgb-and-srgb) — a StackOverflow question about the correct process of converting from linear RGB to SRGB. Luminosity & brightness: - [Luma](https://en.wikipedia.org/wiki/Luma_(video), gives the formula for *luma* and a bit of detail around luma and relative luminance. - [Formula to determine the brightness of an RGB colour](https://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color) (StackOverflow) — contains a pretty good summary of the difference between brightness, lightness, luminance, luma and other terms, complete with equations and code. - [Understanding colors and luminance](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance#:~:text=Luminance%20is%20of%20particular%20importance,to%20distinguish%20dark%20against%20light.), talks about the accessibility of colours and the notion of relative luminance. `35:[] 2f:{"id":"fe9d097abdec01ff","slug":"srgb-rgb-gamma","title":"sRGB, RGB & Gamma","thumbnail":"e84998d716824c4de293fbb9e373cfdb1ed53c05e3de0719e5d0de7b86d3f943","access_level":"public","create_time":"$D2020-08-10T02:28:01.273Z","update_time":"$D2022-11-20T05:12:52.388Z","view_time":null,"first_public_time":"$D2020-08-13T22:11:58.387Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"cc0ce9489265b441","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":"starter_2024"},"version":890,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7083c0770e4c8937","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":null}],"members":[{"type":"individual","id":"7083c0770e4c8937","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"sRGB, RGB & Gamma","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"md`## Linear & non-linear sRGB\n\nBy default, the colours we define on the Web are expressed in the *sRGB colour space* and are *already gamma-compressed*. This means that if we linearly interpolate over the the range of values (say 0-255), we get an even change in the perceived brightness of each colour, as illustrated below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"html.div(range(0,30).map(_ => Swatch(rgb(lerp(0,255,_/30)))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"md`Now if we remove the gamma correction from the generated colours, we can see that our shades of grey are *much darker* than expected.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"html.div(range(0,30).map(_ => Swatch(rgb(lerp(0,255,degamma(_/30))))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"md`The takeaway from that is that we don't really want to display our colours without the gamma correction, as the end result is going to be a darker image than what we'd like it to be. However, as [IQ puts it](https://www.iquilezles.org/www/articles/gamma/gamma.htm): \"*Ideally your image [processing] algorithm should preserve the image brightness intact and only [process] the detail in it, or in other words, if the [processing function] is going to be energy conserving, it will have to operate in linear space rather than gamma space*\".\n\nIn other words:\n\n1. The final colour that we give to the display should be in *gamma-compressed* form (ie. have the gamma correction applied)\n2. Any processing on the colour that needs to preserve the brightness should happen in linear space, using the *gamma-expanded* form.\n\nWhich would then turn into the following code the following pipeline: *(sRGB image → degamma → process → gamma → sRGB image)*.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"md`Now let's do an interpolation between two bright primary colors (red and green) in the gamma-corrected RGB space:`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"html.div(range(0,30).map(_ => {\n const k = _/30;\n return Swatch(rgb(\n 255*lerp( 1, 0, k),\n 255*lerp( 0, 1, k),\n 255*lerp( 0, 0, k)\n ))\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"md`As you can see, the middle part of the gradient is dark and brown, while we should probably be seeing oranges and yellow as we're interpolating red to green. Now let's try to do the interpolation in the gamma-expanded (linear) form:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"html.div(\n html.div(range(0,30).map(_ => {\n const k = _/30;\n return Swatch(rgb(\n 255*gamma(lerp( degamma(1), degamma(0), k)),\n 255*gamma(lerp( degamma(0), degamma(1), k)),\n 255*gamma(lerp( degamma(0), degamma(0), k))\n ))\n}), html.em(\" approximate gamma correction\")),\nhtml.div(range(0,30).map(_ => {\n const k = _/30;\n return Swatch(rgb(\n 255*gammasRGB(lerp( degammasRGB(1), degammasRGB(0), k)),\n 255*gammasRGB(lerp( degammasRGB(0), degammasRGB(1), k)),\n 255*gammasRGB(lerp( degammasRGB(0), degammasRGB(0), k))\n ))\n}), html.em(\" sRGB gamma correction\"))) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"md`We can see that when doing the interpolation in linear space, the middle value is a yellow with a similar overall brightness to the two interpolated colors, in other words, overall brightness seems to be preserved.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"md`\n## Brightness & Luminance\n\nIn a naive approach, one might think that computing the brightness of a colour is equivalent to showing the average of its 3 components as a greyscale value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"grey = ([r,g,b]) => gamma((degamma(r) + degamma(g) + degamma(b))/3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":787,"value":"md`Let's try that approach and compute a grey value averaging the three component across the gradient, the first in gamma space and the second in linear space.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"html.div(\n html.div(range(0,30).map(_ => {\n const k = _/30;\n return Swatch(rgb(\n 255*gamma(lerp( degamma(1), degamma(0), k)),\n 255*gamma(lerp( degamma(0), degamma(1), k)),\n 255*gamma(lerp( degamma(0), degamma(0), k))\n ))\n }), html.em(\" linear gradient\")),\n html.div(range(0,30).map(_ => {\n const k = _/30;\n return Swatch(rgb(\n 255*(lerp( 1, 0, k) +\n lerp( 0, 1, k) +\n lerp( 0, 0, k)) / 3\n ))}), html.em(\" rgb→average\")),\n html.div(range(0,30).map(_ => {\n const k = _/30;\n return Swatch(rgb(\n 255 * gamma((lerp( degamma(1.0), degamma( 0), k) +\n lerp( degamma( 0), degamma(1.0), k) +\n lerp( degamma( 0), degamma( 0), k)) / 3)\n ))}), html.em(\" rgb→degamma→average→gamma\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"md`If you take a step back from the screen, you will see that the linear space average yields a grey that is much closer to the overall brightness of the gradient. However, if you look closer at the gradient, chances are that you will find that the start and end are brighter than the center, even though the average in both linear and gamma space is constant. \n\nThis is because the total of the components for red is 1.0 (r=1,g=0,b=0) and green is 1.0 as well (r=0,g=1,b=0), so the average is always going to be 1.0, hence a solid grey throughout the gradient.\n\nWe see a difference in brightness because our eyes perceive some colors as brighter than others, for instance green is perceived as much brighter than blue, and as a result the sum of the numerical value of the components is not representative of the brightness of a colour.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"md`### Luma, luminance, perceived lightness & brightness\n\nAs this [answer from StackOverflow](https://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color) puts it: \"*brightness is a perceptual attribute, it does not have a direct measure*\". There are, however a few ways to quantify the \"brightness\" of a colour, and we're going to go over them.\n\nThe first one is *luma* (or *Y´*), which is a **gamma-compressed** weighted value, taking into account the difference in how we perceive colours, such as perceiving green as brighter than red (~0.72), and red brighter (~0.21) than blue (~0.07).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"luma = ([r,g,b]) => 0.2126*r + 0.7152*g + 0.0722*b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"md`\nAs *luma* is gamma-compressed it is not ideal to work with, and what is more useful for our purpose is its gamma-expanded equivalent, the *luminance* (or relative luminance), which is the weighed sum of the **gamma-expanded** (linear) RGB components (oddly enough, with the same coefficients, more on that [here](https://en.wikipedia.org/wiki/Luma_(video)):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"luminance = ([r,g,b]) => 0.2126*degamma(r) + 0.7152*degamma(g) + 0.0722*degamma(b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"md`And now, we're ready to calculate the perceived lightness, *L^★* that uses the *luminance* function and takes into account the non-linear perception of luminance. In a way, lightness is the transfer function for the luminance to our perception device. Note that we return a normalised luminance value, as it is usually returned in the 0–100 range. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":470,"value":"lightness = (rgb)=>{\n // This is from: https://stackoverflow.com/a/56678483/4100249\n const y = luminance(rgb)\n return (y <= (216/24389) ? y * (24389/27) : Math.pow(y,(1/3)) * 116 - 16) / 100.0\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"md`In the interactive example below, we can have a better idea of the difference between the *brightness* and the *luma* component. The brightness is not going to be affected by the chromatic component (the color), while the luma is going to change as the grey is tinted with a colour. Start with a grey and tint it with blue, the brightness will be stable, but the luma will go down, shift the tint to green and the luma will go up.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"viewof BrightnessColor = color()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"((color)=>{\n const c = color.map(_ => _ * 255)\n const v0 = grey(color)\n const v1 = luma(color)\n const v2 = luminance(color)\n const v3 = lightness(color)\n return html.table(\n html.thead(\n html.tr( html.th(\"Method\"), html.th(\"Value\"), html.th(\"Grey\"))),\n html.tbody(\n html.tr(html.td(html.code(\"grey(rgb)\")),\n html.td(html.code(percent(v0))), html.td(Swatch(c),Swatch(rgb(v0*255)))),\n html.tr(html.td(html.code(\"luma(rgb)\")),\n html.td(html.code(percent(v1))), html.td(Swatch(c),Swatch(rgb(v1*255)))),\n html.tr(html.td(html.code(\"luminance(rgb)\")),\n html.td(html.code(percent(v2))), html.td(Swatch(c),Swatch(rgb(v2*255)))),\n html.tr(html.td(html.code(\"lightness(rgb)\")),\n html.td(html.code(percent(v3))), html.td(Swatch(c),Swatch(rgb(v3*255)))),\n ))})(hex2rgb(BrightnessColor))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"md`Now let's put our these functions to test with our gradient example and see if we get better results than with the *grey()* function we defined earlier`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"html.div(range(0,30).map(_ => {\n const k = _/30;\n return Swatch(rgb(\n 255*gamma(lerp( degamma(1), degamma(0), k)),\n 255*gamma(lerp( degamma(0), degamma(1), k)),\n 255*gamma(lerp( degamma(0), degamma(0), k))\n ))\n}), html.em(\" linear space gradient\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"html.div(range(0,30).map(_ => {\n const k = _/30;\n const c = [\n gamma(lerp( degamma(1), degamma(0), k)),\n gamma(lerp( degamma(0), degamma(1), k)),\n gamma(lerp( degamma(0), degamma(0), k))\n ]\n return Swatch(rgb(255 * grey(c)))\n}), html.em(\" gradient→grey\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":529,"value":"md`Now we introduce the *luma* and *luminance* functions, respectively below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"html.div(range(0,30).map(_ => {\n const k = _/30;\n const c = [\n gamma(lerp( degamma(1), degamma(0), k)),\n gamma(lerp( degamma(0), degamma(1), k)),\n gamma(lerp( degamma(0), degamma(0), k))\n ]\n return Swatch(rgb(255 * luma(c)))\n}), html.em(\" gradient→luma\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"html.div(range(0,30).map(_ => {\n const k = _/30;\n const c = [\n gamma(lerp( degamma(1), degamma(0), k)),\n gamma(lerp( degamma(0), degamma(1), k)),\n gamma(lerp( degamma(0), degamma(0), k))\n ]\n return Swatch(rgb(255 * luminance(c)))\n}), html.em(\" gradient→luminance\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":883,"value":"html.div(range(0,30).map(_ => {\n const k = _/30;\n const c = [\n gamma(lerp( degamma(1), degamma(0), k)),\n gamma(lerp( degamma(0), degamma(1), k)),\n gamma(lerp( degamma(0), degamma(0), k))\n ]\n return Swatch(rgb(255 * lightness(c)))\n}), html.em(\" gradient→lightness\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":526,"value":"html.div(range(0,30).map(_ => {\n const k = _/30;\n const c = [\n gamma(lerp( degamma(1), degamma(0), k)),\n gamma(lerp( degamma(0), degamma(1), k)),\n gamma(lerp( degamma(0), degamma(0), k))\n ]\n return Swatch(rgb(255 * degamma(luma(c))))\n}), html.em(\" gradient→luma→degamma\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":521,"value":"md`We can see how the *luma* mapping seems overly bright with a very low value for red, while the *luminance* mapping seems more even in its gradation, this is due to the gamma function being preapplied in *luma*. Converting the resulting grey to expanded gamma does give a result closer to luminance, although darker.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"html.div(range(0,30).map(_ => {\n const k = _/30;\n const c = [\n gamma(lerp( degamma(1), degamma(0), k)),\n gamma(lerp( degamma(0), degamma(1), k)),\n gamma(lerp( degamma(0), degamma(0), k))\n ]\n return Swatch(rgb(255 * lightness(c)))\n}),html.em(\" gradient→lightness\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"md`The *lightness* function, on the other hand gives great result: it yields an overall colour close to the original grey, but takes into account the perceptual weight of the green component, resulting in variations in luminosity across the gradient. Keep in mind that the *lightness* function is the conversion from luminance through a transfer function that approximates how we perceive variations in luminance, which means that a delta in luminance is not going to be perceived the same way while a delta in lightness should be perceived the same way. This is going to be important for the next section, which is about quantifying the difference between two colours.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":436,"value":"md`## Colour Distance\n\nSo far we've seen how the *gamma correction* transfer function and its inverse are crucial to doing linear transformations to colours. We've also seen the nuances between the numerical brightness of a colour and its luma, or perceived brightness. We now have the key elements to introduce the notion of *distance*, which will help us answer the question of: given two colours, how close are they together?\n\nThe [common definition](https://en.wikipedia.org/wiki/Color_difference) of colour distance (or difference) is to use the Euclidean distance, obviously in gamma expanded (linear) RGB:`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":437,"value":"distance = ([r0,g0,b0],[r1,g1,b1]) => {\n // Note: we need to degamma the RGB components are they are in gamma compressed RGB space.\n const dr = degamma(r0) - degamma(r1);\n const dg = degamma(g0) - degamma(g1);\n const db = degamma(b0) - degamma(b1);\n // Note: 1.7320508075688772 is the maximum distance (Math.sqrt(3))\n return (Math.sqrt( (r1-r0)*(r1-r0) + (g1-g0)*(g1-g0) + (b1-b0)*(b1-b0))) / 1.7320508075688772;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":565,"value":"md`However, as we've seen before, this measure of distance does not take into account the perceptual differences in colours. The [Color Difference Wikipedia entry](https://en.wikipedia.org/wiki/Color_difference) offers a weighted formula based on the gamma-compressed RGB components. Note that we apply an extra division by *3* in order to keep the resulting value within the same range as *distance* (ie. the maximum sum of components is *3* in *distance* and *9* in the original perceptual distance function).` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"perdistance =([r0,g0,b0],[r1,g1,b1]) => {\n // NOTE: No need to degamma here as the article mentions that the formula is fore non-linear sRGB\n const dr = r0 - r1;\n const dg = g0 - g1;\n const db = b0 - b1;\n return Math.abs(dr) < 128\n ? Math.sqrt((2*dr*dr + 4*dg*dg + 3*db*db)/3)\n : Math.sqrt((3*dr*dr + 4*dg*dg + 2*db*db)/3)}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"(()=>{\n const l = range(0,30).map(_ => {\n const k = _/30;\n return rgb(\n 255*gamma(lerp( degamma(1), degamma(0), k)),\n 255*gamma(lerp( degamma(0), degamma(1), k)),\n 255*gamma(lerp( degamma(0), degamma(0), k))\n )\n })\n return html.div(\n html.div(l.map(Swatch), html.em(\" linear space gradient\")),\n html.div(l.map(c => {\n const g = rgb(255,0,0);\n const d = distance(c, g);\n return html.div({_:\"swatch\"}, html.small(sprintf(\"%0.1f\",d)))\n }), html.em(\" distance to red\")),\n html.div(l.map(c => {\n const g = rgb(255,0,0);\n const d = perdistance(c, g);\n return html.div({_:\"swatch\"}, html.small(sprintf(\"%0.1f\",d)))\n }), html.em(\" perceptual distance to red\")),\n html.div(l.map(c => {\n const g = lightness(rgb(255,0,0));\n const d = Math.abs(g-lightness(c));\n return html.div({_:\"swatch\"}, html.small(sprintf(\"%0.1f\",d)))\n }), html.em(\" lightness distance to red\"))\n )\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":625,"value":"md`We can see that the Euclidean distance and the perceptual distance in that case are fairly close, which would confirm the claim that the Euclidean distance is good enough for most purposes. An in fact, the CIELAB ΔE* would probably be the best metric to use, however its computation is complicated, so we're going to leave this one out.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":802,"value":"md`## Hue & Distance in hue\n\nLuminance and lightness are ways to sort colours by their actual or perceived intensity. If we take the lightness apart, we might want to know how close are two colours together, which is what the *hue* would tell us. Based on the [Hue](https://en.wikipedia.org/wiki/Hue) Wikipedia page, we can define hue like this, mapping the hue from the 0-360 range to the normalised 0-1 range.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":805,"value":"hue = (rgb) => {\n // NOTE: The degamma here does affect the hue, and we need to operate in linear space.\n const r = degamma(rgb[0]);\n const g = degamma(rgb[1]);\n const b = degamma(rgb[2]);\n const d = 360 * Math.atan2(Math.sqrt(3) * (g-b), 2*r - g - b) / (2 * Math.PI)\n return (d < 0 ? 360 + d : d) / 360.0\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":807,"value":"hue(hex2rgb(HueColor))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":812,"value":"viewof HueColor = color()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":826,"value":"md`Now, if we want to introduce the notion of distance in hue things get a little bit tricky as the hue is circular: that means that a hue of 0 and and hue of 1 have the same distance. In other words, a difference in hue of 0.5 is the maximum, and a difference in hue of 0.25 is the same as a difference in hue of 0.75.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"huedistance = (a,b) => {\n const d = Math.abs(hue(a) - hue(b))\n return 2 * (d > 0.5 ? 1 - d : d)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":847,"value":"hsl = (rgb)=> {\n const r = degamma(rgb[0]);\n const g = degamma(rgb[1]);\n const b = degamma(rgb[2]);\n // From: https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB\n const x_max = Math.max(Math.max(r,g), Math.max(g,b));\n const x_min = Math.min(Math.min(r,g), Math.min(g,b));\n const v = x_max;\n const c = x_max - x_min;\n const l = (x_max + x_min) / 2;\n \n // FIXME: Not quite right!\n const h = \n c === 0 ? 0 :\n v === r ? 60 * (0 + (g-b)/c) :\n v === g ? 60 * (2 + (b-r)/c) :\n 60 * (4 + (r-g)/c);\n // SEE: https://medium.com/@donatbalipapp/colours-maths-90346fb5abda#:~:text=It%20indicates%20the%20actual%20dominant,grey%20in%20the%20same%20colour.\n const s = l == 1 || l == 0 ? 0 : (x_max - x_min) / ((1 - Math.abs(2*l - 1)));\n return [h,s,l];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":849,"value":"hsl(hex(HSLColor))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":866,"value":"viewof HSLColor = color()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":881,"value":"saturation = rgb => hsl(rgb)[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"md`### Greyscale conversion\n\nAs we've seen, conversion to greyscale is not as easy as it seems, and will depend on how the printer's driver implements it. If the driver is correct, then the greyscale equivalent of a colour would be the grey version of the *lightness* value of the colour, however there is no guarantee of that.\n\nThe chromatic component of a colour does factor in the distance function between two colours, however, some of that distance will be lost when converted to greyscale. As a result, if we want to be mindful of greyscale conversion, we will need to use a distance based on the perceived luminosity in order to guaranteee contrast when printed in greyscale.\n\nThe takeaway here is that ideally there should be two palettes: one optimised for greyscale, one optimised for full colour, but that if this is not an option, then lightness should be used as the primary differentiator between colours.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"md`\n### Colour Blindness Simulation\n\nThe simulation of colour blindness can be approximated using information describe in\n[this page](https://web.archive.org/web/20081014161121/http://www.colorjack.com/labs/colormatrix/), which defines matrices to transform an RGB colour and alters its component to match how a person with a given colour blindness would see it. This transformation is captured in the Blindness table that maps RGBA transformation matrices to different types of colour blindnesses.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":629,"value":"Blindness = ({\n //'Normal' :[1,0,0,0,0, 0,1,0,0,0, 0,0,1,0,0, 0,0,0,1,0, 0,0,0,0,1],\n 'Protanopia' :[0.567,0.433,0,0,0, 0.558,0.442,0,0,0, 0,0.242,0.758,0,0, 0,0,0,1,0, 0,0,0,0,1],\n 'Protanomaly' :[0.817,0.183,0,0,0, 0.333,0.667,0,0,0, 0,0.125,0.875,0,0, 0,0,0,1,0, 0,0,0,0,1],\n 'Deuteranopia' :[0.625,0.375,0,0,0, 0.7,0.3,0,0,0, 0,0.3,0.7,0,0, 0,0,0,1,0, 0,0,0,0,1],\n 'Deuteranomaly':[0.8,0.2,0,0,0, 0.258,0.742,0,0,0, 0,0.142,0.858,0,0, 0,0,0,1,0, 0,0,0,0,1],\n 'Tritanopia' :[0.95,0.05,0,0,0, 0,0.433,0.567,0,0, 0,0.475,0.525,0,0, 0,0,0,1,0, 0,0,0,0,1],\n 'Tritanomaly' :[0.967,0.033,0,0,0, 0,0.733,0.267,0,0, 0,0.183,0.817,0,0, 0,0,0,1,0, 0,0,0,0,1],\n 'Achromatopsia':[0.299,0.587,0.114,0,0, 0.299,0.587,0.114,0,0, 0.299,0.587,0.114,0,0, 0,0,0,1,0, 0,0,0,0,1],\n 'Achromatomaly':[0.618,0.320,0.062,0,0, 0.163,0.775,0.062,0,0, 0.163,0.320,0.516,0,0,0,0,0,1,0,0,0,0,0]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":642,"value":"md`Now we can define the colorblind(colour,blindness) transform, which takes a non-linear sRGB colour value, applies the corresponding *blindness* matrix and returns a non-linear sRGB colour value. Of course, the process involves converting the colour to linear component as the matrix transform operates in linear space. This is something that was not mentioned or done in the original article.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":633,"value":"colorblind = (rgb,t) => {\n\t\tconst m = Blindness[t]||Blindness.Normal;\n\t\tconst r = degamma(rgb[0]);\n \tconst g = degamma(rgb[1]);\n const b = degamma(rgb[2])\n\t\tconst a = 1.0;\n return [\n\t\t\t((r*m[0]) +(g*m[1]) +(b*m[2]) +(a*m[3])+m[4]),\n \t((r*m[5]) +(g*m[6]) +(b*m[7]) +(a*m[8])+m[9]),\n \t((r*m[10])+(g*m[11])+(b*m[12])+(a*m[13])+m[14])\n ].map(_ => gamma(_ < 0 ? 0 : ( _ < 1 ? _ :1)))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"viewof BlindColour = color(\"#e021b0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":645,"value":"pipe(hex2rgb(BlindColour), color => html.table(\n html.thead(\n html.tr(html.th(\"Colour blindness\"), html.th(\"Colour\"), html.th(\"Lightness\"), html.th(\"Luminance\"),html.th(\"Grey\"))),\n html.tbody(\n sorted(keys(Blindness)).map( _ =>\n html.tr(\n html.td(_),\n html.td(\n Swatch(color),\n Swatch(colorblind(color, _))),\n html.td(\n Swatch(rgb(lightness(color)*255)),\n Swatch(rgb(lightness(colorblind(color, _))*255))),\n html.td(\n Swatch(rgb(luminance(color)*255)),\n Swatch(rgb(luminance(colorblind(color, _))*255))),\n html.td(\n Swatch(rgb(grey(color)*255)),\n Swatch(rgb(grey(colorblind(color, _))*255))), \n )))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":697,"value":"md`If you explore the colour space with the interactive controls above, you will notice that the *lightness* and *luminance* can be drastically impacted by some of the colour blindnesses, while the *grey* is much less affected. This is to be expected, as the lightness uses the luminance, which itself uses a weighted transform of the components, and as result will amplify the distortion brought by the components.\n\nThe key question here is if the perceived lightness of colour is preserved by colour blindness, if it is the case, then the colour blindness function is not accurate and should probably be corrected to output a similar colour with the correct lightness, and the colour blindness (and hence the luminance function) should be corrected for the specific type of colour blindness. The [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/#dfn-relative-luminance) may have some answers there.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":707,"value":"md`\n### Relative luminance\n\nNow the WCAG2.1 defines [relative luminance](https://www.w3.org/TR/WCAG21/#dfn-relative-luminance) as the following function, given an rgb colour in non-linear sRGB space:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":709,"value":"reluminance = ([r,g,b])=>\n0.2126 * (r <= 0.03928 ? r/12.92 : Math.pow((r+0.055)/1.055,2.4)) +\n0.7152 * (g <= 0.03928 ? g/12.92 : Math.pow((g+0.055)/1.055,2.4)) +\n0.0722 * (b <= 0.03928 ? b/12.92 : Math.pow((b+0.055)/1.055,2.4))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":724,"value":"md`This function, as it happens is pretty close to the luminance function we have defined, except that the linear part of the piecewise gamma correction function has a different coefficient. We can validate this below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":732,"value":"viewof ReluminanceColor = color(\"#68a2f9\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":711,"value":"pipe(hex2rgb(ReluminanceColor), color => html.table(\n html.thead(\n html.tr(html.th(\"Colour blindness\"), html.th(\"Colour\"), html.th(\"Luminance\"), html.th(\"Relative Luminance\"))),\n html.tbody(\n sorted(keys(Blindness)).map( _ =>\n html.tr(\n html.td(_),\n html.td(\n Swatch(color),\n Swatch(colorblind(color, _))),\n html.td(\n Swatch(rgb(reluminance(color)*255)),\n Swatch(rgb(luminance(colorblind(color, _))*255)), \" \",\n html.em(percent(luminance(colorblind(color, _))))),\n html.td(\n Swatch(rgb(reluminance(color)*255)),\n Swatch(rgb(reluminance(colorblind(color, _))*255)), \" \",\n html.em(percent(reluminance(colorblind(color, _))))),\n )))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":741,"value":"md`In this [MDN article](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance#:~:text=Luminance%20is%20of%20particular%20importance,to%20distinguish%20dark%20against%20light.), relative luminance is put in relation to accessibility: *Where human perception is concerned, a difference in luminance matters more than a difference in color. This is important, luminance contrast enables the development of content that even those with color-blindness can see*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"md`## Appendix\n\nWe define the *rgb(r,g,b)* as a way to generate a normalised (r,g,b) components triple from input values in the 0–255 integer range.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"rgb = (r,g,b) => [r/255, def(g,r)/255, def(b,g,r)/255]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"md`The *hex(rgb)* function takes a normalised *(r,g,b)* gamma-compressed triple and returns a string with the corresponding sRGB colour, usable in hte web.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"hex = (c) => typeof(c) === \"string\" ? hex2rgb(c) : c instanceof Array ? `#${Math.round(c[0]*255).toString(16).padStart(2,\"0\")}${Math.round(c[1]*255).toString(16).padStart(2,\"0\")}${Math.round(c[2]*255).toString(16).padStart(2,\"0\")}`.toUpperCase() : c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":356,"value":"hex2rgb = (t) => [\n\tparseInt(t.substring(1,3), 16) / 255,\n\tparseInt(t.substring(3,5), 16) / 255,\n\tparseInt(t.substring(5,7), 16) / 255,\n\tparseInt(t.substring(7,9) || \"FF\", 16) / 255,\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"md`A simplified approximation of the sRGB gamma function (note that in practice the sRGB is a bit more complicated than that), where *gamma(v,g=2.2)* takes a normalised value and applies the *gamma=2.2* transfer function, and *degamma(v,g=2.2)* is the inverse operation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"gamma = (_,g=2.2) => Math.pow(_, 1.0/g)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"degamma = (_,g=2.2) => Math.pow(_, g)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"md`And here are the specific sRGB gamma/degamma functions as defined in this thread: [*Formula to determine brightness of RGB color*](https://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color) (StackOverflow):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"degammasRGB = _ => _ <= 0.04045 ? _/12.92 : Math.pow( ( _ + 0.055) / 1.055, 2.4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"gammasRGB = _ => _ <= 0.0031308 ? _ * 12.92 : 1.055 * Math.pow(_, 1.0/2.4) - 0.055","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":721,"value":"md`Note that according to the [WCAG](https://www.w3.org/TR/WCAG21/#dfn-relative-luminance), the gamma expansion threshold is different in sRGB, from 0.04045 (what we have in *degammasRGB*) to 0.03928, however that difference should have a negligible impact.` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"md`The *Swatch* component displays an sRGB colour triple, with a tooltip containing its hex value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"Swatch = colour => style(html.span({_:\"swatch\",title:hex(colour)}), {\"background-color\":hex(colour)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"Stylesheet = ({\n \".palette\" : {\n columns: 1},\n \"label\":{\n \"font-family\":\"sans-serif\",\n \"font-size\":\"11px\"\n },\n \".color\" : {\n \"display\": \"flex\",\n \"align-items\": \"center\",\n \"margin-top\": \"0.25em\",\n \"margin-bottom\": \"0.25em\",\n \"text-transform\": \"capitalize\",\n \"break-inside\": \"avoid\"},\n \".swatch\" : {\n \"content\": \"\",\n\t \"display\": \"inline-block\",\n\t \"width\": \"1.25em\",\n\t \"height\": \"1.25em\",\n \"margin-bottom\": \"-0.35em\"}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":879,"value":"stylesheet(Stylesheet)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"percent = (()=>{\n const f = new Intl.NumberFormat('en-NZ', { style: 'percent'})\n return _ => f.format(_)\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"import {lerp,html,style,stylesheet,range,def,sprintf,sorted,keys,pipe} from \"@sebastien/boilerplate\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"