2b:null 2c:["$","title",null,{"children":"Perceptually valid color scales | Joshua Tauberer | Observable"}] 31:T470,md`You’re probably familiar with RGB — the triple of red-green-blue color components that represents colors shown on computer monitors. Unfortunately math in “RGB space” isn’s perceptually valid. Dividing the green component in half doesn’t make a color half as green. Adding 50 to all of components makes the color brighter by uneven amounts depending on which color you start with. That’s because the sensitivity of human color perception is uneven across the gamut of colors we can see, and the definition of RGB used by computer monitors doesn’t follow human perceptual sensitivity. Color professionals have come up with alternative measurement systems for colors so that taking consistent arithmetic steps has a perceptually consistent effect. One such system replaces RGB with [CIE 1976 L*, u*, v* (CIE LUV) color space](https://en.wikipedia.org/wiki/CIELUV), and RGB’s cylindrical equivalent HSL with CIELCH. This page uses [Oklab LCh by Björn Ottosson](https://bottosson.github.io/posts/oklab/), which is an improvement over the 1970's-era standard color spaces and has a simple mathematical implementation.`32:Tb4c,make_scale = function(c1, c2, n) { // Construct a scale of d3color instances. //let colorspace = d3color.hcl; let colorspace = OklabHcl; let scale = []; for (var v = 0; v < n; v++) scale.push(interpolate_colors(c1, c2, v / (n - 1), colorspace)); // When forming a scale between two highly saturated colors, the colors // on the scale may leave the RGB gamut. Although we could clamp the // R, G, B components of the colors on the scale, this would result in // non-perceptually-uniform jumps on the scale. Better is to revise the // scale holistically. The easiest way to keep colors in the RGB gamut // is to reduce the chroma value of the colors. We'll reduce the chroma // values at the intermediate points on the scale smoothly, if necessary, // and, in case a large change in necessary, we'll also revise the end // points on the scale and return different colors than the user asked // for. We'll iterate a few times until we get to the minimal change that // keeps the scale within the RGB gamut using a bisection-like algorithm. let ctr = 0, s = 0, smin = 0, smax = .33; while (ctr < 10 && smin < .99 * smax) { let all_in_rgb_gamut = scale.map(reduce_chroma).filter(in_rgb_gamut).length == scale.length; if (all_in_rgb_gamut) { if (s == 0) break; smax = s; s = (s + smin) / 2; } else { smin = s; s = (s + smax) / 2; } ctr++; } scale = scale.map(reduce_chroma); function reduce_chroma(c, i) { // Reduce the chroma value of c by s when in the middle of the generated // color scale (0 < i < n) and not at the ends, because we assume the caller // has given ends that are in the RGB gamut, unless s is large and then // also reduce the color at the ends. let t = (i / (n - 1)) * Math.PI; let sm = .2; // 1 means do not modify end colors, 0 means shift all colors evenly including ends let s0 = s < sm ? 0 : s - sm; let s1 = Math.min(s, sm) * Math.sin(t); return colorspace(c.h, Math.max(0, c.c * (1 - (s0 + s1))), c.l); } function in_rgb_gamut(c) { var crgb = c.rgb(); return !( crgb.r < 0 || crgb.r > 255 || crgb.g < 0 || crgb.g > 255 || crgb.b < 0 || crgb.b > 255 ); } // Return a data structure with helpful info besides the interpolated // color. function bwcontrast(c) { // Choose a light or dark grey for a foreground // text color that will be most contrast-y with // then given color. c = d3color.hcl(c.rgb()); if (c.l < 60) c.l = 93; // white-ish else c.l = 7; // black-ish c.c /= 5; // reduce chroma (saturation) return c; } return scale.map(c => { return { color: c, rgb: c.rgb(), css: c.rgb().toString(), hex: c.rgb().formatHex(), fg_contrast_color: bwcontrast(c).toString() }; }); }33:T9a2,Oklab = function(c) { // Oklab is a non-standard color space designed by Björn Ottosson // and described at https://bottosson.github.io/posts/oklab/. It // is easily convertible to/from RGB. This method returns a function // compatible with e.g. d3color.rgb. It accepts either three arguments // (L, a, and b) or a d3color convertible to RGB. let linear_srgb_to_oklab = function(c) { let l = 0.4121656120 * c.r + 0.5362752080 * c.g + 0.0514575653 * c.b; let m = 0.2118591070 * c.r + 0.6807189584 * c.g + 0.1074065790 * c.b; let s = 0.0883097947 * c.r + 0.2818474174 * c.g + 0.6302613616 * c.b; let l_ = Math.cbrt(l); let m_ = Math.cbrt(m); let s_ = Math.cbrt(s); return { l: 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_, a: 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_, b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_ }; }; let oklab_to_linear_srgb = function(lab) { let l_ = lab.l + 0.3963377774 * lab.a + 0.2158037573 * lab.b; let m_ = lab.l - 0.1055613458 * lab.a - 0.0638541728 * lab.b; let s_ = lab.l - 0.0894841775 * lab.a - 1.2914855480 * lab.b; let l = l_ * l_ * l_; let m = m_ * m_ * m_; let s = s_ * s_ * s_; return { r: +4.0767245293 * l - 3.3072168827 * m + 0.2307590544 * s, g: -1.2681437731 * l + 2.6093323231 * m - 0.3411344290 * s, b: -0.0041119885 * l - 0.7034763098 * m + 1.7068625689 * s }; }; let srgb_to_linear_srgb = function(rgb) { function f(x) { if (x >= 0.04045) return ((x + 0.055) / (1 + 0.055)) ** 2.4; else return x / 12.92; } return { r: f(rgb.r / 255) * 255, g: f(rgb.g / 255) * 255, b: f(rgb.b / 255) * 255 }; }; let linear_srgb_to_srgb = function(rgb) { function f(x) { if (x >= 0.0031308) return (1.055 * x) ** (1.0 / 2.4 - 0.055); else return 12.92 * x; } return { r: f(rgb.r / 255) * 255, g: f(rgb.g / 255) * 255, b: f(rgb.b / 255) * 255 }; }; let Lab; if (arguments.length == 3) { Lab = { l: arguments[0], a: arguments[1], b: arguments[2] }; } else { // Convert from a d3color via RGB. c = d3color.rgb(c); Lab = linear_srgb_to_oklab(srgb_to_linear_srgb(c)); } Lab.rgb = function() { let rgb = linear_srgb_to_srgb(oklab_to_linear_srgb(this)); return d3color.rgb(rgb.r, rgb.g, rgb.b); }; return Lab; }34:T50f,OklabHcl = function(clr) { // Returns a function compatible with d3color.lch. // It accepts either three arguments (L, c, and h) // or a d3color convertible to RGB. The L and c // components are scaled to be similar to the scale // of d3color.lch which is [0,100], [0,250ish], and // [0,360]. let L, c, h; if (arguments.length == 3) { h = arguments[0]; c = arguments[1]; L = arguments[2]; } else { // Convert from a d3color via Oklab. // Apply a gamma correction because near-black colors // take up too much of the color space. (Is this a problem // with Oklab or the linear-to-regular RGB transformation?) let lab = Oklab(clr); L = (lab.l / 6.341251097100847) * 100; L = (Math.max(L, 0) / 100) ** 2.5 * 100; // GAMMA CORRECTION ^ c = Math.sqrt(lab.a ** 2 + lab.b ** 2) * 100; h = (Math.atan2(lab.b, lab.a) * 180) / Math.PI; } return { l: L, c: c, h: h, rgb: function() { // Convert to RGB via Oklab. let l = (this.l / 100) ** (1 / 2.5) * 100; // GAMMA CORRECTION ^ let lab = Oklab( (l / 100) * 6.341251097100847, (this.c * Math.cos((this.h * Math.PI) / 180)) / 100, (this.c * Math.sin((this.h * Math.PI) / 180)) / 100 ); return lab.rgb(); } }; }35:Tb24,interpolate_colors = function(c1, c2, v, colorspace) { // Interpolate to find a color between c1, c2 at v in the range [0, 1]. // If v == 0, c1 is returned. If v == 1, c2 is returned. // // c1 and c2 are d3colors or anything convertible to a d3color via d3color.lch. // See: https://github.com/d3/d3-color#color // // A d3.color is returned. Use .toString() or .formatHex() to get a CSS color. // // A linear-like interpolation is performed in a Lch color space. // The interpolation is non-linear when c1 or c2 is grey because hue is // undefined or unstable in that part of the color space, and for black/white // chroma (saturation) is too. // Convert to Lch space using the color space provide as the argument // to this function. It can be d3color.lch (CIELCHab) or OklabLch. c1 = colorspace(c1); c2 = colorspace(c2); if (c1 == null || !isFinite(c1.l)) throw "First color did not convert: " + JSON.stringify(c1); if (c2 == null || !isFinite(c2.l)) throw "Second color did not convert: " + JSON.stringify(c2); // Check that we're going the right way in hues. // We might want to go through 360 instead of // going back toward zero. d3color's lch function // returns NaN hues at black and white, so check for // that first. if (isFinite(c1.h) && isFinite(c2.h)) { if (c2.h < c1.h - 180) c2.h += 360; if (c1.h < c2.h - 180) c1.h += 360; } // We always interpolate the lightness and chroma value linearly // between the two colors. But when chroma is zero (or very close), // at black, graey, and white, hue has no meaning. The hue value // for these colors may be NaN or meaningless, and an interpolation // with NaN or a meaningless hue will be meaningless. In these // cases we interpolate the hue differently --- we either keep the // hue value of the color that is not at chroma=0 or we pull the // hue toward the color that is not very close to chroma=0 so that // we ease into a hue that is less meaningful. function min(a, b) { return a > b ? b : a; } function max(a, b) { return a < b ? b : a; } function safepow(a, b) { return isFinite(b) ? a ** b : 0; } let vh = v; if (c1.c < 10) vh = v ** max(c1.c / 10, 0); if (c2.c < 10) vh = safepow(v, 1 / max(c2.c / 10, 0)); // Interpolate and re-form a new color instance. let c = colorspace( (1 - vh) * c1.h + vh * c2.h, (1 - v) * c1.c + v * c2.c, (1 - v) * c1.l + v * c2.l ); // Clamp chroma very near the poles (only) since at the poles // of the bi-cone that makes up the Lch space the chroma // and hue values have no meaning and may convert to RGB // outside of the RGB space, resulting in poor clamping // later. var ll = Math.max(0, Math.min(c.l, 100 - c.l, 100)); c.c = Math.min(c.c, 1000 * Math.tan((ll / 100) * Math.PI)); return c; }36:[] 2f:{"id":"c8e2938f3d8b758b","slug":"perceptually-valid-color-scales","title":"Perceptually valid color scales","thumbnail":"0c975685c5ccc986d68d6f6c56decd8c5e0a62bb9dd7b85516b10e5b1a92c8c5","access_level":"public","create_time":"$D2020-04-23T15:00:25.834Z","update_time":"$D2020-12-30T00:24:31.769Z","view_time":null,"first_public_time":"$D2020-04-23T15:38:43.050Z","fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"3cc0544d945280df","login":"joshdata","name":"Joshua Tauberer","avatar_url":"https://avatars-next.observableusercontent.com/23f321da9d33f284e304c0e431319273b3486b9aeb1973d8c6145a355a4fa270","tier":"starter_2024"},"version":1512,"publish_version":1512,"role":null,"authored":false,"authors":[{"type":"individual","id":"03d2d6a8a50e0307","login":"joshdata","name":"Joshua Tauberer","avatar_url":"https://avatars-next.observableusercontent.com/23f321da9d33f284e304c0e431319273b3486b9aeb1973d8c6145a355a4fa270","tier":null}],"members":[{"type":"individual","id":"03d2d6a8a50e0307","login":"joshdata","name":"Joshua Tauberer","avatar_url":"https://avatars-next.observableusercontent.com/23f321da9d33f284e304c0e431319273b3486b9aeb1973d8c6145a355a4fa270","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"566a4422ce29ab29","slug":"reusable-components","title":"Reusable Components","owner":{"id":"3cc0544d945280df","login":"joshdata","name":"Joshua Tauberer"}},"type":"notebook","body":{"title":"Perceptually valid color scales","cells":[{"id":0,"value":"md`# Perceptually valid color scales\n\nThis notebook creates perceptually valid color scales for continuous variables.\n\nThere are lots of color scale generators on the web. This one generates scales for continuous variables based on human color perception so that neighboring colors have equal separation in both hue and lightness (includng no separation). Lightness steps are important because not everyone can discriminate hues the same way.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"md`### Here are some examples:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":930,"value":"md`Here's are some smooth interpolations between two colors that takes equal steps in lightness, saturation, and hue from color to color:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"show_scale(make_scale(\"#d6191b\", \"#f0b6d9\", 11));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1440,"value":"show_scale(make_scale(\"#de3e3b\", \"#ffffd4\", 11))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":941,"value":"md`Or just equal steps in saturation and lightness:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1328,"value":"show_scale(make_scale(\"#FFFFFF\", \"#2233FF\", 11)) // test lightness=100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1365,"value":"md`Or just steps in lightness if the colors do not exceed full saturation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1367,"value":"show_scale(make_scale(\"#2278ee\", \"#2222aa\", 11)) // test lightness=100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1331,"value":"md`Or just steps in hue:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"show_scale(make_scale(\"#b91513\", \"#4455d4\", 11)) // test lightness=100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"md`To make a divergent scale or one that takes a curved path through the color space, just concatenate two scales (but remove the duplicate color in the middle):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":356,"value":"show_scale(make_divergent_scale('#d6191b', '#fefec4', '#2c7bb6', 12, true))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":936,"value":"md`It also comes out nice if you ensure the middle color has exactly the average lightness of the end colors:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"show_scale(make_divergent_scale('black', '#1166aa', 'white', 12))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":945,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":948,"value":"md`### Make your own scale:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"viewof c1 = color()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"viewof c2 = color(\"#ff0000\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"viewof n = slider({ min: 3, max: 20, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"show_scale(make_scale(c1, c2, n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":961,"value":"md`### More examples:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":966,"value":"{\n let color1 = [\"#d7191c\", \"#d01c8b\", \"#000000\"];\n let color2 = [\n \"#fdae61\",\n \"#f1b6da\",\n \"#abdda4\",\n \"#abd9e9\",\n \"#E5E5E5\",\n \"#FFFFFF\"\n ];\n let color3 = [null, \"#1a9641\", \"#2c7bb6\", \"#000000\"];\n let table = DOM.element(\"div\");\n color1.forEach(c1 => {\n color2.forEach(c2 => {\n color3.forEach(c3 => {\n let s;\n if (c3 == null) s = make_scale(c1, c2, 11);\n else s = make_divergent_scale(c1, c2, c3, 11);\n table.appendChild(show_scale(s));\n });\n });\n });\n return table;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"md`## Code:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"make_divergent_scale = function(c1, c2, c3, n, allow_lightnesss_change) {\n if (!allow_lightnesss_change) {\n // Ensure c2 is mid-way between c1 and c3 on the lightness dimension\n // so that we guarantee equal lightness steps on both sides of the scale.\n c1 = d3color.hcl(c1);\n c2 = d3color.hcl(c2);\n c3 = d3color.hcl(c3);\n c2.l = (c1.l + c3.l) / 2;\n }\n\n let scale1 = make_scale(c1, c2, parseInt(n / 2 + .5));\n let scale2 = make_scale(c2, c3, parseInt(n / 2 + .5));\n scale2.shift(); // first entry is c2 which is last entry of first scale\n return scale1.concat(scale2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"show_scale = function(scale) {\n let table = DOM.element(\"div\");\n scale.forEach(c => {\n let cell = DOM.element(\"span\");\n table.appendChild(cell);\n cell.setAttribute(\"style\", \"display: inline-block; background-color: \" + c.css + \"; color: \" + c.fg_contrast_color + \"; padding: 2em 6px 3px 6px; font-size: 75%; font-family: var(--monospace, mono, monospace);\");\n cell.appendChild(DOM.text(c.hex.replace(/#/, '')));\n });\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"d3color = require(\"d3-color\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"import {slider} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"