29:null 2a:["$","title",null,{"children":"Color charts | Torben Jansen | Observable"}] 2f: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.`30: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; }31: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; }32: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; }33:[] 2d:{"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","has_unpublished_edits":null,"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,"lapsed":null,"subscribed":null,"forks":15,"collection":{"id":"3a0b4a16f415a789","slug":"color","title":"Color","owner":{"id":"03836a98946da550","login":"toja","name":"Torben Jansen"}},"type":"notebook","body":{"titling":"auto","title":"Color charts","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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${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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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${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${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${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${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${colorchart()\n .width(400)\n .height(300)\n .border(5)\n .color(lchConstrained)\n (3, 3)}\n

Color chart

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

12 colors

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

192 colors

\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2e:"$2d:body"