2b:null 2c:["$","title",null,{"children":"Color charts | Torben Jansen | Observable"}] 31:T635,md`# Color charts In 1966 [Gerhard Richter](https://en.wikipedia.org/wiki/Gerhard_Richter) began to work on a series of paintings based on color charts. Chance played its role in the creation of the first series of [Color charts](https://www.gerhard-richter.com/en/art/paintings/abstracts/colour-charts-12?sp=all): Richter had his friend Blinky Palermo randomly call out colors, which Richter then adopted for his work. Returning to color charts in the 1970s, Richter changed his focus and developed mathematical procedures for mixing colours and chance operations for their placement. Richters starting point were the four pure colors red, yellow, green and blue; their in-between shades and scales of brightness resulted in color schemes containing 16, 64, 256 and 1,024 shades. His work culminated in 1974 with a painting that consists of 4,096 color fields. Richter worked again on color charts in the 2000s when he developed his design for the [south transept window of Cologne Cathedral](https://www.gerhard-richter.com/en/art/other/glass-and-mirrors-105/cologne-cathedral-window-14890/). The work, which consists of approximately 11,500 squares of glass in 72 colours, was unveiled in 2007. I was always fascinated by Richter's color charts, they "tend towards total perfection and convey the idea of a practically endless number of possible pictures", as [Richter has put it once himself](https://www.gerhard-richter.com/en/quotes/subjects-2/colour-charts-8). So I wondered if it's possible to randomly generate colors and create images in the style of Richter's color charts.`32:Tc0d,viewof probabilityHue = { // setup const margin = { top: 10, right: 10, bottom: 20, left: 25 }; const svgWidth = Math.min(640, width); const svgHeight = svgWidth / 4; const svg = d3.select(DOM.svg(svgWidth, svgHeight)); const x = d3.scaleLinear() .domain([-2.5, 360]) .range([0, svgWidth - margin.left - margin.right]); const y = d3.scaleLinear() .domain([1, -0.025]) .range([0, svgHeight - margin.top - margin.bottom]) .clamp(true); const xAxis = d3.axisBottom(x) .ticks(svgWidth / 75) .tickSize(4); const yAxis = d3.axisLeft(y) .ticks(svgHeight / 50) .tickSize(4); const yTickLines = d3.axisLeft(y) .ticks(svgHeight / 50) .tickSize(-x(360) + x(0)); const line = d3.line() .x(d => d.x) .y(d => d.y); // data const data = [ { h: 0, p: 0.012, color: "#ff008a" }, { h: 30, p: 0.725, color: "#ff003a" }, { h: 60, p: 0.665, color: "#ff8400" }, { h: 90, p: 0.850, color: "#ffdd00" }, { h: 120, p: 0.125, color: "#a5ff00" }, { h: 150, p: 0.015, color: "#00ff8a" }, { h: 180, p: 0.020, color: "#00ffe0" }, { h: 210, p: 0.365, color: "#00eaff" }, { h: 240, p: 0.950, color: "#00c0ff" }, { h: 270, p: 0.855, color: "#008fff" }, { h: 300, p: 0.215, color: "#001aff" }, { h: 330, p: 0.016, color: "#ff00f0" }, { h: 360, p: 0.012, color: "#ff008a" } ]; const dots = data.map(d => ({ x: x(d.h), y: y(d.p), color: d.color })); const node = svg.node(); node.value = data; // draw const plot = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); plot.append('g') .attr('transform', `translate(0, ${svgHeight - margin.top - margin.bottom})`) .call(xAxis) .call(node => node.select(".domain").remove()); plot.append('g') .call(yAxis) .call(node => node.select(".domain").remove()); plot.append("g") .attr("transform", `translate(${x(0)}, 0)`) .call(yTickLines) .call(node => { node.select(".domain").remove(); node.selectAll("text").remove(); node.selectAll(".tick line") .attr("stroke", "#777") .attr("shape-rendering", "crispEdges"); node.selectAll(".tick:not(:first-of-type).tick:not(:last-of-type) line") .attr("stroke-dasharray", "2,2"); }); plot.append('path') .attr("id", "line") .attr("d", line(dots)) .attr("stroke", "black") .attr("stroke-dasharray", "6,4") .attr("fill", "none"); plot.selectAll("dots") .data(dots) .enter().append("circle") .attr('r', 4) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('stroke', 'grey') .attr('fill', d => d.color) .style("cursor", "move") .call(d3.drag() .on("drag", function(d, i) { let p = y.invert(d3.event.y); d3.select(this).attr('cy', d.y = y(p)); d3.select("#line").attr('d', line(dots)); node.value[i].p = p; node.dispatchEvent(new CustomEvent("input")); })); return node; }33:Tb0a,viewof probabilityLightness = { // setup const margin = { top: 10, right: 10, bottom: 20, left: 25 }; const svgWidth = Math.min(640, width); const svgHeight = svgWidth / 4; const svg = d3.select(DOM.svg(svgWidth, svgHeight)); const x = d3.scaleLinear() .domain([-0.005, 1]) .range([0, svgWidth - margin.left - margin.right]); const y = d3.scaleLinear() .domain([1, -0.025]) .range([0, svgHeight - margin.top - margin.bottom]) .clamp(true); const xAxis = d3.axisBottom(x) .ticks(svgWidth / 75) .tickSize(4); const yAxis = d3.axisLeft(y) .ticks(svgHeight / 50) .tickSize(4); const yTickLines = d3.axisLeft(y) .ticks(svgHeight / 50) .tickSize(-x(360) + x(0)); const line = d3.line() .x(d => d.x) .y(d => d.y); // data const data = [ { l: 0.0, p: 1.000 }, { l: 0.1, p: 0.676 }, { l: 0.2, p: 0.424 }, { l: 0.3, p: 0.244 }, { l: 0.4, p: 0.136 }, { l: 0.5, p: 0.100 }, { l: 0.6, p: 0.136 }, { l: 0.7, p: 0.244 }, { l: 0.8, p: 0.424 }, { l: 0.9, p: 0.676 }, { l: 1.0, p: 1.000 } ]; const dots = data.map(d => ({ x: x(d.l), y: y(d.p), color: `hsl(0, 0%, ${d.l * 100}%)` })); const node = svg.node(); node.value = data; // draw const plot = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); plot.append('g') .attr('transform', `translate(0, ${svgHeight - margin.top - margin.bottom})`) .call(xAxis) .call(node => node.select(".domain").remove()); plot.append('g') .call(yAxis) .call(node => node.select(".domain").remove()); plot.append("g") .attr("transform", `translate(${x(0)}, 0)`) .call(yTickLines) .call(node => { node.select(".domain").remove(); node.selectAll("text").remove(); node.selectAll(".tick line") .attr("stroke", "#777") .attr("shape-rendering", "crispEdges"); node.selectAll(".tick:not(:first-of-type).tick:not(:last-of-type) line") .attr("stroke-dasharray", "2,2"); }); plot.append('path') .attr("id", "line2") .attr("d", line(dots)) .attr("stroke", "black") .attr("stroke-dasharray", "6,4") .attr("fill", "none"); plot.selectAll("dots") .data(dots) .enter().append("circle") .attr('r', 4) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('stroke', 'grey') .attr('fill', d => d.color) .style("cursor", "move") .call(d3.drag() .on("drag", function(d, i) { let p = y.invert(d3.event.y) d3.select(this).attr('cy', d.y = y(p)); d3.select("#line2").attr('d', line(dots)); node.value[i].p = p; node.dispatchEvent(new CustomEvent("input")); })); return node; }34:T4d7,function colorchart() { let width = 100, height = 100, border = 0, color = () => d3.rgb(Math.random() * 255, Math.random() * 255, Math.random() * 255) function plot(nx, ny) { const ctx = DOM.context2d(width, height); const x = d3.scaleBand() .domain(Array.from({ length: nx }, (_, i) => i)) .range([0, width]); const y = d3.scaleBand() .domain(Array.from({ length: ny }, (_, i) => i)) .range([0, height]); ctx.translate(border, border); for(let i = 0; i < nx; i++) { for(let j = 0; j < ny; j++) { ctx.fillStyle = color(); ctx.fillRect(x(i), y(j), x.bandwidth() - border, y.bandwidth() - border) } } return ctx.canvas } plot.width = function(value) { if (!arguments.length) return width; width = value; return plot; }; plot.height = function(value) { if (!arguments.length) return height; height = value; return plot; }; plot.border = function(value) { if (!arguments.length) return border; border = value; return plot; } plot.color = function(value) { if (!arguments.length) return border; color = value; return plot; } return plot; }35:[] 2f:{"id":"ea63cea16f2e6cbf","slug":"color-charts","title":"Color charts","thumbnail":"a431d94cb20dcb700c457b0353bb87419bbf5af0018fb9e877aa51717d38caaa","access_level":"public","create_time":"$D2019-04-22T13:47:11.236Z","update_time":"$D2023-12-23T12:10:57.968Z","view_time":null,"first_public_time":"$D2019-04-28T15:39:43.420Z","fork":false,"stars":33,"starred":false,"owner":{"type":"team","id":"03836a98946da550","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":"starter_2024"},"version":1296,"publish_version":1296,"role":null,"authored":false,"authors":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null}],"members":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":15,"collection":{"id":"3a0b4a16f415a789","slug":"color","title":"Color","owner":{"id":"03836a98946da550","login":"toja","name":"Torben Jansen"}},"type":"notebook","body":{"title":"Color charts","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"html`

\n${colorchart()\n .width(640)\n .height(640)\n .border(6)\n .color(lchConstrained)\n (16, 16)}\n

256 colors

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":808,"value":"md`---\n## Picking random colors\n\nThe most obvious approach to create a set of random colors is probably to pick colors by chance from the [sRGB color space](https://en.wikipedia.org/wiki/RGB_color_space). It is based on an additive color model in which a color is specified according to the intensity of its red, green and blue components within a 0–1 range.\n\nIn web applications the red, green and blue components are usually represented by eight bits (0–255 range). Thus, there are 24 bits used for a color so that 16,777,216 different colors may be specified.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":655,"value":"html`

\n${colorchart()\n .width(Math.min(640, width))\n .height(Math.min(640, width) / (64 / 6))\n .color(rgbColor)\n (64, 6)}\n

Random RGB colors

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":844,"value":"md`Despite the amount of available colors, the result is quiet far away from what one could expect. Most of the colors tend to be very saturated and while most colors have a medium lightness, only a few dark and bright colors are generated.\n\nTo get a better distribution of colors in respect to saturation and lightness, one can pick colors from [HSL or HSV](https://en.wikipedia.org/wiki/HSL_and_HSV) instead of the sRGB color space. These color spaces are alternative representations of the RGB color model, where colors of each hue are arranged in a radial slice around a central axis of neutral colors which ranges from black at the bottom to white at the top.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":685,"value":"html`

\n${colorchart()\n .width(Math.min(640, width))\n .height(Math.min(640, width) / (64 / 6))\n .color(hslColor)\n (64, 6)}\n

Random HSL colors

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"html`

\n${colorchart()\n .width(Math.min(640, width))\n .height(Math.min(640, width) / (64 / 6))\n .color(hsvColor)\n (64, 6)}\n

Random HSV colors

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1026,"value":"md`While HSL and HSV are simple transformations of RGB which preserve symmetries in the RGB cube unrelated to human perception, the [CIELAB color space](https://en.wikipedia.org/wiki/CIELAB_color_space) is designed to approximate human vision. It aspires to perceptual uniformity, and its *L* component closely matches human perception of lightness.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1065,"value":"html`

\n${colorchart()\n .width(Math.min(640, width))\n .height(Math.min(640, width) / (64 / 6))\n .color(labColor)\n (64, 6)}\n

Random CIELAB colors

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1068,"value":"md`An alternative alternative representations of the CIELAB color space is the [LCH color space](https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_representation:_CIELCh_or_CIEHLC), that is designed to have characteristics of both cylindrical translations of the RGB color space, such as HSL and HSV, and the CIELAB color space.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":580,"value":"html`

\n${colorchart()\n .width(Math.min(640, width))\n .height(Math.min(640, width) / (64 / 6))\n .color(lchColor)\n (64, 6)}\n

Random LCH colors

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"md`LCH preserves the *L* (luminance) axis of a CIELAB color, but transforms the cartesian coordinates *a* and *b* to polar coordinates, where the distance from zero specifies the chroma *C*, and the angle the hue *H* of a color. Regardless the angle, C = 0 means the achromatic colors, that is, the gray axis.\n\nIt's important to note that the hues in LCH and HSL/HSV are not identical. HSL and HSV spaces use the three additive primary colors red, green, blue as primary colors. Instead, the LCH system uses the four colors yellow, green, blue and red.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1081,"value":"md`---\n## Tweaking colors\n\nAltough the LCH color space seems to be a reasonable starting point to pick random colors, there's room for improvement.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":849,"value":"html`

\n${colorchart()\n .width(Math.min(640, width))\n .height(Math.min(640, width) / (64 / 6))\n .color(lchConstrained)\n (64, 6)}\n

Constrained LCH colors

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1264,"value":"md`For example one might want to tweak the selection of colors by adjusting the probability that a color has a certain hue (drag the knobs to explore the effect):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1123,"value":"md`Or the probability of a color with a certain luminance:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1134,"value":"md`The possibilities to influence the final result next to these basic settings are of course endless. For instance one might want to keep colors of a certain hue in a specified range of chroma or lightness.\n\nA further optimization could be to calculate the perceived distances of the selected colors to make sure, that all colors are distinguishable from each other. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1139,"value":"md`---\n## Gallery`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":908,"value":"html`

\n${colorchart()\n .width(400)\n .height(300)\n .border(5)\n .color(lchConstrained)\n (3, 3)}\n

Color chart

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1178,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1180,"value":"html`

\n${colorchart()\n .width(400)\n .height(400)\n .border(12)\n .color(lchConstrained)\n (2, 6)}\n

12 colors

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1246,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1249,"value":"html`

\n${colorchart()\n .width(360)\n .height(480)\n .border(4)\n .color(lchConstrained)\n (12, 16)}\n

192 colors

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1172,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1198,"value":"html`

\n${colorchart()\n .width(width)\n .height(width / 2)\n .border(2)\n .color(lchConstrained)\n (32, 32)}\n

1024 colors

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1143,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":719,"value":"function rgbColor() {\n return d3.rgb(Math.random() * 255, Math.random() * 255, Math.random() * 255)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"function hslColor() {\n return d3.hsl(Math.random() * 360, Math.random(), Math.random())\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":689,"value":"function hsvColor() {\n return d3.hsv(Math.random() * 360, Math.random(), Math.random())\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1030,"value":"function labColor() {\n let color;\n do {\n color = d3.lab(Math.random() * 100, Math.random() * 320 - 160, Math.random() * 320 - 160);\n } while(!color.displayable());\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"function lchColor() {\n let color;\n do {\n color = d3.lch(Math.random() * 100, Math.random() * 140, Math.random() * 360);\n } while(!color.displayable());\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":665,"value":"function lchConstrained() {\n let color;\n do {\n color = d3.lch(Math.random() * 100, Math.random() * 140, Math.random() * 360)\n } while(\n !color.displayable()\n || Math.random() > getHueProbability(color.h, probabilityHue)\n || Math.random() > getLightnessProbability(color.l, probabilityLightness)\n );\n \n return color\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"// y = (y2 - y1) / (x2 - x1) * (x - x1) + y1\nfunction getHueProbability(hue, data) {\n const i = Math.floor(hue / 360 * (data.length - 1));\n return (data[i + 1].p - data[i].p) / (data[i + 1].h - data[i].h) * (hue - data[i].h) + data[i].p;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":468,"value":"function getLightnessProbability(lightness, data) {\n const i = Math.floor(lightness / 100 * (data.length - 1));\n return (data[i + 1].p - data[i].p) / (data[i + 1].l - data[i].l) * (lightness / 100 - data[i].l) + data[i].p;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3-selection@1\", \"d3-scale\", \"d3-axis\", \"d3-shape\", \"d3-drag@1\", \"d3-color@1\", \"d3-hsv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"