28:null 29:["$","title",null,{"children":"Contrast in sequential color scales; comparing color modes | Jonatan Hildén | Observable"}] 2e:T4f2,{ let c_d = chroma.hex(c_darken[c_darken.length-1]) let ch = [chroma.hex(c_darken[c_darken.length-1])] let cContrast = [[c_d.hex(), wcag.hex(ch[0].hex(), '#fff')]] let counter for (let index = 0; index < 2; ++index) { c_d = ch[index] counter = 0 if(wcag.hex(ch[index].hex(), c_d.hex())<3){ while (counter<20 & (wcag.hex(ch[index].hex(), c_d.hex())<3) ) { c_d = c_d.darken(0.1) counter +=1 } ch.push(c_d) cContrast.push([c_d.hex(), wcag.hex(ch[index].hex(), c_d.hex())]) } } console.log(cContrast) const svg = d3.create('svg').attr('width', width).attr('height', 150); const group = svg.selectAll().data(cContrast).enter().append('g') group.append('rect') .attr('width', 60) .attr('height', 60) .attr('fill', function(d) { return d[0];}) .attr('x', function(d,i) { return 60*i; }) .attr('stroke','black') group.append('text') .attr('x', function(d,i) { return 60*i; }) .attr('y', 75) .attr('font-size', 14) .text(function(d) { return `${d[0]}`;}) group.append('text') .attr('x', function(d,i) { return 60*i; }) .attr('y', 95) .attr('font-size', 14) .text(function(d) { return `${d[1].toFixed(2)}`;}) return svg.node(); }2f:T5ec,{ const lchCulori = culori.converter('lch'); const rotated_hue = lchCulori(color_to_rotate) rotated_hue.h += hue_angle const clrs = [color_to_rotate, culori.formatHex(rotated_hue)] const rotated_hue_chroma = chroma(color_to_rotate).lch() rotated_hue_chroma[2]+=hue_angle const clrs_chromajs = [color_to_rotate, chroma.lch(rotated_hue_chroma).hex()] const svg = d3.create('svg').attr('width', width).attr('height', 200); const group = svg.selectAll().data(clrs).enter().append('g') const groupChroma = svg.selectAll().data(clrs_chromajs).enter().append('g') group.append('rect') .attr('width', 60) .attr('height', 60) .attr('fill', function(d) { return culori.displayable(d) ? culori.formatHex(d): 'none';}) .attr('x', function(d,i) { return 60*i; }) .attr('y', 0) .attr('stroke','black') group.append('text') .attr('x', function(d,i) { return 60*i; }) .attr('y', 55) .attr('font-size', 14) .text(function(d) { return `${culori.formatHex(d)}`;}) groupChroma.append('rect') .attr('width', 60) .attr('height', 60) .attr('fill', function(d) { return chroma(d).clipped() ? 'none': chroma(d).hex();}) .attr('x', function(d,i) { return 60*i; }) .attr('y', 60) .attr('stroke','black') groupChroma.append('text') .attr('x', function(d,i) { return 60*i; }) .attr('y', 115) .attr('font-size', 14) .text(function(d) { return `${chroma(d).hex()}`;}) return svg.node();}30:[] 2c:{"id":"04eb0dc1bba36767","slug":null,"title":"Contrast in sequential color scales; comparing color modes","thumbnail":"debf8bd79143942842aa111f13bcf66e5bfc2c32c66cd532288abd4fed806d4c","access_level":"public","create_time":"$D2022-02-03T11:16:31.279Z","update_time":"$D2022-11-24T20:51:24.356Z","view_time":null,"first_public_time":"$D2022-11-24T09:08:08.096Z","has_unpublished_edits":null,"fork":{"id":"5ebea98e762094b2","slug":null,"title":"Contrast in sequential color scales","owner":{"id":"f68715fc404b4f1d","login":"hjhilden","name":"Jonatan Hildén"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f68715fc404b4f1d","login":"hjhilden","name":"Jonatan Hildén","avatar_url":"https://avatars-next.observableusercontent.com/af457924bfd3035b839251d8734a533c11ea8f05b54e2e971e892a1fbaf10992","tier":"starter_2024"},"version":982,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"19f39c9c4d9fb475","login":"hjhilden","name":"Jonatan Hildén","avatar_url":"https://avatars-next.observableusercontent.com/af457924bfd3035b839251d8734a533c11ea8f05b54e2e971e892a1fbaf10992","tier":null}],"members":[{"type":"individual","id":"19f39c9c4d9fb475","login":"hjhilden","name":"Jonatan Hildén","avatar_url":"https://avatars-next.observableusercontent.com/af457924bfd3035b839251d8734a533c11ea8f05b54e2e971e892a1fbaf10992","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Contrast in sequential color scales; comparing color modes","cells":[{"id":0,"value":"# Contrast in sequential color scales; comparing color modes\nIs it possible to make a color scale with lightness variation, where each step satisfies the 3:1 WCAG contrast requirement relative to white *and* the preceding step?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":392,"value":"acpa = import('https://cdn.skypack.dev/apca-w3@0.1.2?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"wcag = require('wcag-contrast')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"chroma = require('chroma-js')\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"culori = require('culori')\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"Adjust selected color with `color.darken` until it satisfies 3:1 contrast to white.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"viewof color = html ``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"c_darken = {let c = chroma.hex(color)\n let ch = [c.hex()]\n while (wcag.hex(c.hex(), '#fff')<3) {\n c = c.darken(.25)\n ch.push(c.hex())\n }\n return ch}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"{\n let c = chroma.hex(color)\n let ch = [c.hex()]\n while (wcag.hex(c.hex(), '#fff')<3) {\n c = c.darken(0.1)\n ch.push(c.hex())\n }\n\n const svg = d3.create('svg').attr('width', width).attr('height', 50); \n svg.selectAll().data(ch).enter().append('rect')\n .attr('width', 50)\n .attr('height', 50)\n .attr('fill', function(d) { return d;})\n .attr('x', function(d,i) { return 50*i; })\n .attr('stroke','black') \n return svg.node();\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"Took ${c_darken.length-1} steps to find darker outline color:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"{\n \n \n const svg = d3.create('svg').attr('width', width).attr('height', 58); \n svg.append('rect')\n .attr('width', 50)\n .attr('height', 50)\n .attr('fill', color)\n .attr('x', 4)\n .attr('y', 4)\n .attr('stroke',c_darken[c_darken.length-1])\n .attr('stroke-width','4px') \n\n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"html `

adjusted color:
${c_darken[c_darken.length-1]}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"### Three-step lightness scale\n_hex value and contrast to preceding color_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"viewof l = Inputs.range([0, 100], {value: 50, step: 0.1, label: \"L\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"viewof c = Inputs.range([0, 170], {value: 50, step: 0.1, label: \"C\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"viewof h = Inputs.range([0, 360], {value: 60, step: 0.1, label: \"H\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"{\n const modes = [\"lch\", \"lchuv\"]\n \n const baseColor = {\n l: l,\n c: c,\n h: h,\n mode: \"lch\"\n};\n\n const clrs = modes.map( d =>{\n return {l:l, c:c, h:h, mode:d }\n }\n )\n \n const svg = d3.create('svg').attr('width', width).attr('height', 150); \n const group = svg.selectAll().data(clrs).enter().append('g')\n \n group.append('rect')\n .attr('width', 60)\n .attr('height', 60)\n .attr('fill', function(d) { return culori.formatHex(d);})\n .attr('x', function(d,i) { return 60*i; })\n .attr('stroke','black')\n group.append('text')\n .attr('x', function(d,i) { return 60*i; })\n .attr('y', 75)\n .attr('font-size', 14)\n .text(function(d) { return `${culori.formatHex(d)}`;})\n \n \n return svg.node();\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"viewof color1 = html ``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"viewof okL = Inputs.range([0, 0.999], {value: 0.49, step: 0.001, label: \"Lightness\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"viewof okC = Inputs.range([0, 0.322], {value: 0.1, step: 0.001, label: \"Chroma\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"viewof okH = Inputs.range([0, 360], {value: 50, step: 0.1, label: \"Hue\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"viewof steps = Inputs.range([0, 20], {value: 5, step: 1, label: \"Steps\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"### Color ramp viewer function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":847,"value":"{return culori.lab(color1)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"function clrRampLab(steps, rng=[0,100], color, mode='lab'){ \n\n const s = d3.scaleLinear().range(rng).domain([0,steps])\n const clr = culori.lab(color)\n const clrs = []\n for (let i = 0; i < steps; ++i) {\n let l = s(i)\n clrs.push({l:l, a:clr.a, b:clr.b, mode:mode })\n }\n \n return clrs\n }\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"function clrRamp(steps, rng=[okL,0.999], chroma=okC, hue=okH, mode='oklch'){ \n\n const s = d3.scaleLinear().range(rng).domain([0,steps])\n\n const clrs = []\n for (let i = 0; i < steps; ++i) {\n let l = s(i)\n clrs.push({l:l, c:chroma, h:hue, mode:mode })\n }\n \n return clrs\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"function clrRampViewer(clrs) {\n let clrs_converted\n // check if color is culori or chroma.js\n if (clrs[0].mode!=undefined) {\n clrs_converted = clrs.map( (d) => {\n return culori.displayable(d) ? culori.formatHex(d): 'none';\n })\n }\n else {\n clrs_converted = clrs.map( (d) => {\n return d.clipped() ? 'none': d.hex();\n })\n }\n \n const svg = d3.create('svg').attr('width', width).attr('height', 90); \n const group = svg.selectAll().data(clrs_converted).enter().append('g')\n \n group.append('rect')\n .attr('width', 60)\n .attr('height', 60)\n .attr('fill', function(d) { return d})\n .attr('x', function(d,i) { return 60*i; })\n .attr('stroke','black')\n group.append('text')\n .attr('x', function(d,i) { return 60*i; })\n .attr('y', 75)\n .attr('font-size', 14)\n .text(function(d) { return `${d}`;})\n \n \n return svg.node();\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"lab_ramp = clrRampLab(steps, [0,100], color1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"clrRampViewer(lab_ramp)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"oklch_ramp = clrRamp(steps, [okL,0.999], okC, okH, 'oklch')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"clrRampViewer(oklch_ramp)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"Plot.plot({\n // Pass in an array of desired marks\n marks: [\n // Create a line mark\n Plot.line(oklch_ramp, {\n x: oklch_ramp.map( (d, i)=>{ return i}), // feature for the x channel\n y: \"l\" // feature for the y channel\n }),\n \n ]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"clrRamp(steps, [l,100], c, h, 'lch')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"# culori ramp interpolation test","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":671,"value":"viewof rampColor1 = Inputs.color({label: \"Input Color 1\", value: \"#d6e9ff\"}) // #fbbf24 #60a5fa","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"viewof rampColor2 = Inputs.color({label: \"Input Color 2\", value: \"#54f434\"}) // #fbbf24 #60a5fa","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"function clrRampInterpolatorChroma(c1, c2, steps){ \n\n const s = d3.scaleLinear().range([0,1]).domain([0,steps])\n\n let my_interpolator = chroma.scale([c1, c2]).mode('lch');\n\n const clrs = []\n for (let i = 0; i < steps; ++i) {\n clrs.push(my_interpolator(s(i)))\n }\nreturn clrs}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"function clrRampInterpolatorCulori(c1, c2, steps){ \n\n const s = d3.scaleLinear().range([0,1]).domain([0,steps])\n\n let my_interpolator = culori.interpolate([c1, c2], 'lch', {\n\t// spline instead of linear interpolation:\n h:culori.interpolatorSplineNatural\n});\n\n const clrs = []\n for (let i = 0; i < steps; ++i) {\n clrs.push(my_interpolator(s(i)))\n }\nreturn clrs}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"chroma_ramp = clrRampInterpolatorChroma(rampColor1, rampColor2, 5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"{return chroma_ramp[1].clipped()}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"culori_ramp = clrRampInterpolatorCulori(rampColor1, rampColor2, 5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"clrRampViewer(chroma_ramp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"clrRampViewer(culori_ramp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"Plot.plot({\n width:300,\n height:200,\n y: {domain: [0, 100]},\n // Pass in an array of desired marks\n marks: [\n // Create a line mark\n Plot.line(culori_ramp, {\n x: culori_ramp.map( (d, i)=>{ return i}), // feature for the x channel\n y: \"l\" // feature for the y channel\n }),\n Plot.dot(culori_ramp, {\n x: culori_ramp.map( (d, i)=>{ return i}), // feature for the x channel\n y: \"l\", // feature for the y channel,\n fill: culori_ramp.map( (d)=>{ \n return culori.formatHex(d)}),\n r:10\n })\n ]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"Plot.plot({\n width:300,\n height:200,\n y: {domain: [0, 80]},\n // Pass in an array of desired marks\n marks: [\n // Create a line mark\n Plot.line(culori_ramp, {\n x: culori_ramp.map( (d, i)=>{ return i}), // feature for the x channel\n y: \"c\" // feature for the y channel\n }),\n Plot.dot(culori_ramp, {\n x: culori_ramp.map( (d, i)=>{ return i}), // feature for the x channel\n y: \"c\", // feature for the y channel,\n fill: culori_ramp.map( (d)=>{ \n return culori.formatHex(d)}),\n r:10\n })\n ]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"clrRampChroma(steps, [l, 100], c, h)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"function clrRampChroma(steps, rng=[l,100], c=c, h=h){ \n\n const s = d3.scaleLinear().range(rng).domain([0,steps])\n\n const clrs = []\n for (let i = 0; i < steps; ++i) {\n clrs.push(chroma.lch(s(i), c, h))\n }\n\n \n const svg = d3.create('svg').attr('width', width).attr('height', 90); \n const group = svg.selectAll().data(clrs).enter().append('g')\n \n group.append('rect')\n .attr('width', 60)\n .attr('height', 60)\n .attr('fill', function(d) { return d.hex();})\n .attr('x', function(d,i) { return 60*i; })\n .attr('stroke','black')\n group.append('text')\n .attr('x', function(d,i) { return 60*i; })\n .attr('y', 75)\n .attr('font-size', 14)\n .text(function(d) { return `${d.hex()}`;})\n \n \n return svg.node();\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"viewof colorA = html ``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"viewof colorB = html ``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"`delta E, color A and B: ${chroma.deltaE(colorA, colorB).toFixed(2)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"viewof blendmode = Inputs.select([\"darken\", \"lighten\", \"multiply\", \"screen\"], {value: \"multiply\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"## Blend colors in Culori: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"{\n const AB = culori.blend(\n\t[colorA, colorB],\n\tblendmode, 'rgb'\n)\n const clrs = [colorA, AB, colorB]\n\nconst svg = d3.create('svg').attr('width', width).attr('height', 90); \n const group = svg.selectAll().data(clrs).enter().append('g')\n \n group.append('rect')\n .attr('width', 60)\n .attr('height', 60)\n .attr('fill', function(d) { return culori.displayable(d) ? culori.formatHex(d): 'none';})\n .attr('x', function(d,i) { return 60*i; })\n .attr('stroke','black')\n group.append('text')\n .attr('x', function(d,i) { return 60*i; })\n .attr('y', 75)\n .attr('font-size', 14)\n .text(function(d) { return `${culori.formatHex(d)}`;})\n \n \n return svg.node();}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"## Blend colors in Chroma.js: ${blendmode}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"{\n const AB = chroma.blend(colorA, colorB,\n\tblendmode,\n)\n const clrs = [colorA, AB, colorB]\nconst size = 80\nconst svg = d3.create('svg').attr('width', width).attr('height', size*1.5); \n const group = svg.selectAll().data(clrs).enter().append('g')\n \n group.append('rect')\n .attr('width', size)\n .attr('height', size)\n .attr('fill', function(d) { return chroma(d).clipped() ? 'none': chroma(d).hex();})\n .attr('x', function(d,i) { return size*i; })\n .attr('stroke','black')\n group.append('text')\n .attr('x', function(d,i) { return size*i; })\n .attr('y', size+15)\n .attr('font-size', 6)\n .attr('font-family', 'Source Code pro')\n .text(function(d) { return `${chroma(d).gl().map((d)=>{return d.toFixed(2)})}`;})\n \n \n return svg.node();}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"## mix colors ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":871,"value":"viewof colormode = Inputs.select([\"rgb\", \"lab\", \"lch\", \"lrgb\"], {value: \"lab\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"{\n const AB = chroma.mix(colorA, colorB, 0.5,\n\tcolormode\n)\n const clrs = [colorA, AB, colorB]\nconst size = 80\nconst svg = d3.create('svg').attr('width', width).attr('height', size*1.5); \n const group = svg.selectAll().data(clrs).enter().append('g')\n \n group.append('rect')\n .attr('width', size)\n .attr('height', size)\n .attr('fill', function(d) { return chroma(d).clipped() ? 'none': chroma(d).hex();})\n .attr('x', function(d,i) { return size*i; })\n .attr('stroke','black')\n group.append('text')\n .attr('x', function(d,i) { return size*i; })\n .attr('y', size+15)\n .attr('font-size', 11)\n .attr('font-family', 'Source Code pro')\n .text(function(d) { return `${chroma(d).gl().map((d)=>{return d.toFixed(2)})}`;})\n \n \n return svg.node();}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"viewof color_to_rotate = html ``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"color_to_rotate_lch = {return chroma(color_to_rotate).lch()}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"viewof hue_angle = Inputs.range([0, 360], {value: color_to_rotate_lch[2], step: 0.1, label: \"Hue angle\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"viewof chroma_adjust = Inputs.range([0, 150], {value: color_to_rotate_lch[1], step: 0.1, label: \"Chroma\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"viewof lightness_adjust = Inputs.range([0, 150], {value: color_to_rotate_lch[0], step: 0.1, label: \"Lightness\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"colorResult = {\nconst rotated_hue_chroma = [lightness_adjust, chroma_adjust, hue_angle]\n\n const dE = chroma.deltaE(chroma.lch(rotated_hue_chroma).hex(), color_to_rotate)\n const cR = chroma.contrast(chroma.lch(rotated_hue_chroma).hex(), color_to_rotate)\n const lC = acpa.APCAcontrast(acpa.sRGBtoY(chroma.lch(rotated_hue_chroma).rgb()), acpa.sRGBtoY(chroma(color_to_rotate).rgb()))\n return {clr1_lhc:color_to_rotate_lch, clr1:chroma(color_to_rotate), clr_lhc2:rotated_hue_chroma, clr2:chroma.lch(rotated_hue_chroma), deltaE: dE, wcag: cR, acpa:lC}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"{const clrs =[colorResult.clr1, colorResult.clr2]\n\n const svg = d3.create('svg').attr('width', width).attr('height', 200); \n const group = svg.selectAll().data(clrs).enter().append('g')\n\n group.append('rect')\n .attr('width', 60)\n .attr('height', 60)\n .attr('fill', function(d) { return chroma(d).clipped() ? 'none': chroma(d).hex();})\n .attr('x', function(d,i) { return 60*i; })\n .attr('y', 60)\n\n .attr('stroke','black')\n group.append('text')\n .attr('x', function(d,i) { return 60*i; })\n .attr('y', 115)\n .attr('font-size', 14)\n .text(function(d) { return `${chroma(d).hex()}`;})\n \n \n return svg.node();}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"## Hue angle in Culori vs. Chroma","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":461,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"{return acpa.APCAcontrast(acpa.sRGBtoY(chroma('#fff').rgb()), acpa.sRGBtoY(chroma('#000').rgb()))}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"{const list = ['a', 'b', 'c']\n let s ='\\n'\n\nlist.forEach((entryX, i)=>{\n list.forEach((entryY, j)=> {\nif(j>=i) {s+= `${entryX} ${entryY} ${i} ${j} `} else {s+='xxxxxxx '}}\n )\ns+='\\n'\n \n})\nreturn s}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"chroma.blend(chroma(colorA), chroma(colorB), 'multiply').hex()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"# Delta E testing\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":894,"value":"chroma.deltaE(\"#a6b5ad\", \"#88c270\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"Compare color ramps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":901,"value":"colorArrayHSL = {let myColor = chroma('#4a6d7b').hsl()\nlet colorArray =[chroma('#4a6d7b')]\n for (let i = 1; i < 3; ++i) {\n myColor[2] +=0.3 \n colorArray[i] = chroma.hsl(myColor)\n }\nreturn colorArray}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"colorArrayHCL = {\n let myColor = chroma('#4a6d7b').lch()\nconst colorArray =[chroma('#4a6d7b')]\n for (let i = 1; i < 3; ++i) {\n myColor[0]+=30\n colorArray[i] = chroma.lch(myColor)\n }\nreturn colorArray}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"{return chroma.hcl(chroma('#4a6d7b').hcl())}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"clrRampViewer(colorArrayHSL)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"myCanvas = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":" { // Faster but doesn't allow per-pixel jittering\n const width =555\n const height = 128\n const samples = [] \n\n for (let i = 0; i < 100; ++i) {\n samples[i] = chroma.lch([i, 44, 11])\n }\n var canvas = document.getElementById(\"myCanvas\");\n\n\n const imgCtx = canvas.getContext('2d');\n for (let x = 0; x < samples.length; x++) {\n let color = samples[x];\n let [ R, G, B ] = color.rgb();\n imgCtx.fillStyle = `rgb(${R}, ${G}, ${B})`;\n imgCtx.fillRect(x, 0, 1, canvas.height);\n }\n imgCtx.drawImage(canvas, 0, 0, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2d:"$2c:body"