29:null 2a:["$","title",null,{"children":"Discrete Color Palette Generator | Lao | Observable"}] 2f:T551,In terms of evolutionary history, monkeys could originally only see the yellow-blue color axis, which is good for perceiving shape under a yellow sun and blue sky. Then a mutation occurred which differentiated yellow into red and green. Look up the 'LMS response' curves in google, and notice how close the red Long wavelength response is to the green Middle wavelength response. Red and green are great for seeing red fruit against green leaves, and also seeing snakes before they bite you. Color processing is complicated. There is the physical light, the perception of the LMS cone receptors and the psychological processing of phenomena. Because the yellow-blue axis was primary, and then red-green was built off of yellow, the artistic complementary colors are different than the RGB complements. A red barn on a green hill is more picturesque than a red barn on a cyan hill. The natural color system is based on painters and artists experience working with color. It is the only space I've added so far that has yellow-blue and green-red opponent axes. I should also note that the original primary colors were not as vibrant as what can be achieved with RBG light. The RBG cube looks so distorted because all of the colors are beyond the bounds of the original system. This is also why you can get negative whiteness and blackness on the gradient tool.30:T887,viewof options2 = { let form = html``; form.oninput = () => { form.value = ({ space: form.space.value, vision: form.vision.value }) }; form.oninput(); return form; }31:T2764, canvas ={ // SET UP ------------------------------------ // scene const aspect = 1.3 let w = 700 let h = 700 const scene = new THREE.Scene() let lerpSteps = 200 let lScale = d3.scaleLinear().domain([0, 1]).range([-32,25]) // camera const camera = new THREE.PerspectiveCamera(45, w/h, 1, 800) // field of view, aspect ratio, near, far plane camera.position.set( 0, 15, 70 ) // camera is +100 in z direction // renderer const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true }) // most powerful all purpose renderer, with smooth edges renderer.setClearColor( 0x000000, 0 ); // background color renderer.setSize(w, h) // set window size // camera controls const controls = new THREE.OrbitControls(camera, renderer.domElement); // allows mouse to move camera controls.enableZoom = false // disables zoom controls.enablePan = false // disables pan controls.enableRotate = true // determines if camera can rotate controls.rotateSpeed =.2 controls.enableDamping = true; controls.dampingFactor = .2; // MATERIALS --------------------------------- const matCube = new THREE.MeshLambertMaterial({color: 0x000000, side: THREE.DoubleSide, transparent: true, flatShading: true}) const matLine = new THREE.LineBasicMaterial({color: 0x000000, depthWrite:false, transparent: true, opacity:1}) // SHAPE ------------------------------------ // RGB cube let rgbExtremes = [ '#FFFFFF', '#000000', '#FF0000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#FF00FF'] let pairs =[] for( let i=0; i Math.sin(Math.PI/180 * angle) let cos = (angle) => Math.cos(Math.PI/180 * angle) let position = (space, color, vision) => { color = cb[vision](color, true) if( space == 'rgb'){ c = chroma.rgb(color.R, color.G, color.B).rgb() return [ .09 * ( c[0] - sin(30) * c[1]- sin(30) * c[2]), .065 * ( c[0] + c[1] + c[2])-25 , .09 * ( cos(30) * c[1] - cos(30) * c[2] ) ] } else if( space == 'hsl'){ c = chroma.rgb(color.R, color.G, color.B).hsl(); if( isNaN(c[0]) ){ return [0, 50*c[2]-25, 0 ] }else{ return [ 25*c[1]*cos(c[0]), 50*c[2]-25, 25*c[1]*sin(c[0]) ] } } else if( space == 'hcl'){ c = chroma.rgb(color.R, color.G, color.B).hsl(); if( isNaN(c[0]) ){ return [0, 50*c[2]-25, 0 ] }else{ return [ (1-2*Math.abs(c[2]-.5))*25*c[1]*cos(c[0]), 50*c[2]-25, (1-2*Math.abs(c[2]-.5))*25*c[1]*sin(c[0]) ] } } else if( space == 'hsv'){ c = chroma.rgb(color.R, color.G, color.B).hsv(); if( isNaN(c[0]) ){ return [0, 50*c[2]-25, 0 ] }else{ return [ 25*c[1]*cos(c[0]), 50*c[2]-25, 25*c[1]*sin(c[0]) ] } } else if( space == 'oklab'){ c = chroma.rgb(color.R, color.G, color.B).oklab() return [ 100*c[1], 50*c[0] - 25, 100*c[2] ] } else if( space == 'cielab'){ //c = chroma(color).lab() //return [ .25*c[1], .5*c[0] - 25, .25*c[2] ] c = chroma.rgb(color.R, color.G, color.B).lab(false) //return [0,0,0] return [ .25*c[1], .5*c[0] - 25, .25*c[2] ] } else if( space == 'cam02ucs'){ c = d3.jab(d3.rgb(color.R, color.G, color.B)) c = [c.J, c.a, c.b] return [ .5*c[1], .5*c[0] - 25, .5*c[2] ] } else if( space == 'cam02'){ c = d3.jch(d3.rgb(color.R, color.G, color.B)) c = [c.h, c.C, c.J] if( isNaN(c[0]) ){ return [0, .50*c[2]-25, 0 ] }else{ return [ .25*c[1]*cos(c[0]), .5*c[2]-25, .25*c[1]*sin(c[0]) ] } } else if( space == 'ncs'){ let c = d3.jch(d3.rgb(color.R, color.G, color.B)) let h = c.h let Jp = 45.95 + 12.03*cos(c.h - 106) - 5.15*cos(2*c.h + 13) + 4.59*cos(3*c.h +123) + 1.87*cos(4*c.h + 29) let Cp = 76.27 - 4.93*cos(c.h + 2) - 7.64*cos(2*c.h + 74) + .38*cos(3*c.h + 129) + .95*cos(4*c.h + 24) let whiteness = c.J - ( c.C / Cp) * Jp let blackness = (100-c.J) - ( c.C / Cp) * (100-Jp) let chromaticness = 100* ( c.C / Cp) if( isNaN(h) ){ return [0, .25*(whiteness-blackness), 0 ] }else{ return [ .25*chromaticness*cos(h), .25*(whiteness-blackness), .25*chromaticness*sin(h) ] } } else { return [0,0,0] } } ////////////////////////////////////////////////////////////////////////////////////////////// // RENDER LOOP /////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////// let last = null let oldColors = null let p, t let dt = .017 let colorList = [] let tween = (source, target, time, ease) => { time = ease(time) return [ (1-time) * source[0] + (time) * target[0], (1-time) * source[1] + (time) * target[1], (1-time) * source[2] + (time) * target[2] ] } let update = (select, c) => { if( oldColors != c){ for(let i=0; i { w1 = Math.min( window.innerWidth, (window.outerHeight - 100) * aspect ) h1 = Math.min( window.outerHeight - 100, w1) if( w1 != w2 || h1 != h2){ renderer.setSize(w1, h1) camera.aspect = w1/h1 camera.updateProjectionMatrix(); } w2 = w1 h2 = h1 } const render = function(){ requestAnimationFrame(render) // adjust scale on resize and stops animation when window is closed to save memory resize() controls.update() update(mutable colorSpaceControls, mutable c) renderer.render(scene, camera) // renders scene } render() yield renderer.domElement }32:T19d2,viewof palette = { let key = new URL(document.baseURI).pathname.substring(1).replace('/', '-') // functions for processing text const isColor = (strColor) => { // checks to see if string is a valid HTML color const s = new Option().style; s.color = strColor; return s.color !== ''; } const parse = (s) => { // processes the input text into section that are valid HTML colors let sLength = s.length // length of string let A = [] // the array s is going to be parse into. Each element is going to be ({ string, startIndex, endIndex }) let left = 0, right = 0 // counts the number of left ( and right ) parentheses let char = '' // current character in the string let skip = [ `#` ] // characters skipped in phrase let cut = [ ',', ' ', '\n', 'x', `[`, `]`, `'`, `"`, `;` ] // characters that cut string into section if not in a parenthesis let section = '' // current string section being constructed one by one. Gets reset every section let startIndex = 0, endIndex = 0 // where the section begins and ends so the
 tag can be inserted with color highlighted  tags
    let fillColor = '', textColor = '' // color of highlight and text
    let keep = false // for testing if string is a valid HTML color

    for( let i=0; i<=sLength; i++ ){ // step for each character of the string
      char = s.charAt(i)

      // count how many left and right parentheses we have seen
      if( char ==='(' ) left++
      if( char ===')' ) right++
      
      if( left != 0 ){ // dealing with a parenthesis section
        section += char
        if( left === right ){ // resets parenthesis count
          left = 0
          right = 0
        }
        
      }else{ // not dealing with a parenthesis section
        if( skip.includes(char) ){
          // do nothing
        }else if( cut.includes(char) || i==sLength ){ // cut section
          //test to see if section is a valid HTML color
          keep = true
          if( isColor(section) ){
            fillColor = d3.color( section ).hex()
          }else if( isColor('#'+section)){
            fillColor = d3.color( '#'+section ).hex()
          }else{
            keep = false
          }

          // if it is a valid color, add it to the array
          if( keep ){
            if( d3.lab(d3.color(fillColor)).l > 65 ){
              textColor = '#000000'
            }else{
              textColor = '#FFFFFF'
            }
            A.push(
              ({string:section, startIndex:startIndex, endIndex:i, fillColor:fillColor, textColor:textColor})
            )
          }
          startIndex = i+1
          section = ''
        }else{ // if no skips or cuts, add character to section string
          section += char
        }
      }
      
    }

    return A
  }

  
  function resizeTextarea() {
      var textarea = document.getElementById("textArea_editing");
      if( textarea != null){
        textarea.style.height = "auto"; // Reset height to auto to get accurate scrollHeight
        textarea.style.height = (1*textarea.scrollHeight-19) + "px"; // Set the height to the scrollHeight
    }
  }
  function updatePre(text){
    if( document.getElementById('textArea_highlight') != null){ document.getElementById('textArea_highlight').innerHTML = text}
  }
  let formatPre = (text, highlight) => {
    for( let i = highlight.length-1; i>=0; i--){
      text = text.slice(0, highlight[i].startIndex)
        + ''
        + text.slice(highlight[i].startIndex, highlight[i].endIndex)
        + ''
        + text.slice(highlight[i].endIndex);
    }
    return text
  }

  // HTML element
  let savedText = localStorage.getItem(key)
  if(savedText === null || savedText == ''){savedText = 
    `'#fde725', '#d2e21b', '#a5db36', '#7ad151', '#54c568', '#35b779', '#22a884', '#1f988b', '#23888e', '#2a788e', '#31688e', '#39568c', '#414487', '#472f7d', '#481a6c', '#440154'`}
  let form = html`
  
    
    
    
    
    
    ${formatPre(savedText, parse(savedText))}
    ${savedText}
  `;
  
  let output
  form.oninput = () => {
    localStorage.setItem(key, form.palleteInput.value);
    resizeTextarea() 
    output = parse(form.palleteInput.value)
    updatePre(formatPre(form.palleteInput.value, output))
    form.value = output.map( e => e.fillColor )
    mutable c = form.value
  };
  form.oninput();
  
  addEventListener("resize", (event) => { resizeTextarea() });
  
  return form;
}33:T1489,viewof set = {
  let form = html`
    
      
        Seed

        
      

      
        Chart Type

        
      

      
        Figures

        
      

      
        Wrap

        
      

      
        Size

        
        px
 
        
        px
      

      
        Elements

        

        
        ±
      

      
        Colors

        

        
        ±
      

    
  `;
  
  form.oninput = () => {
    form.value = ({
      seed: form.seed.valueAsNumber,
      type: form.type.value,
      figures: form.figures.valueAsNumber,
      wrap: form.wrap.checked,
      width: form.width.valueAsNumber,
      height: form.height.valueAsNumber,
      elementMin: form.elementCheck.checked ? Math.max(1, form.element.valueAsNumber - form.elementVar.valueAsNumber) : form.element.valueAsNumber,
      elementMax: form.elementCheck.checked ? form.element.valueAsNumber + form.elementVar.valueAsNumber : form.element.valueAsNumber,
      colorMin: form.colorCheck.checked ? Math.max(1, form.color.valueAsNumber - form.colorVar.valueAsNumber) : form.color.valueAsNumber,
      colorMax: form.colorCheck.checked ? form.color.valueAsNumber + form.colorVar.valueAsNumber : form.color.valueAsNumber,
    })
  };
  form.oninput();
  return form;
}34:T47c,35:T25e4,viewof options1 = {
  let form = html`
    

    

    
      Colormap:
      
      
        Vision:
        
      
    


    
      
        
           RGB
           Lab
           Cho's WBC
        
      
      

      
        
           red
           b* pink/green
          
        
        
           green
          
        
        
           blue
           a* yellow/blue
          
        
        
           lightness
           L* lightness
           whiteness
        
        
           value
           V* vividness
        
        
           saturation
           D* depth
           blackness
        
        
           chroma
           C* chroma
           chromaticness
        
        
           hue
           h
           Φ
        
      
    

  `;
  
  form.oninput = () => {
    form.value = ({
      scale: form.scale.value,
      vision: form.vision.value,
      metric:({
        rgb: ({
          r: form.rgb.checked && form.rgb_r.checked,
          g: form.rgb.checked && form.rgb_g.checked,
          b: form.rgb.checked && form.rgb_b.checked,
          l: form.rgb.checked && form.rgb_l.checked,
          s: form.rgb.checked && form.rgb_s.checked,
          v: form.rgb.checked && form.rgb_v.checked,
          h: form.rgb.checked && form.rgb_h.checked,
        }),
        lab: ({
          l: form.lab.checked && form.lab_l.checked,
          a: form.lab.checked && form.lab_a.checked,
          b: form.lab.checked && form.lab_b.checked,
          c: form.lab.checked && form.lab_c.checked,
          h: form.lab.checked && form.lab_h.checked,
          v: form.lab.checked && form.lab_v.checked,
          d: form.lab.checked && form.lab_d.checked,
          t: false,
        }),
        ncs: ({
          w: form.ncs.checked && form.ncs_w.checked,
          b: form.ncs.checked && form.ncs_b.checked,
          c: form.ncs.checked && form.ncs_c.checked,
          h: form.ncs.checked && form.ncs_h.checked,
        }),
      })
    })
  };
  form.oninput();
  return form;
}36:T1684,metricGraph = {
  let speed = 750
  
  const w = width;
  const aspect = 2
  const padding = {top:30, bottom:60, left:0, right:100}
  let h = 450 + padding.top + padding.bottom //1 * (w/aspect - padding.left - padding.right) + padding.top + padding.bottom;
  const svg = d3.create("svg")
    .attr("width", w)
    .attr("height", h)
    .style("overflow", "visible");

  //axes
  let xScale = d3.scaleLinear([0,1],[padding.left, w-padding.right])
  let yScale = d3.scaleLinear([0,1],[h-padding.bottom, padding.top])
  
  let line = d3
    .line().curve(d3.curveNatural)
    .x((d) => xScale(d[0]))
    .y((d) => yScale(d[1]))

  let baseline = svg.append('line')
    .style("stroke", "black")
    .attr("x1", xScale(0)).attr("x2", xScale(1))
    .attr("y1", yScale(0)).attr("y2", yScale(0))
    .style("stroke-dasharray", ("1, 3"))

  
  let xAxis = d3.axisBottom(xScale);
  let yAxis = d3.axisLeft(yScale);
  let xpos = svg.append("g").attr("transform", `translate(0,${h -12})`).call(xAxis).call(g => g.select(".domain").remove()); //removes line;
  //let ypos = svg.append("g").attr("transform", `translate(${ padding.left},0)`).call(yAxis).call(g => g.select(".domain").remove());
  

  let text
  let paths 
  let count = 0
  let min = 0
  let max = 1
  let yMin, yMax
  let hOld = 1
  let scaleFunction = () => {return "#FFFFFF"}

   //gradients
  let gradRect
  let gData
  let gradGroup = svg
    .append('g')
    .attr("transform", "translate("  + xScale(0) + "," + (h-padding.bottom+5)  + ")")
  
  let scaleOld = null
  let linearGradient = svg.append("linearGradient")
  let setGradient = (scale, grad, vision) => {
    let n = 100
    for( let i=0; i a[1])))
      yMax.push(d3.max(metrics.line[i].value.map( a => a[1])))
    }
    min = Math.min(0, d3.min(yMin))
    max = 1// Math.max(1, d3.max(yMax))
    h = (max-min) * 450 + padding.top + padding.bottom //(max-min) * (w/aspect - padding.left - padding.right) + padding.top + padding.bottom;
    svg
      .transition().delay(h < hOld ? speed : 0).duration(0)
      .attr("height", h)
    hOld = h
    
    yScale = d3.scaleLinear([min,max],[h-padding.bottom, padding.top])
    xpos
      .transition().duration(speed).ease(d3.easeCubicOut)
      .attr("transform", `translate(0,${h - 12})`)
    
    baseline.transition().duration(speed).ease(d3.easeCubicOut)
      .attr("x1", xScale(0)).attr("x2", xScale(1))
      .attr("y1", yScale(0)).attr("y2", yScale(0))
    
    paths = svg.selectAll("path")
      .data(metrics.line, d => d.name)
      .join(
        enter => enter
          .append("path")
          .attr('stroke', d => d.color )
          .attr('fill', 'none' )
          .attr("d", d => line(d.value))
          .attr('opacity',0)
        .transition().duration(speed).duration(speed).ease(d3.easeCubicOut) 
          .attr('opacity',1)
        ,
        update => update
        .transition().duration(speed).ease(d3.easeCubicOut)
          .attr("d", d => line(d.value))  
        ,
        exit => exit
          .attr('opacity',1)
        .transition().duration(speed).duration(speed).ease(d3.easeCubicOut)
          .attr('opacity',0)
            .remove()
      )

    text = svg.selectAll("text.label")
      .data(metrics.text, d => d.name)
      .join(
        enter => enter
          .append("text").classed("label", true)
          .attr("x", xScale(1)+8)             
          .attr("y", d => yScale(d.y)+4 )
          .attr("text-anchor", "start")
          .style("font-size", "12px") 
          .attr("font-family", "Arial")
          .attr("font-weight", 400)
          .attr('fill', d => d.color )
          .text((d) => d.name)
          .attr('opacity',0)
        .transition().duration(speed).duration(speed).ease(d3.easeCubicOut)
          .attr('opacity',1)
        ,
        update => update
        .transition().duration(speed).ease(d3.easeCubicOut)
          .attr("y", d => yScale(d.y)+4 )
        ,
        exit => exit
          .attr('opacity',1)
        .transition().duration(speed).duration(speed).ease(d3.easeCubicOut)
          .attr('opacity',0)
            .remove()
      )
    if( scaleOld != metrics.scale){
      gData = [({name:count})]
      linearGradient
        .transition().duration(speed)
          .remove()
      
      linearGradient= svg
        .append("linearGradient")
        .attr("id", "linear-gradient-"+count)
      scaleFunction = metrics.scale
      setGradient(scaleFunction, linearGradient)
    }
    gradGroup
    .transition().duration(speed).ease(d3.easeCubicOut)
      .attr("transform", "translate("  + xScale(0) + "," + (h-padding.bottom+5)  + ")")
    
    gradRect = gradGroup.selectAll("rect.gradient")
      .data(gData, d => d.name)
      .join(
        enter => enter
          .append("rect").classed("gradient", true)
          .attr("width", xScale(1)-padding.left )
          .attr("height", 40)
          .attr('fill', "url(#linear-gradient-"+count+")")
          .attr('stroke', "url(#linear-gradient-"+count+")")
          .attr('stroke-width', 1)
          .attr('opacity', 0)
        .transition().duration(speed).ease(d3.easeCubicOut)
          .attr('opacity',1)
        ,
        update => update
        .transition().duration(speed)
          .attr("y", h-padding.bottom+5)
        ,
        exit => exit
        .transition().duration(speed)
          .attr('stroke-width', .1)
          .remove()
      )
    if( scaleOld != metrics.scale){count++}
  }})
}37:T1629,metricData = {
  Fabio, palette, chroma
  let colorScale = (color) => cb[options1.vision]( eval(options1.scale)(color) )
  
  let lineData = [ ] 
  let makeLine = (scale, metric, denominator, name, color) =>{
    lineData.push({name: name, color:color, value:[]})
    let last = lineData.length-1
    let n = 200 // number of sample points
    let std = .005
    let range = 4
    let m = 70 // number of smoothing samples between +/- 3 std
    let smoothingSum, normalize, weight, x, nudge, value
    for( let i=0; i.000000001 ){
          force += strength * Math.min(2000, Math.max(-2000,1/(textData[j].y - anchors[k].y)))
        }
      }
      textData[j].y += force
      textData[j].y = (textData[j].y + anchors[j].y)/2
    }
  }
  metricGraph.input( ({line:lineData, text:textData, scale:colorScale, vision:options1.vision}) )
  return ({line:lineData, text:textData, scale:colorScale, vision:options1.vision})
}38:T73c,dataColorMatrix = {
  let data = []
  let csize = 50
  let cpad = 5
  let tpad = csize + 20
  for( let i=0; i d3.lab(c2).l){
      c1 = palette[j]
      c2 = palette[i]
    }
    list.push(
      ({c1:c1, c2:c2, HyAB:HyAB(c1, c2)})
    )
  }}
  list.sort((a, b) => (a.HyAB > b.HyAB) ? 1 : -1)
  let data = []
  let metric = []
  for(let i=0; i d[0]+padding.left)
      .y((d) => d[1]+padding.top)

  let cells = svg
      .selectAll("g")
      .data( data )
    .enter()
      .append('path')
      .attr("fill", d => d.color )
      .attr("stroke", d => d.color )
      .attr('d', d => line(d.line))

  let mText = svg
    .selectAll("g")
      .data( metric )
    .enter()
      .append('text')
      .text( d => d.value )
      .attr('x', d => d.x)
      .attr('y', d => d.y) 
      .style("font-size", "14px") 
      .style("font-weight", "700") 
      .attr("font-family", "sans-serif")
      .attr('text-anchor', 'middle')
  
  let cText = svg
    .selectAll("g")
      .data( data )
    .enter()
      .append('text')
      .text( d => d.color.substring(1) )
      .attr('x', d => d.x)
      .attr('y', d => d.y) 
      .style("font-size", "12px") 
      .attr("font-family", "sans-serif")
      .attr('text-anchor', 'middle')
  
  return html`${svg.node()}`
}3a:Ta21,deltaE = {
  let padding = ({left:0, right:0, top:35, bottom:15})
  let cellSize = 50
  let tablePadding = 20

  let list = []
  let c1, c2
  for(let i=0; i d3.lab(c2).l){
      c1 = palette[j]
      c2 = palette[i]
    }
    list.push(
      ({c1:c1, c2:c2, deltaE:chroma.deltaE(c1, c2)})
    )
  }}
  list.sort((a, b) => (a.deltaE > b.deltaE) ? 1 : -1)
  let data = []
  let metric = []
  for(let i=0; i d[0]+padding.left)
      .y((d) => d[1]+padding.top)

  let cells = svg
      .selectAll("g")
      .data( data )
    .enter()
      .append('path')
      .attr("fill", d => d.color )
      .attr("stroke", d => d.color )
      .attr('d', d => line(d.line))

  let mText = svg
    .selectAll("g")
      .data( metric )
    .enter()
      .append('text')
      .text( d => d.value )
      .attr('x', d => d.x)
      .attr('y', d => d.y) 
      .style("font-size", "14px") 
      .style("font-weight", "700") 
      .attr("font-family", "sans-serif")
      .attr('text-anchor', 'middle')
  
  let cText = svg
    .selectAll("g")
      .data( data )
    .enter()
      .append('text')
      .text( d => d.color.substring(1) )
      .attr('x', d => d.x)
      .attr('y', d => d.y) 
      .style("font-size", "12px") 
      .attr("font-family", "sans-serif")
      .attr('text-anchor', 'middle')
  
  return html`${svg.node()}`
}3b:T1007,cbStats = {
  let data = [
    ({ sex:"Male", prevalence:91.29999, fy:'all', type:'normal', color:'lightgrey' }),
    ({ sex:"Female", prevalence:99.59999, fy:'all', type:'normal', color:'lightgrey' }),
    
    ({ sex:"Male", prevalence:1.3, fy:'all', type:'Protanomaly (L-cone defect)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.02, fy:'all', type:'Protanomaly (L-cone defect)', color:'lightgrey' }),
    ({ sex:"Male", prevalence:5, fy:'all', type:'Deuteranomaly (M-cone defect)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.35, fy:'all', type:'Deuteranomaly (M-cone defect)', color:'lightgrey' }),
    ({ sex:"Male", prevalence:.01, fy:'all', type:'Tritanomaly (S-cone defect)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.01, fy:'all', type:'Tritanomaly (S-cone defect)', color:'lightgrey' }),
    
    ({ sex:"Male", prevalence:1.2, fy:'all', type:'Protanomaly (L-cone absent)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.02, fy:'all', type:'Protanomaly (L-cone absent)', color:'lightgrey' }),
    ({ sex:"Male", prevalence:1.2, fy:'all', type:'Deuteranomaly (M-cone absent)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.01, fy:'all', type:'Deuteranomaly (M-cone absent)', color:'lightgrey' }),
    ({ sex:"Male", prevalence:.001, fy:'all', type:'Tritanomaly (S-cone absent)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.03, fy:'all', type:'Tritanomaly (S-cone absent)', color:'lightgrey' }),

    ({ sex:"Male", prevalence:.00001, fy:'all', type:'Rod monochromacy', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.00001, fy:'all', type:'Rod monochromacy', color:'lightgrey' }),    
    
    /////////
    ({ sex:"Male", prevalence:0.00000001, fy:'all', type:'normal', color:'lightgrey' }),
    ({ sex:"Female", prevalence:0.00000001, fy:'all', type:'normal', color:'lightgrey' }),
    
    ({ sex:"Male", prevalence:1.3/8.71101*100, fy:'colorblindness', type:'Protanomaly (L-cone defect)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.02/.44001*100, fy:'colorblindness', type:'Protanomaly (L-cone defect)', color:'lightgrey' }),
    ({ sex:"Male", prevalence:5/8.71101*100, fy:'colorblindness', type:'Deuteranomaly (M-cone defect)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.35/.44001*100, fy:'colorblindness', type:'Deuteranomaly (M-cone defect)', color:'lightgrey' }),
    ({ sex:"Male", prevalence:.01/8.71101*100, fy:'colorblindness', type:'Tritanomaly (S-cone defect)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.01/.44001*100, fy:'colorblindness', type:'Tritanomaly (S-cone defect)', color:'lightgrey' }),
    
    ({ sex:"Male", prevalence:1.2/8.71101*100, fy:'colorblindness', type:'Protanomaly (L-cone absent)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.02/.44001*100, fy:'colorblindness', type:'Protanomaly (L-cone absent)', color:'lightgrey' }),
    ({ sex:"Male", prevalence:1.2/8.71101*100, fy:'colorblindness', type:'Deuteranomaly (M-cone absent)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.01/.44001*100, fy:'colorblindness', type:'Deuteranomaly (M-cone absent)', color:'lightgrey' }),
    ({ sex:"Male", prevalence:.001/8.71101*100, fy:'colorblindness', type:'Tritanomaly (S-cone absent)', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.03/.44001*100, fy:'colorblindness', type:'Tritanomaly (S-cone absent)', color:'lightgrey' }),

    ({ sex:"Male", prevalence:.00001/8.71101*100, fy:'colorblindness', type:'Rod monochromacy', color:'lightgrey' }),
    ({ sex:"Female", prevalence:.00001/.44001*100, fy:'colorblindness', type:'Rod monochromacy', color:'lightgrey' }),    
    /////////
  ]
  return Plot.plot({
    title: 'Color Blindness Statistics',
    width: 928,
    height: 200,
    marginRight:100,
    x: {},
    y: {},
    fy:{label:null},
    
    color: {
      range:  ['#27e800',   '#99ffa2', '#ff4800', '#ff9f99',    '#000', '#0d00ff', '#99afff', '#ddd']
    },
    marks: [
      Plot.barX(data, {
        x: "prevalence",
        y: "sex",
        fy:'fy',
        fill: "type",
        tip: true
      })
    ]
  })
}3c:T535,General
 - select background color and update CAM models
 - HDR colors
 - save/load default color pallets
 - (not on observable)
   - multiple columns with different tools, especially a list of colors
   - track changes

3D graph
- change colors by dragging points on 3D graph
- calculate ΔE / HyAB point radius for graph
- switch between radial and linear dimension mode
- color blindness leylines showing spectrum each point looks the same for different types of color blindness
- dimension lines for each color

Gradient tool
 - step gradient and output
   - discrete optimization
 - Bezier path on graph and 3D

Discrete cluster
 - convex envelope
 - Perlin noise
 - force directed spacing
 - lattice
 - quasicrystal

Contrast pairs
 - contrast elements
   - ✅ lower\upper triangles
   - X lines
   - small dot on square background
   - two separate points
   - gradient
   - text on background
 - highlight points that are too close
   - multiple metrics
   - color blindness
 - order i/j matrix columns
 - hierarchical cluster tree for 

Random chart
- posterized image with substituted colors
- 
  
Image to color space
 - drop in image or url
 - color quantization function
   - average
   - extremes
   - min points to define hull
   - primaries with gradient blending
   - bar graph of clusters
   - dendrogram of colors3d:T7f7,| Points | Voronoi | Unit Cell | Properties |
|------|---------|-----------|------------|
| [Hexagonal Packing](https://youtu.be/WuclTFbINq4?t=1316) |  |  |  |
| [octahedral-tetrahedral honeycomb](https://en.wikipedia.org/wiki/Tetrahedral-octahedral_honeycomb) | [Rhombic dodecahedral honeycomb](https://en.wikipedia.org/wiki/Rhombic_dodecahedral_honeycomb) | face centered cubic | high density |
| [*Gyrated* tetrahedral-octahedral honeycomb](https://en.wikipedia.org/wiki/Tetrahedral-octahedral_honeycomb#Gyrated_tetrahedral-octahedral_honeycomb) | [*Trapezo*-rhombic dodecahedral honeycomb](https://en.wikipedia.org/wiki/Rhombic_dodecahedral_honeycomb#Trapezo-rhombic_dodecahedral_honeycomb) | hexagonal close-packed | high density |
| [Tetragonal disphenoid honeycomb](https://en.wikipedia.org/wiki/Tetragonal_disphenoid_honeycomb) | [Bitruncated cubic honeycomb](https://en.wikipedia.org/wiki/Bitruncated_cubic_honeycomb) | body centered |  |
| [Cubic honeycomb](https://en.wikipedia.org/wiki/Cubic_honeycomb) | [Cubic honeycomb](https://en.wikipedia.org/wiki/Cubic_honeycomb) | simple cubic |  |
| . |  |  |  |
| . |  |  |  |
| . |  |  |  |
| . |  |  |  |
| [Delone set](https://en.wikipedia.org/wiki/Delone_set) | [Plesiohedron](https://en.wikipedia.org/wiki/Plesiohedron) | NA |  |
| []() | [Triakis truncated tetrahedron](https://en.wikipedia.org/wiki/Triakis_truncated_tetrahedron) | [Diamond cubic](https://en.wikipedia.org/wiki/Diamond_cubic) |  |
| []() | []() | [fluorite-type structure](https://en.wikipedia.org/wiki/Fluorite_structure) |  |
| []() | []() | []() |  |
| []() | []() | []() |  |
| []() | []() | []() |  |
| []() | []() | []() |  |
| []() | [Frank–Kasper phases](https://en.wikipedia.org/wiki/Frank%E2%80%93Kasper_phases) | []() |  |
|  | [Weaire–Phelan structure](https://en.wikipedia.org/wiki/Weaire%E2%80%93Phelan_structure) | [A15](https://en.wikipedia.org/wiki/A15_phases) | minimal surface area |
| []() | []() | []() |  |
| []() | []() | []() |  |
| []() | []() | []() |  |
| []() | []() | []() |  |3e:T6ca,function basicColumn({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
  r = mulberry32(10000*seed + index) // resets random so graph is the same shape for different color settings
  let data = []
  for( let i=0; i
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}3f:Tb6e,function radar({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
   // resets random so graph is the same shape for different color settings
  let data = []
  for( let i=0; i d3.geoCircle().center([0, 90]).radius(r)(),
        stroke: "black",
        fill: "black",
        strokeOpacity: 0.3,
        fillOpacity: 0.02,
        strokeWidth: 0.5
      }),
  
      // white axes
      Plot.link(data, {
        x1: "angle",
        y1: 90 - 0.57,
        x2: 0,
        y2: 90,
        stroke: "white",
        strokeOpacity: 0.5,
        strokeWidth: 2.5
      }),
  
      // axes labels
      Plot.text(data, {
        x: "angle",
        y: 90 - 0.57,
        text: "x",
        lineWidth: 5
      }),
  
      // areas
      Plot.area(data, {
        x1: "angle",
        y1: "y",
        x2: 0,
        y2: 90,
        fill: "color",
        stroke: "color",
        strokeWidth: 2,
        fillOpacity: .15,
        curve: "cardinal-closed",
        mixBlendMode:'multiply'
      }),
  
      // points
      Plot.dot(data, {
        x: "angle",
        y: "y",
        fill: "color",
        stroke: "none",
        r:4,
        mixBlendMode:'normal'
      })
    ]
  })
    
    
  
  if(set.wrap){
    return html`
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}40:T70f,function stackedColumn({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
   // resets random so graph is the same shape for different color settings
  let data = []
  for( let i=0; i
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}41:T717,function proportionColumn({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
   // resets random so graph is the same shape for different color settings
  let data = []
  for( let i=0; i
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}42:T72d,function groupedColumn({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
  r = mulberry32(10000*seed + index) // resets random so graph is the same shape for different color settings
  let data = []
  for( let i=0; i
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}43:T7c7,function basicLine({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
   // resets random so graph is the same shape for different color settings
  let data = []
  let points = Math.floor(width/2)
  let date
  let y
  for( let j=0; j
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}44:T7b0,function markerLine({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
   // resets random so graph is the same shape for different color settings
  let data = []
  let points = Math.ceil( width / 30 )
  let date
  let y
  for( let j=0; j
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}45:T8c9,function bumpChart({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
   // resets random so graph is the same shape for different color settings
  let data = []
  let points = Math.ceil( width / 30 )
  let date
  let y
  for( let j=0; j
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}46:T93e,function regressionScatter({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
  ///////////////////////////////////////////
  let data = []
  let points = Math.ceil( (width**2 + height**2) /5000)
  let date
  let x, y, xBar, yBar, aDev, bDev, angle, ra, rb
  for( let j=0; j
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}47:T8e1,function basicScatter({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
  ///////////////////////////////////////////
  let data = []
  let points = Math.ceil( (width**2 + height**2) /5000)
  let date
  let x, y, xBar, yBar, aDev, bDev, angle, ra, rb
  for( let j=0; j
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}48:T8fd,function symbolScatter({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
  ///////////////////////////////////////////
  let data = []
  let points = Math.ceil( (width**2 + height**2) /5000)
  let date
  let x, y, xBar, yBar, aDev, bDev, angle, ra, rb
  for( let j=0; j
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}49:T96d,function voronoiScatter({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
  ///////////////////////////////////////////
  let data = []
  let points = Math.ceil( (width**2 + height**2) /5000)
  let date
  let x, y, xBar, yBar, aDev, bDev, angle, ra, rb
  for( let j=0; j
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}4a:T9a3,function delaunayScatter({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
  ///////////////////////////////////////////
  let data = []
  let points = Math.ceil( (width**2 + height**2) /5000)
  let date
  let x, y, xBar, yBar, aDev, bDev, angle, ra, rb
  for( let j=0; j
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}4b:T9b1,function densityScatter({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  
  ///////////////////////////////////////////
  let data = []
  let points = Math.ceil( (width**2 + height**2) /5000)
  let date
  let x, y, xBar, yBar, aDev, bDev, angle, ra, rb
  for( let j=0; j
      ${plot}
    `  
  }else{
    return html`
      ${figure}

      ${title}

      ${yAxis}
      ${plot}
      ${xAxis}
      ${note}
    `  
  }
}4c:Tb06,function heatMap({
  width, height, index=0, seed=1, elementMin=2, elementMax=10, colorMin=1, colorMax=10, 
  title="XXX", xAxis="X-Axis title", yAxis="Y-axis title", note="Note:", figure="Figure X"
}) {
  width = Math.min(500, width)
  height = Math.min(500, height)
  
  elementMin = Math.max(1, elementMin)
  elementMax = Math.max(elementMin, elementMax)
  colorMin = Math.max(1, colorMin)
  colorMax = Math.max(colorMin, colorMax)
  
  let r = mulberry32(10000*seed + index)
  
  let elementNum = elementMin + Math.round( r() * (elementMax-elementMin))
  let colorNum = colorMin + Math.round( r() * (colorMax-colorMin))
  
  let colors = [...palette]
  colors.sort(() => (r() > .5) ? 1 : -1);
  colors = colors.slice(0, Math.min(colors.length, colorNum))
  let colorScale = d3.interpolateRgbBasis(colors)

  r = mulberry32(10000*seed + index)
  let offset = 1000*r()

   function wave(x, y, t){
      // inward ripple wave
      let phase1 = (.5+.5*Math.sin( t/15+0*Math.PI + .5*Math.sqrt(x**2+y**2) ))**2
      let rippleWave = Math.cos(2*t + 25*Math.sqrt(.2+x**2+y**2) ) 
      // outward spiral wave
      let phase2 = (.5+.5*Math.sin(t/15+.75*Math.PI - .5*Math.sqrt(x**2+y**2) ))**2
      let spiralWave = (
        Math.cos(                          // wave shape
          -2*t                             // animate
          + 18*Math.sqrt(.2+x**2+y**2)     // outward ripple
          - 2*Math.atan((x+.001)/y)        // spiral ramp
        )
        *(x**2+y**2)/(x**2+y**2+.03)       // smooth roughness near origin
        + 1 - (x**2+y**2)/(x**2+y**2+.03)  // adds a bump so the spiral arms connect
      )
      // chaotic inverse wave
      let phase3 = Math.max(0,1-phase1-phase2)
      let inverseWave =  Math.sin(20*(x*y)/Math.sqrt(1+x**2+y**2)-t) 
      
      return .13*phase1*rippleWave + .15*phase2*spiralWave + .2*phase3*inverseWave + .35
    }
    let p
  ///////////////////////////////////////////
    p = Plot.plot({
      width: width,
      height: height,
      x: {label: null, axis: null},
      y: {label: null, axis: null},
      color: {
        interpolate: colorScale
      },
      marks: [
        Plot.raster({
          fill: (x,y) => .1*x+wave(x,y,t+offset),
          x1: -1,
          y1: -height/width,
          x2: 1,
          y2: height/width,
          pixelSize: 4
        }),
        Plot.frame()
      ]
    })
    
    if(set.wrap){
      return html`
        ${p}
      `  
    }else{
      return html`
        ${figure}

        ${title}

        ${yAxis}
        ${p}
        ${xAxis}
        ${note}
      `  
    }
}4d:Taaed,FabioFull = ({
  "berlin":["#9eb0ff","#9cb0fe","#9ab0fd","#98affc","#95affb","#93affa","#91aff9","#8eaef8","#8caef7","#8aaef6","#87aef5","#85adf3","#82adf2","#80adf1","#7eacf0","#7bacef","#79abee","#76abec","#74abeb","#71aaea","#6faae8","#6ca9e7","#6aa8e5","#67a8e4","#65a7e2","#62a6e1","#60a6df","#5da5dd","#5ba4db","#58a3d9","#56a2d8","#53a1d6","#519fd3","#4f9ed1","#4d9dcf","#4a9bcd","#489acb","#4698c8","#4497c6","#4295c4","#4194c1","#3f92bf","#3d90bc","#3c8fba","#3a8db7","#398bb5","#3889b2","#3687b0","#3585ad","#3484ab","#3382a8","#3280a6","#317ea3","#307ca1","#2f7a9e","#2f789c","#2e7699","#2d7597","#2c7394","#2b7192","#2b6f8f","#2a6d8d","#296b8b","#286988","#286786","#276683","#266481","#25627f","#25607c","#245e7a","#235c78","#235b75","#225973","#215771","#21556e","#20546c","#1f526a","#1f5067","#1e4e65","#1d4c63","#1d4b61","#1c495e","#1b475c","#1b465a","#1a4458","#194256","#194053","#183f51","#183d4f","#173b4d","#163a4b","#163848","#153646","#153544","#143342","#143240","#13303e","#132e3c","#122d3a","#122b38","#122a36","#112834","#112732","#112530","#11242e","#10222c","#10212a","#102028","#101e26","#101d24","#101c23","#101a21","#10191f","#10181d","#10171c","#10161a","#101519","#111418","#111316","#111215","#121113","#121012","#130f11","#140e0f","#150e0e","#160d0c","#170c0b","#180c0a","#190c08","#1a0b07","#1b0b06","#1c0b05","#1d0b04","#1e0b04","#1f0b03","#200b02","#210b02","#220b02","#240c01","#250c01","#260c01","#270d00","#280d00","#290d00","#2a0d00","#2c0e00","#2d0e00","#2e0e00","#300e00","#310e00","#320f00","#340f00","#350f00","#361000","#381000","#391000","#3b1000","#3c1100","#3d1100","#3f1200","#401200","#421200","#431301","#451301","#461401","#481401","#4a1501","#4b1502","#4d1602","#4e1702","#501703","#521803","#541904","#551a05","#571a06","#591b06","#5b1c07","#5d1d08","#5f1e0a","#61200b","#63210c","#65220d","#67240e","#6a2510","#6c2611","#6e2812","#702914","#722b15","#752d17","#772e18","#79301a","#7b321c","#7d341e","#803520","#823722","#843923","#863b25","#883d28","#8a3e2a","#8c402c","#8e422e","#904430","#924632","#944834","#964936","#984b38","#9a4d3b","#9c4f3d","#9e513f","#a05341","#a25543","#a45646","#a65848","#a85a4a","#aa5c4c","#ac5e4e","#ae6051","#b06253","#b26455","#b46658","#b6685a","#b8695c","#ba6b5e","#bc6d61","#be6f63","#c07165","#c27368","#c4756a","#c6776c","#c8796f","#ca7b71","#cd7d73","#cf7f76","#d18178","#d3837a","#d5857d","#d7877f","#d98982","#db8b84","#dd8d86","#df8f89","#e2918b","#e4938e","#e69590","#e89792","#ea9995","#ec9b97","#ee9d9a","#f09f9c","#f3a19f","#f5a3a1","#f7a5a4","#f9a7a6","#fba9a9","#fdacab","#ffaeae"],
  "bilbao":["#ffffff","#fefefe","#fdfdfd","#fbfbfb","#fafafa","#f8f8f8","#f7f7f7","#f6f6f6","#f4f4f4","#f3f3f3","#f1f1f1","#f0f0f0","#eeeeee","#ededed","#ececec","#eaeaea","#e9e9e9","#e7e7e7","#e6e6e6","#e5e5e5","#e3e3e3","#e2e2e2","#e0e0e0","#dfdfdf","#dedede","#dcdcdc","#dbdbdb","#dadad9","#d8d8d8","#d7d7d7","#d6d6d5","#d5d5d4","#d4d3d2","#d2d2d1","#d1d1d0","#d0d0ce","#cfcfcd","#cfcecb","#cecdca","#cdccc9","#cccbc7","#cccac6","#cbcac4","#cac9c3","#cac8c1","#c9c7c0","#c9c7bf","#c8c6bd","#c8c5bc","#c7c5ba","#c7c4b9","#c6c3b7","#c6c3b6","#c6c2b5","#c5c2b3","#c5c1b2","#c4c0b0","#c4c0af","#c4bfae","#c3bfac","#c3beab","#c2bda9","#c2bda8","#c2bca7","#c1bca5","#c1bba4","#c0baa2","#c0baa1","#c0b9a0","#bfb99e","#bfb89d","#beb79c","#beb79a","#beb699","#bdb697","#bdb596","#bcb495","#bcb493","#bcb392","#bbb391","#bbb28f","#bab18e","#bab18c","#bab08b","#b9b08a","#b9af88","#b9af87","#b8ae86","#b8ad84","#b7ad83","#b7ac82","#b7ab80","#b6ab7f","#b6aa7e","#b5aa7c","#b5a97b","#b5a87a","#b4a779","#b4a778","#b4a677","#b3a576","#b3a475","#b3a374","#b2a373","#b2a273","#b2a172","#b1a071","#b19f71","#b19e70","#b09d6f","#b09c6f","#b09b6e","#af9a6e","#af996d","#af986d","#af976d","#ae976c","#ae966c","#ae956b","#ae946b","#ad936a","#ad926a","#ad916a","#ac9069","#ac8f69","#ac8e68","#ac8d68","#ab8c68","#ab8b67","#ab8a67","#ab8966","#aa8866","#aa8766","#aa8665","#a98565","#a98464","#a98364","#a98263","#a88163","#a88163","#a88062","#a87f62","#a77e61","#a77d61","#a77c61","#a67b60","#a67a60","#a6795f","#a6785f","#a5775f","#a5765e","#a5755e","#a5745d","#a4735d","#a4725d","#a4715c","#a3705c","#a36f5b","#a36e5b","#a36e5b","#a26d5a","#a26c5a","#a26b59","#a26a59","#a16958","#a16858","#a16758","#a06657","#a06557","#a06456","#a06356","#9f6256","#9f6155","#9f6055","#9e5f54","#9e5e54","#9e5d53","#9e5c53","#9d5b53","#9d5a52","#9d5952","#9c5851","#9c5751","#9c5650","#9b5550","#9b544f","#9b534f","#9a524e","#9a514e","#99504d","#984f4c","#984e4b","#974d4b","#964c4a","#964a49","#954948","#944847","#934746","#924645","#914544","#904343","#8f4242","#8d4141","#8c403f","#8b3e3e","#8a3d3d","#893c3c","#883b3b","#863a39","#853838","#843737","#833636","#813535","#803333","#7f3232","#7e3131","#7d3030","#7b2f2e","#7a2d2d","#792c2c","#782b2b","#762a2a","#752928","#742727","#732626","#722525","#702424","#6f2322","#6e2121","#6d2020","#6c1f1f","#6a1e1e","#691d1c","#681b1b","#671a1a","#651919","#641818","#631717","#621515","#601414","#5f1313","#5e1212","#5d1011","#5b0f10","#5a0e0f","#590c0e","#580b0c","#56090b","#55080a","#540708","#530507","#510405","#500304","#4f0103","#4e0001","#4d0000"],
  "broc":["#2c194c","#2b1b4e","#2b1c4f","#2b1e51","#2b1f52","#2b2154","#2b2355","#2b2457","#2b2658","#2b275a","#2a295b","#2a2a5d","#2a2c5f","#2a2d60","#2a2f62","#2a3063","#2a3265","#293366","#293568","#29376a","#29386b","#293a6d","#293b6e","#283d70","#283f72","#284073","#284275","#284376","#284578","#28477a","#28487b","#294a7d","#294c7e","#294e80","#2a4f82","#2a5183","#2b5385","#2c5486","#2d5688","#2e5889","#2f5a8b","#305b8c","#315d8e","#335f8f","#346191","#366392","#386493","#396695","#3b6896","#3d6a97","#3f6b99","#416d9a","#436f9b","#45719d","#47739e","#49749f","#4c76a0","#4e78a2","#507aa3","#527ca4","#557da5","#577fa7","#5981a8","#5b83a9","#5e84aa","#6086ac","#6288ad","#658aae","#678caf","#698db1","#6c8fb2","#6e91b3","#7093b4","#7395b6","#7596b7","#7898b8","#7a9ab9","#7c9cbb","#7f9ebc","#81a0bd","#84a1be","#86a3c0","#88a5c1","#8ba7c2","#8da9c4","#90abc5","#92acc6","#94aec7","#97b0c9","#99b2ca","#9cb4cb","#9eb6cc","#a1b8ce","#a3b9cf","#a5bbd0","#a8bdd2","#aabfd3","#adc1d4","#afc3d5","#b2c5d7","#b4c6d8","#b7c8d9","#b9cadb","#bcccdc","#becedd","#c1d0df","#c3d2e0","#c6d4e1","#c8d5e2","#cbd7e4","#cdd9e5","#cfdbe6","#d2dde7","#d4dfe8","#d7e0e9","#d9e2ea","#dbe4eb","#dee6ec","#e0e7ed","#e2e9ee","#e4eaee","#e6ecef","#e8edef","#e9eeef","#ebefef","#ecf0ef","#eef1ef","#eff1ee","#eff2ed","#f0f2ec","#f1f2eb","#f1f2ea","#f1f2e9","#f1f2e7","#f1f2e5","#f1f1e4","#f0f1e2","#f0f0e0","#eff0de","#efefdb","#eeeed9","#ededd7","#ececd5","#ebebd2","#eaead0","#e9e9ce","#e8e8cb","#e7e7c9","#e6e6c7","#e5e5c4","#e4e4c2","#e3e3c0","#e2e2bd","#e1e1bb","#e0e0b8","#dfdfb6","#deddb4","#dddcb1","#dbdbaf","#dadaac","#d9d9aa","#d8d7a8","#d6d6a5","#d5d5a3","#d4d3a0","#d2d29e","#d1d09b","#cfcf99","#cdcd97","#cccc94","#caca92","#c8c88f","#c6c68d","#c5c48b","#c3c388","#c1c186","#bfbf84","#bdbd82","#bbbb80","#b9b97d","#b7b67b","#b4b479","#b2b277","#b0b075","#aeae73","#acac71","#aaaa6f","#a8a86e","#a6a66c","#a3a36a","#a1a168","#9f9f66","#9d9d64","#9b9b63","#999961","#97975f","#95955d","#93935b","#91905a","#8e8e58","#8c8c56","#8a8a54","#888853","#868651","#84844f","#82824d","#80804c","#7e7e4a","#7c7c48","#7a7a47","#787845","#767643","#747442","#727240","#70703e","#6e6e3c","#6c6c3b","#6a6a39","#686837","#666636","#646434","#626233","#606031","#5e5e2f","#5c5c2e","#5b5b2c","#59592a","#575729","#555527","#535326","#515124","#4f4f23","#4d4d21","#4b4b20","#4a4a1e","#48481d","#46461b","#44441a","#424218","#414117","#3f3f16","#3d3d14","#3b3b13","#393a12","#383810","#36360f","#34350e","#32330d","#31310b","#2f300a","#2e2e08","#2c2c07","#2a2b05","#292904","#272802","#262601"],
  "cork":["#2c194c","#2b1b4e","#2b1c4f","#2b1e51","#2b1f52","#2b2154","#2b2255","#2b2457","#2b2558","#2b275a","#2a285b","#2a2a5d","#2a2b5e","#2a2d60","#2a2e61","#2a3063","#2a3265","#293366","#293568","#293669","#29386b","#29396c","#293b6e","#283c6f","#283e71","#284073","#284174","#284376","#284577","#284679","#28487b","#29497c","#294b7e","#294d7f","#2a4f81","#2a5082","#2b5284","#2b5486","#2c5587","#2d5789","#2e598a","#2f5b8c","#305c8d","#325e8e","#336090","#356291","#366393","#386594","#3a6795","#3c6997","#3e6a98","#406c99","#426e9b","#44709c","#46719d","#48739e","#4a75a0","#4c77a1","#4e78a2","#517aa3","#537ca4","#557ea6","#577fa7","#5a81a8","#5c83a9","#5e85ab","#6087ac","#6388ad","#658aae","#678cb0","#6a8eb1","#6c8fb2","#6e91b3","#7193b4","#7395b6","#7597b7","#7898b8","#7a9ab9","#7c9cbb","#7f9ebc","#81a0bd","#83a1be","#86a3c0","#88a5c1","#8ba7c2","#8da9c3","#8faac5","#92acc6","#94aec7","#96b0c8","#99b2ca","#9bb3cb","#9eb5cc","#a0b7cd","#a2b9cf","#a5bbd0","#a7bdd1","#aabed3","#acc0d4","#afc2d5","#b1c4d6","#b3c6d8","#b6c8d9","#b8cada","#bbcbdc","#bdcddd","#c0cfde","#c2d1df","#c5d3e1","#c7d5e2","#c9d7e3","#ccd8e4","#cedae6","#d1dce7","#d3dee8","#d5e0e9","#d7e1ea","#dae3eb","#dce5ec","#dee6ed","#dfe8ed","#e1e9ee","#e3eaee","#e4ecee","#e5edef","#e6edee","#e6eeee","#e7efee","#e7efed","#e7efec","#e7efeb","#e6efea","#e5efe9","#e4efe7","#e3eee6","#e1ede4","#e0ede2","#deece0","#dcebdf","#dbeadd","#d9e9db","#d7e7d8","#d5e6d6","#d2e5d4","#d0e4d2","#cee3d0","#cce1ce","#cae0cc","#c8dfca","#c5dec8","#c3dcc5","#c1dbc3","#bfdac1","#bdd8bf","#bad7bd","#b8d6bb","#b6d5b9","#b4d3b7","#b2d2b5","#b0d1b3","#add0b0","#abceae","#a9cdac","#a7ccaa","#a5caa8","#a3c9a6","#a0c8a4","#9ec7a2","#9cc5a0","#9ac49e","#98c39c","#96c29a","#94c098","#92bf96","#8fbe93","#8dbd91","#8bbb8f","#89ba8d","#87b98b","#85b889","#83b687","#81b585","#7eb483","#7cb381","#7ab17f","#78b07d","#76af7b","#74ae79","#72ac77","#70ab75","#6eaa73","#6ca971","#69a76f","#67a66d","#65a56b","#63a468","#61a266","#5fa164","#5da062","#5b9e60","#599d5e","#579c5c","#559a5a","#539957","#519755","#509653","#4e9451","#4c934f","#4b914d","#498f4a","#488e48","#468c46","#458b44","#448942","#438740","#42853e","#42843c","#41823a","#418038","#407f36","#407d34","#3f7b32","#3f7a31","#3f782f","#3f772d","#3f752c","#3f742a","#3f7228","#3f7027","#3f6f25","#3f6d24","#3f6c22","#406b21","#40691f","#40681e","#40661d","#40651b","#40641a","#406219","#416117","#415f16","#415e15","#415d13","#415b12","#415a10","#41590f","#41580e","#42560c","#42550b","#42540a","#425308","#425107","#425005","#424f04","#424e03","#424c02"],
  "davos":["#2b194c","#2b1b4e","#2b1c4f","#2b1d50","#2b1f52","#2b2053","#2b2154","#2a2356","#2a2457","#2a2558","#2a275a","#2a285b","#2a295c","#292b5e","#292c5f","#292d60","#292f62","#293063","#293164","#283366","#283467","#283568","#28376a","#28386b","#28396d","#273b6e","#273c6f","#273e71","#273f72","#274174","#274275","#264377","#264578","#26467a","#26487b","#26497c","#264a7e","#264c7f","#264d81","#264f83","#265084","#265186","#265387","#265489","#26558b","#27578c","#27588e","#275990","#285a92","#295b94","#295d95","#2a5e97","#2b5f99","#2c609b","#2c619d","#2d629f","#2e63a1","#2f64a3","#3065a4","#3166a6","#3266a8","#3367aa","#3468ac","#3569ae","#366ab0","#376bb2","#386cb3","#396db5","#3a6eb7","#3c6fb9","#3d70ba","#3e71bc","#3f72bd","#4073be","#4173bf","#4274c0","#4375c1","#4476c2","#4677c2","#4778c3","#4879c3","#4979c3","#4a7ac3","#4b7bc3","#4c7cc3","#4d7cc3","#4f7dc3","#507ec3","#517fc3","#527fc2","#5380c2","#5481c2","#5582c1","#5682c1","#5783c1","#5884c1","#5984c0","#5b85c0","#5c86bf","#5d87bf","#5e87bf","#5f88be","#6089be","#618abe","#628abd","#638bbd","#658cbd","#668dbc","#678dbc","#688ebc","#698fbb","#6a90bb","#6b90bb","#6c91ba","#6e92ba","#6f93ba","#7093b9","#7194b9","#7295b9","#7396b8","#7496b8","#7597b8","#7798b7","#7899b7","#7999b7","#7a9ab6","#7b9bb6","#7c9cb6","#7d9cb5","#7f9db5","#809eb4","#819fb4","#829fb4","#83a0b3","#84a1b3","#86a2b3","#87a2b2","#88a3b2","#89a4b2","#8aa5b1","#8ba6b1","#8da6b1","#8ea7b0","#8fa8b0","#90a9af","#91a9af","#92aaaf","#94abae","#95acae","#96adae","#97adad","#98aead","#99afad","#9bb0ac","#9cb0ac","#9db1ac","#9eb2ab","#9fb3ab","#a1b4aa","#a2b4aa","#a3b5aa","#a4b6a9","#a5b7a9","#a6b8a9","#a8b8a8","#a9b9a8","#aabaa8","#abbba7","#acbca7","#aebca6","#afbda6","#b0bea6","#b1bfa5","#b3c0a5","#b4c0a5","#b5c1a4","#b6c2a4","#b7c3a3","#b9c4a3","#bac4a3","#bbc5a2","#bcc6a2","#bdc7a2","#bfc8a1","#c0c8a1","#c1c9a0","#c2caa0","#c4cba0","#c5cc9f","#c6cc9f","#c7cd9f","#c9ce9e","#cacf9e","#cbd09e","#ccd19e","#cdd19e","#cfd29e","#d0d39e","#d1d49e","#d2d59e","#d3d69e","#d5d79f","#d6d79f","#d7d8a0","#d8d9a1","#d9daa2","#dadba3","#dbdca4","#dcdca5","#dddda7","#dedea8","#dfdfaa","#dfe0ab","#e0e0ad","#e1e1af","#e2e2b1","#e3e3b3","#e3e3b5","#e4e4b6","#e5e5b8","#e6e6ba","#e6e6bc","#e7e7be","#e8e8c0","#e9e8c2","#e9e9c4","#eaeac6","#ebebc8","#ecebca","#ececcc","#ededce","#eeeed0","#eeeed2","#efefd4","#f0f0d6","#f1f1d8","#f1f1da","#f2f2dc","#f3f3de","#f4f4e0","#f4f4e2","#f5f5e4","#f6f6e6","#f7f7e8","#f7f7ea","#f8f8ec","#f9f9ee","#fafaf0","#fafaf2","#fbfbf4","#fcfcf6","#fdfdf7","#fdfdf9","#fefefb","#fffffd","#ffffff"],
  "devon":["#2b194c","#2b1a4d","#2b1b4e","#2b1c4f","#2b1d50","#2b1e51","#2b1f52","#2a2053","#2a2154","#2a2255","#2a2356","#2a2457","#2a2558","#2a2659","#2a275a","#2a285b","#29295c","#292a5d","#292b5e","#292c5f","#292d60","#292e61","#292e62","#292f63","#283064","#283165","#283266","#283367","#283468","#283569","#28366a","#28376b","#28386c","#27396d","#273a6e","#273b6f","#273c70","#273e71","#273f72","#274073","#274174","#264275","#264376","#264477","#264578","#264679","#26477a","#26487b","#26497c","#254a7d","#254b7e","#254c7f","#254d81","#254e82","#254f83","#255084","#255185","#255286","#255387","#255489","#25558a","#25568b","#26578c","#26588e","#26598f","#275a90","#275b91","#285b93","#285c94","#295d95","#295e97","#2a5f98","#2a5f9a","#2b609b","#2c619c","#2d619e","#2d629f","#2e63a0","#2f63a2","#2f64a3","#3065a5","#3165a6","#3266a7","#3267a9","#3367aa","#3468ac","#3569ad","#356aaf","#366ab0","#376bb1","#386cb3","#386cb4","#396db6","#3a6eb7","#3b6eb9","#3c6fba","#3d70bb","#3e71bd","#3f71be","#4072bf","#4173c1","#4374c2","#4475c3","#4675c5","#4776c6","#4977c7","#4b78c8","#4d79c9","#4f7aca","#517bcb","#537ccc","#557dcd","#577ece","#597fcf","#5b80d0","#5d80d1","#5f81d2","#6282d3","#6483d4","#6684d4","#6885d5","#6a86d6","#6c87d7","#6e88d8","#7189d8","#738ad9","#758bda","#778cdb","#798cdc","#7b8ddc","#7d8edd","#7f8fde","#8190df","#8391df","#8592e0","#8792e1","#8993e2","#8b94e2","#8d95e3","#8f96e4","#9197e5","#9398e5","#9598e6","#9799e7","#989ae7","#9a9be8","#9c9ce9","#9e9de9","#9f9dea","#a19eea","#a29feb","#a4a0ec","#a5a1ec","#a7a2ec","#a8a3ed","#a9a3ed","#aaa4ee","#aba5ee","#aca6ee","#ada7ee","#aea8ef","#afa9ef","#b0aaef","#b1aaef","#b2abf0","#b3acf0","#b4adf0","#b5aef0","#b5aff0","#b6b0f0","#b7b1f1","#b8b1f1","#b9b2f1","#b9b3f1","#bab4f1","#bbb5f1","#bcb6f2","#bdb7f2","#beb8f2","#beb9f2","#bfb9f2","#c0baf2","#c1bbf3","#c2bcf3","#c2bdf3","#c3bef3","#c4bff3","#c5c0f3","#c6c1f4","#c7c2f4","#c7c2f4","#c8c3f4","#c9c4f4","#cac5f4","#cbc6f5","#ccc7f5","#ccc8f5","#cdc9f5","#cecaf5","#cfcbf6","#d0ccf6","#d1ccf6","#d1cdf6","#d2cef6","#d3cff6","#d4d0f7","#d5d1f7","#d6d2f7","#d7d3f7","#d7d4f7","#d8d5f7","#d9d6f8","#dad7f8","#dbd8f8","#dcd8f8","#ddd9f8","#dddaf8","#dedbf9","#dfdcf9","#e0ddf9","#e1def9","#e2dff9","#e3e0fa","#e3e1fa","#e4e2fa","#e5e3fa","#e6e4fa","#e7e5fa","#e8e6fb","#e9e7fb","#e9e7fb","#eae8fb","#ebe9fb","#eceafc","#edebfc","#eeecfc","#efedfc","#f0eefc","#f0effc","#f1f0fd","#f2f1fd","#f3f2fd","#f4f3fd","#f5f4fd","#f6f5fd","#f7f6fe","#f8f7fe","#f8f8fe","#f9f9fe","#fafafe","#fbfbff","#fcfcff","#fdfdff","#fefeff","#ffffff","#ffffff"],
  "grayC":["#ffffff","#fefefe","#fdfdfd","#fcfcfc","#fbfbfb","#fafafa","#f9f9f9","#f8f8f8","#f6f6f6","#f5f5f5","#f4f4f4","#f3f3f3","#f2f2f2","#f1f1f1","#f0f0f0","#eeeeee","#ededed","#ececec","#ebebeb","#eaeaea","#e9e9e9","#e8e8e8","#e7e7e7","#e6e6e6","#e4e4e4","#e3e3e3","#e2e2e2","#e1e1e1","#e0e0e0","#dfdfdf","#dedede","#dddddd","#dbdbdb","#dadada","#d9d9d9","#d8d8d8","#d7d7d7","#d6d6d6","#d5d5d5","#d4d4d4","#d3d3d3","#d2d2d2","#d0d0d0","#cfcfcf","#cecece","#cdcdcd","#cccccc","#cbcbcb","#cacaca","#c9c9c9","#c8c8c8","#c7c7c7","#c6c6c6","#c4c4c4","#c3c3c3","#c2c2c2","#c1c1c1","#c0c0c0","#bfbfbf","#bebebe","#bdbdbd","#bcbcbc","#bbbbbb","#bababa","#b9b9b9","#b7b7b7","#b6b6b6","#b5b5b5","#b4b4b4","#b3b3b3","#b2b2b2","#b1b1b1","#b0b0b0","#afafaf","#aeaeae","#adadad","#acacac","#ababab","#aaaaaa","#a9a9a9","#a8a8a8","#a6a6a6","#a5a5a5","#a4a4a4","#a3a3a3","#a2a2a2","#a1a1a1","#a0a0a0","#9f9f9f","#9e9e9e","#9d9d9d","#9c9c9c","#9b9b9b","#9a9a9a","#999999","#989898","#979797","#969696","#959595","#949494","#939393","#929292","#919191","#909090","#8f8f8f","#8e8e8e","#8d8d8d","#8c8c8c","#8a8a8a","#898989","#888888","#878787","#868686","#858585","#848484","#838383","#828282","#818181","#808080","#7f7f7f","#7e7e7e","#7d7d7d","#7c7c7c","#7b7b7b","#7a7a7a","#797979","#787878","#777777","#767676","#757575","#747474","#737373","#727272","#717171","#707070","#6f6f6f","#6f6f6f","#6e6e6e","#6d6d6d","#6c6c6c","#6b6b6b","#6a6a6a","#696969","#686868","#676767","#666666","#656565","#646464","#636363","#626262","#616161","#606060","#5f5f5f","#5e5e5e","#5d5d5d","#5c5c5c","#5b5b5b","#5a5a5a","#595959","#585858","#575757","#575757","#565656","#555555","#545454","#535353","#525252","#515151","#505050","#4f4f4f","#4e4e4e","#4d4d4d","#4c4c4c","#4b4b4b","#4b4b4b","#4a4a4a","#494949","#484848","#474747","#464646","#454545","#444444","#434343","#424242","#414141","#414141","#404040","#3f3f3f","#3e3e3e","#3d3d3d","#3c3c3c","#3b3b3b","#3a3a3a","#393939","#393939","#383838","#373737","#363636","#353535","#343434","#333333","#333333","#323232","#313131","#303030","#2f2f2f","#2e2e2e","#2d2d2d","#2d2d2d","#2c2c2c","#2b2b2b","#2a2a2a","#292929","#282828","#282828","#272727","#262626","#252525","#242424","#232323","#232323","#222222","#212121","#202020","#1f1f1f","#1f1f1f","#1e1e1e","#1d1d1d","#1c1c1c","#1b1b1b","#1b1b1b","#1a1a1a","#191919","#181818","#181818","#171717","#161616","#151515","#141414","#131313","#131313","#121212","#111111","#101010","#0f0f0f","#0d0d0d","#0c0c0c","#0b0b0b","#0a0a0a","#080808","#070707","#050505","#040404","#020202","#010101","#000000"],
  "lajolla":["#ffffcc","#ffffca","#fffec8","#fffdc6","#fffdc4","#fffcc3","#fffbc1","#fffbbf","#fefabd","#fef9bb","#fef9b9","#fef8b7","#fef7b5","#fef7b3","#fdf6b1","#fdf5af","#fdf5ad","#fdf4ab","#fdf3a9","#fdf3a7","#fdf2a5","#fcf1a3","#fcf1a1","#fcf0a0","#fcef9e","#fcee9c","#fbee9a","#fbed98","#fbec96","#fbec94","#fbeb92","#fbea90","#faea8e","#fae98c","#fae88a","#fae788","#fae786","#fae684","#f9e582","#f9e480","#f9e37e","#f9e37c","#f8e27a","#f8e178","#f8e076","#f8df74","#f8de72","#f7dd70","#f7dc6e","#f7db6d","#f7d96b","#f6d869","#f6d767","#f6d666","#f5d464","#f5d363","#f5d261","#f4d060","#f4cf5f","#f4ce5d","#f4cc5c","#f3cb5b","#f3c95a","#f3c85a","#f2c759","#f2c558","#f2c458","#f1c257","#f1c157","#f1c056","#f1be56","#f0bd56","#f0bc55","#f0ba55","#efb955","#efb855","#efb755","#efb554","#eeb454","#eeb354","#eeb254","#eeb054","#edaf54","#edae54","#edac54","#edab53","#ecaa53","#eca953","#eca753","#eca653","#eba553","#eba453","#eba253","#eba153","#eaa053","#ea9f52","#ea9d52","#ea9c52","#e99b52","#e99a52","#e99852","#e89752","#e89652","#e89552","#e89352","#e79252","#e79151","#e79051","#e78e51","#e68d51","#e68c51","#e68b51","#e68951","#e58851","#e58751","#e58551","#e58450","#e48350","#e48250","#e48050","#e47f50","#e37e50","#e37c50","#e37b50","#e27a50","#e27850","#e27750","#e2764f","#e1744f","#e1734f","#e1724f","#e0704f","#e06f4f","#df6e4f","#df6c4f","#df6b4f","#de694e","#de684e","#dd674e","#dd654e","#dc644e","#db624e","#db614e","#da604d","#d95e4d","#d85d4d","#d75b4d","#d65a4d","#d5594c","#d4574c","#d2564c","#d1554c","#d0544c","#ce534b","#cd524b","#cb514b","#c9504b","#c84f4a","#c64e4a","#c44d4a","#c34c4a","#c14c49","#bf4b49","#bd4b49","#bb4a49","#ba4a48","#b84948","#b64948","#b44847","#b24847","#b14847","#af4746","#ad4746","#ab4746","#a94645","#a74645","#a64644","#a44544","#a24543","#a04443","#9e4442","#9c4442","#9a4341","#984340","#974240","#95423f","#93413e","#91413e","#8f403d","#8d403c","#8b3f3b","#893f3a","#873e3a","#853d39","#833d38","#813c37","#7f3c36","#7d3b35","#7b3a34","#793a33","#773932","#763931","#743830","#72372f","#70372e","#6e362d","#6c352c","#6a352b","#68342a","#663429","#643328","#623227","#613226","#5f3125","#5d3024","#5b3023","#592f22","#572f21","#552e20","#542d1f","#522d1e","#502c1d","#4e2b1d","#4c2b1c","#4b2a1b","#492a1a","#472919","#452918","#442817","#422717","#402716","#3e2615","#3d2614","#3b2513","#392513","#382412","#362311","#342310","#33220f","#31220f","#30210e","#2e210d","#2c200c","#2b200b","#291f0a","#281f09","#261e08","#251d07","#231d06","#221c05","#201c04","#1f1b03","#1d1b03","#1c1a02","#1b1a01","#191900"],
  "lapaz":["#1a0c64","#1a0d65","#1a0f66","#1b1167","#1b1268","#1b1469","#1c156a","#1c176b","#1c186c","#1d196d","#1d1b6e","#1d1c6f","#1d1d70","#1e1f71","#1e2072","#1e2173","#1f2374","#1f2475","#1f2576","#1f2677","#1f2878","#202979","#202a7a","#202b7b","#202d7c","#212e7c","#212f7d","#21307e","#21327f","#213380","#223481","#223582","#223683","#223884","#233984","#233a85","#233b86","#233c87","#233e88","#243f89","#244089","#24418a","#24428b","#25448c","#25458c","#25468d","#25478e","#26488f","#26498f","#264a90","#264c91","#274d92","#274e92","#274f93","#285094","#285194","#285295","#295496","#295596","#295697","#2a5797","#2a5898","#2a5999","#2b5a99","#2b5b9a","#2c5d9a","#2c5e9b","#2c5f9b","#2d609c","#2d619c","#2e629d","#2e639d","#2f649e","#2f659e","#30669f","#30679f","#3169a0","#316aa0","#326ba0","#326ca1","#336da1","#346ea2","#346fa2","#3570a2","#3571a3","#3672a3","#3773a3","#3774a4","#3875a4","#3976a4","#3a77a4","#3a78a5","#3b79a5","#3c7aa5","#3d7ba5","#3e7ca6","#3e7da6","#3f7ea6","#407fa6","#4180a6","#4281a7","#4382a7","#4483a7","#4584a7","#4685a7","#4786a7","#4887a7","#4a88a7","#4b89a7","#4c8aa7","#4d8ba7","#4e8ca7","#508ca7","#518da7","#528ea7","#548fa7","#5590a7","#5691a7","#5891a7","#5992a7","#5a93a6","#5c94a6","#5d95a6","#5f95a6","#6096a5","#6297a5","#6397a5","#6598a5","#6699a4","#6899a4","#699aa4","#6b9ba3","#6d9ba3","#6e9ca3","#709ca2","#719da2","#739da1","#749ea1","#769ea0","#789fa0","#799f9f","#7ba09f","#7ca09e","#7ea09e","#7fa19d","#81a19d","#83a19c","#84a29c","#86a29b","#87a29b","#89a39a","#8aa39a","#8ca399","#8da398","#8fa498","#90a497","#92a497","#93a496","#95a496","#96a495","#98a594","#99a594","#9aa593","#9ca593","#9da592","#9fa592","#a0a691","#a2a690","#a3a690","#a5a68f","#a6a68f","#a7a68e","#a9a68e","#aaa68d","#aca78d","#ada78d","#afa78c","#b0a78c","#b2a78b","#b3a88b","#b5a88b","#b6a88a","#b8a88a","#b9a98a","#bba98a","#bca98a","#beaa89","#c0aa89","#c1aa89","#c3ab89","#c5ab8a","#c7ac8a","#c8ac8a","#caad8a","#ccae8b","#ceaf8b","#d0af8c","#d2b08d","#d4b18e","#d6b28e","#d7b38f","#d9b490","#dbb592","#ddb693","#dfb894","#e1b996","#e3ba97","#e5bb99","#e7bd9a","#e8be9c","#eabf9e","#ecc1a0","#edc2a2","#efc3a4","#f0c5a5","#f1c6a7","#f3c8a9","#f4c9ab","#f5caad","#f6ccaf","#f7cdb1","#f8ceb3","#f9d0b5","#f9d1b7","#fad2b9","#fbd3bb","#fbd4bd","#fcd6bf","#fcd7c1","#fdd8c3","#fdd9c5","#fddac7","#fedbc9","#fedccb","#feddcd","#fedfce","#ffe0d0","#ffe1d2","#ffe2d4","#ffe3d6","#ffe4d8","#ffe5d9","#ffe6db","#ffe7dd","#ffe8df","#ffe9e1","#ffeae3","#ffebe5","#ffece6","#ffede8","#ffeeea","#ffefec","#fff0ee","#fff1f0","#fff2f1","#fff3f3"],
  "lisbon":["#e6e6ff","#e3e4fe","#e1e2fc","#dee0fb","#dbdef9","#d8dcf7","#d6daf6","#d3d8f4","#d0d6f3","#ced4f1","#cbd2ef","#c8d0ee","#c6ceec","#c3cceb","#c0cae9","#bdc8e7","#bbc6e6","#b8c4e4","#b5c2e3","#b3c1e1","#b0bfdf","#adbdde","#abbbdc","#a8b9db","#a6b7d9","#a3b5d8","#a0b3d6","#9eb1d4","#9bafd3","#98add1","#96abd0","#93a9ce","#91a7cd","#8ea6cb","#8ba4c9","#89a2c8","#86a0c6","#849ec5","#819cc3","#7e9ac2","#7c98c0","#7996be","#7794bd","#7492bb","#7290ba","#6f8fb8","#6c8db6","#6a8bb5","#6789b3","#6587b2","#6285b0","#6083ae","#5d81ad","#5b7fab","#587da9","#567ba7","#5479a6","#5177a4","#4f75a2","#4c73a0","#4a719f","#48709d","#456e9b","#436c99","#416a97","#3e6895","#3c6693","#3a6491","#38628f","#36608d","#345e8a","#325c88","#305a86","#2e5884","#2d5782","#2b557f","#29537d","#28517b","#264f78","#254d76","#234c74","#224a71","#21486f","#20476d","#1f456a","#1e4368","#1d4266","#1c4063","#1b3e61","#1a3d5f","#193b5c","#183a5a","#183858","#173756","#163553","#163451","#15324f","#15314d","#14304a","#142e48","#132d46","#132b44","#132a42","#122940","#12283d","#12263b","#112539","#112437","#112335","#112233","#112131","#111f2f","#111f2d","#111e2c","#111d2a","#111c28","#111b26","#111a25","#111a23","#121922","#121920","#12181f","#13181e","#13181d","#14181c","#14181b","#15181a","#161819","#161819","#171918","#181918","#191a17","#1a1a17","#1b1b17","#1c1c17","#1d1d17","#1e1e17","#201f17","#212018","#222118","#242218","#252319","#272519","#28261a","#2a271b","#2b291b","#2d2a1c","#2e2c1d","#302d1e","#312f1e","#33301f","#353220","#363321","#383522","#3a3623","#3c3824","#3d3a25","#3f3b26","#413d27","#433f28","#444029","#46422a","#48442b","#4a452c","#4b472d","#4d492e","#4f4a2f","#514c30","#534e31","#555032","#565133","#585335","#5a5536","#5c5737","#5e5838","#605a39","#625c3a","#645e3b","#665f3d","#67613e","#69633f","#6b6540","#6d6741","#6f6942","#716a44","#736c45","#756e46","#777047","#797248","#7b744a","#7d764b","#7f784c","#817a4e","#837b4f","#857d50","#877f52","#898153","#8b8355","#8d8556","#8f8757","#928959","#948b5b","#968d5c","#988f5e","#9a915f","#9c9461","#9e9663","#a09865","#a29a67","#a49c68","#a79e6a","#a9a06c","#aba26e","#ada570","#afa772","#b1a975","#b3ab77","#b5ad79","#b7af7b","#b9b17d","#bbb480","#bdb682","#bfb884","#c1ba87","#c3bc89","#c5be8b","#c7c18e","#c9c390","#cbc593","#cdc795","#cfc998","#d1cb9a","#d3ce9d","#d5d09f","#d7d2a2","#d9d4a4","#dbd6a7","#ddd8aa","#dfdaac","#e1ddaf","#e3dfb1","#e4e1b4","#e6e3b7","#e8e5b9","#eae7bc","#eceabe","#eeecc1","#f0eec4","#f2f0c6","#f4f2c9","#f6f5cc","#f8f7ce","#faf9d1","#fcfbd4","#fefdd6","#ffffd9"],
  "oleron":["#192659","#1b275b","#1d295c","#1e2a5e","#202c5f","#212d61","#232f62","#243064","#263265","#273367","#293568","#2a376a","#2c386b","#2d3a6d","#2f3b6f","#303d70","#323e72","#344073","#354275","#374376","#384578","#3a467a","#3b487b","#3d4a7d","#3f4b7e","#404d80","#424e82","#445083","#455285","#475387","#485588","#4a578a","#4c588c","#4d5a8d","#4f5c8f","#515d91","#525f92","#546194","#566296","#586497","#596699","#5b689b","#5d699d","#5e6b9e","#606da0","#626ea2","#6470a3","#6572a5","#6774a7","#6975a9","#6b77aa","#6c79ac","#6e7bae","#707cb0","#727eb2","#7380b3","#7582b5","#7784b7","#7985b9","#7a87ba","#7c89bc","#7e8bbe","#808dc0","#828ec2","#8390c3","#8592c5","#8794c7","#8996c9","#8b97cb","#8d99cd","#8e9bce","#909dd0","#929fd2","#94a1d4","#96a3d6","#98a4d7","#99a6d9","#9ba8db","#9daadd","#9facde","#a1aee0","#a3afe2","#a5b1e4","#a6b3e5","#a8b5e7","#aab7e8","#acb9ea","#aebaeb","#afbcec","#b1beed","#b3bfee","#b4c1f0","#b6c3f0","#b8c4f1","#b9c6f2","#bbc7f3","#bcc9f4","#becaf4","#bfccf5","#c0cdf5","#c2cff6","#c3d0f6","#c5d1f7","#c6d3f7","#c7d4f8","#c9d5f8","#cad7f8","#cbd8f9","#cdd9f9","#cedbf9","#cfdcfa","#d1ddfa","#d2dffb","#d3e0fb","#d5e1fb","#d6e3fc","#d7e4fc","#d9e5fc","#dae7fd","#dbe8fd","#dde9fd","#deebfe","#dfecfe","#e1edfe","#e2efff","#e3f0ff","#e5f1ff","#e6f3ff","#194c00","#1c4d00","#1f4e00","#224e00","#244f00","#275000","#295100","#2c5100","#2e5200","#315300","#335300","#355400","#375500","#395500","#3c5600","#3e5700","#405700","#425800","#445900","#465900","#485a00","#4a5b00","#4d5b01","#4f5c01","#515d01","#535e02","#555f03","#575f03","#5a6004","#5c6105","#5e6207","#606308","#63640a","#65650c","#67670e","#6a6810","#6c6912","#6e6a14","#716c16","#736d18","#756e1a","#78701c","#7a711e","#7c7221","#7e7423","#817525","#837627","#85782a","#87792c","#8a7b2e","#8c7c30","#8e7d33","#907f35","#928037","#948239","#97833c","#99843e","#9b8640","#9d8742","#9f8945","#a18a47","#a48c49","#a68d4c","#a88f4e","#aa9050","#ac9252","#af9455","#b19557","#b39759","#b5985c","#b89a5e","#ba9c60","#bc9e62","#bf9f65","#c1a167","#c3a369","#c5a56c","#c8a66e","#caa871","#ccaa73","#cfac75","#d1ae78","#d3af7a","#d5b17c","#d8b37f","#dab581","#dcb784","#deb986","#e0ba89","#e2bc8b","#e4be8e","#e6c090","#e8c293","#e9c495","#ebc698","#ecc89a","#eec99d","#efcb9f","#f0cda2","#f1cfa4","#f2d1a7","#f3d2a9","#f4d4ac","#f4d6ae","#f5d7b0","#f6d9b3","#f6dbb5","#f7dcb7","#f7deba","#f7e0bc","#f8e1be","#f8e3c0","#f9e4c3","#f9e6c5","#f9e8c7","#f9e9ca","#faebcc","#faecce","#faeed1","#fbf0d3","#fbf1d5","#fbf3d8","#fcf5da","#fcf6dc","#fcf8df","#fdfae1","#fdfbe4","#fdfde6"],
  "oslo":["#000000","#000102","#010204","#010406","#010509","#02060b","#02070d","#03080f","#030910","#040a12","#040b13","#050c15","#050d16","#060e17","#060f18","#07101a","#07111b","#08121c","#08131d","#09141e","#091420","#091521","#0a1622","#0a1724","#0a1725","#0a1826","#0a1928","#0a1a29","#0b1b2a","#0b1b2c","#0b1c2d","#0b1d2f","#0b1e30","#0c1f31","#0c2033","#0c2134","#0c2136","#0d2237","#0d2339","#0d243a","#0d253c","#0e263d","#0e273f","#0e2840","#0f2942","#0f2a43","#0f2b45","#102c46","#102d48","#102e49","#112e4b","#112f4c","#11304e","#123150","#123251","#123353","#133454","#133556","#133658","#143759","#14385b","#15395c","#153a5e","#153b60","#163c61","#163d63","#163e64","#173f66","#174068","#184169","#18426b","#18436d","#19446e","#194570","#1a4672","#1a4873","#1b4975","#1b4a77","#1c4b78","#1c4c7a","#1d4d7c","#1d4e7d","#1e4f7f","#1e5081","#1f5182","#1f5284","#205386","#215487","#225589","#22568b","#23578c","#24588e","#255990","#255a91","#265a93","#275b95","#285c96","#295d98","#2a5e9a","#2b5f9c","#2c609d","#2d619f","#2e62a1","#2f63a2","#3064a4","#3165a6","#3266a7","#3367a9","#3468ab","#3569ac","#366aae","#376bb0","#386cb1","#396db3","#3a6eb5","#3c6fb6","#3d70b8","#3e71ba","#3f72bb","#4173bd","#4274be","#4475c0","#4577c1","#4778c2","#4879c3","#4a7ac4","#4b7bc5","#4d7cc6","#4e7dc7","#507ec8","#517fc8","#5380c9","#5481ca","#5582ca","#5783ca","#5884ca","#5a85cb","#5b86cb","#5c86cb","#5e87cb","#5f88cb","#6089cb","#618acb","#638acb","#648bcb","#658ccb","#678dcb","#688ecb","#698ecb","#6a8fcb","#6c90cb","#6d91cb","#6e91cb","#6f92cb","#7193cb","#7294cb","#7394cb","#7495cb","#7696ca","#7797ca","#7897ca","#7998ca","#7b99ca","#7c9aca","#7d9aca","#7e9bca","#809cca","#819dca","#829eca","#839eca","#859fca","#86a0ca","#87a1ca","#89a1ca","#8aa2ca","#8ba3ca","#8ca4ca","#8ea4ca","#8fa5c9","#90a6c9","#91a7c9","#93a7c9","#94a8c9","#95a9c9","#97aac9","#98abc9","#99abc9","#9aacc9","#9cadc9","#9daec9","#9eaec9","#a0afc9","#a1b0c9","#a2b1c9","#a3b2c9","#a5b2c9","#a6b3c9","#a7b4c9","#a9b5c8","#aab5c8","#abb6c8","#acb7c8","#aeb8c8","#afb9c8","#b0b9c8","#b2bac8","#b3bbc8","#b4bcc9","#b6bdc9","#b7bec9","#b8bfc9","#bac0c9","#bbc1c9","#bdc1ca","#bec3ca","#bfc4ca","#c1c5cb","#c2c6cb","#c4c7cc","#c5c8cd","#c7c9cd","#c9cbce","#cacccf","#cccdd0","#cdcfd1","#cfd0d2","#d0d1d3","#d2d3d4","#d4d4d6","#d5d6d7","#d7d7d8","#d9d9da","#dadadb","#dcdcdc","#dddede","#dfdfdf","#e1e1e1","#e2e2e3","#e4e4e4","#e5e6e6","#e7e7e7","#e9e9e9","#eaeaea","#ececec","#eeeeee","#efefef","#f1f1f1","#f2f2f2","#f4f4f4","#f6f6f6","#f7f7f7","#f9f9f9","#fbfbfb","#fcfcfc","#fefefe","#ffffff"],
  "roma":["#7e1900","#801c01","#811f02","#822203","#832504","#852705","#862a06","#872d06","#882f07","#8a3108","#8b3409","#8c360a","#8d380b","#8e3b0c","#8f3d0c","#903f0d","#92410e","#93440f","#944610","#954811","#964a12","#974c13","#984e14","#995015","#9a5315","#9b5516","#9c5717","#9d5918","#9e5b19","#9f5d1a","#a05f1b","#a1611c","#a2631c","#a3651d","#a4671e","#a5691f","#a66b20","#a76d21","#a86f21","#a97122","#aa7323","#ab7524","#ac7725","#ad7926","#ae7c27","#af7e27","#b08028","#b18229","#b2842a","#b3862b","#b4882c","#b58a2d","#b68c2e","#b78e2e","#b8902f","#b99230","#ba9431","#bb9632","#bc9933","#bd9b35","#be9d36","#bf9f37","#c0a138","#c1a339","#c2a63b","#c3a83c","#c4aa3e","#c6ac3f","#c7af41","#c8b143","#c9b344","#cab646","#cbb848","#cdba4a","#cebc4d","#cfbf4f","#d0c151","#d2c354","#d3c556","#d4c859","#d5ca5c","#d6cc5e","#d8ce61","#d9d064","#dad267","#dbd36a","#dcd56c","#ddd76f","#ded872","#dfda75","#e0db78","#e0dc7b","#e1de7e","#e2df80","#e3e083","#e3e186","#e4e289","#e4e38b","#e5e48e","#e5e590","#e5e593","#e6e695","#e6e798","#e6e79a","#e6e89d","#e6e89f","#e6e9a1","#e6e9a4","#e6eaa6","#e6eaa8","#e6ebaa","#e5ebad","#e5ebaf","#e4ecb1","#e4ecb3","#e3ecb5","#e2ecb7","#e1edb9","#e0edba","#dfedbc","#deedbe","#ddedc0","#dbedc1","#daeec3","#d8eec4","#d7eec6","#d5eec7","#d3eec9","#d1edca","#cfedcb","#cdedcc","#cbedcd","#c9edcf","#c6edd0","#c4ecd1","#c1ecd1","#bfecd2","#bcebd3","#b9ebd4","#b7ead5","#b4ead5","#b1e9d6","#aee9d7","#abe8d7","#a8e7d8","#a5e7d8","#a2e6d9","#9fe5d9","#9ce4d9","#99e3da","#96e2da","#93e1da","#90e0da","#8ddfda","#8addda","#87dcdb","#84dbda","#81d9da","#7ed8da","#7bd6da","#78d5da","#75d3da","#73d1d9","#70d0d9","#6eced9","#6bccd8","#69cad8","#67c9d7","#65c7d7","#63c5d6","#61c3d6","#5fc1d5","#5ebfd4","#5cbed4","#5abcd3","#59bad2","#58b8d2","#56b6d1","#55b4d0","#54b2d0","#53b0cf","#52afce","#50adcd","#4fabcd","#4ea9cc","#4da7cb","#4da5ca","#4ca4ca","#4ba2c9","#4aa0c8","#499ec7","#489cc7","#479ac6","#4799c5","#4697c4","#4595c3","#4493c3","#4492c2","#4390c1","#428ec0","#418cc0","#418abf","#4089be","#3f87bd","#3e85bd","#3e84bc","#3d82bb","#3c80bb","#3c7eba","#3b7db9","#3a7bb8","#3979b8","#3978b7","#3876b6","#3774b5","#3773b5","#3671b4","#356fb3","#356eb3","#346cb2","#336ab1","#3369b0","#3267b0","#3165af","#3164ae","#3062ae","#2f61ad","#2f5fac","#2e5dac","#2d5cab","#2d5aaa","#2c59a9","#2b57a9","#2b55a8","#2a54a7","#2952a7","#2951a6","#284fa5","#274da5","#274ca4","#264aa3","#2549a3","#2547a2","#2446a1","#2344a1","#2342a0","#22419f","#213f9f","#203e9e","#1f3c9d","#1f3b9c","#1e399c","#1d379b","#1c369a","#1b349a","#1a3399"],
  "tofino":["#ded9ff","#dcd7fe","#d9d5fd","#d6d3fc","#d3d1fb","#d1d0fa","#cecef8","#cbccf7","#c9caf6","#c6c8f5","#c3c6f4","#c1c4f3","#bec2f1","#bbc0f0","#b8bfef","#b6bdee","#b3bbed","#b0b9ec","#aeb7ea","#abb5e9","#a8b3e8","#a6b1e7","#a3b0e6","#a0aee5","#9eace3","#9baae2","#98a8e1","#96a6e0","#93a4df","#90a2dd","#8ea1dc","#8b9fdb","#889dda","#869bd8","#8399d7","#8097d6","#7e95d4","#7b93d3","#7991d2","#768fd0","#738dcf","#718bcd","#6e89cc","#6b87ca","#6985c8","#6683c7","#6481c5","#617fc3","#5f7dc1","#5c7bbf","#5a79bd","#5777bb","#5575b8","#5373b6","#5171b4","#4e6fb2","#4c6daf","#4a6bad","#4869aa","#4667a8","#4565a5","#4363a2","#4161a0","#40609d","#3e5e9b","#3d5c98","#3b5a95","#3a5993","#395790","#38558d","#36548b","#355288","#345086","#334f83","#324d80","#314b7e","#304a7b","#2f4879","#2e4776","#2d4574","#2c4471","#2b426f","#2a416c","#293f6a","#283e67","#273c65","#263b62","#253960","#24385d","#23365b","#223558","#213356","#203254","#1f3151","#1f2f4f","#1e2e4c","#1d2c4a","#1c2b48","#1b2a46","#1a2843","#1a2741","#19263f","#18253c","#17233a","#172238","#162136","#152034","#151f32","#141e30","#131d2e","#131c2c","#121b2a","#121a28","#111926","#111824","#111722","#101721","#10161f","#0f151e","#0f151c","#0e151b","#0e141a","#0d1418","#0d1417","#0d1416","#0c1415","#0c1515","#0c1514","#0c1513","#0c1612","#0c1612","#0d1712","#0d1811","#0d1911","#0e1911","#0e1a11","#0f1b11","#0f1c11","#101d12","#101e12","#111f12","#112113","#112213","#122314","#122414","#132615","#132715","#142916","#142a17","#152b17","#152d18","#162e18","#173019","#17311a","#18331b","#19341b","#19361c","#1a381d","#1b391e","#1b3b1e","#1c3c1f","#1d3e20","#1e4021","#1e4122","#1f4323","#204523","#214624","#214825","#224a26","#234b27","#244d28","#254f29","#255129","#26522a","#27542b","#28562c","#29582d","#2a592e","#2a5b2f","#2b5d30","#2c5f31","#2d6132","#2e6233","#2f6434","#306635","#306836","#316a36","#326c37","#336d38","#346f39","#35713a","#36733c","#37753d","#39773e","#3a793f","#3b7b40","#3c7d41","#3e7f42","#3f8143","#418345","#428546","#448747","#468948","#478b4a","#498d4b","#4b8f4c","#4e914e","#50934f","#529551","#549852","#579a54","#599c55","#5c9e57","#5fa059","#61a25a","#64a45c","#67a65d","#6aa85f","#6daa61","#70ab62","#73ad64","#76af66","#79b167","#7cb369","#7fb46b","#82b66c","#85b86e","#88ba6f","#8bbb71","#8ebd73","#91bf74","#94c076","#97c277","#9ac379","#9dc57b","#a0c77c","#a3c87e","#a6ca7f","#a9cb81","#accd83","#afcf84","#b2d086","#b5d287","#b8d389","#bbd58a","#bed68c","#c1d88e","#c4d98f","#c7db91","#cadd92","#cdde94","#d0e095","#d3e197","#d6e398","#d9e49a","#dce69c"],
  "tokyo":["#1a0e33","#1c0e34","#1d0f35","#1f0f36","#201037","#221037","#241038","#251139","#27113a","#28123b","#2a123c","#2c133d","#2d133e","#2f143f","#311440","#321540","#341541","#351642","#371643","#391744","#3a1745","#3c1846","#3e1947","#3f1948","#411a49","#431b4a","#441b4b","#461c4c","#481d4d","#4a1e4e","#4b1f4f","#4d1f50","#4f2051","#502152","#522253","#542354","#562455","#572557","#592658","#5b2759","#5c285a","#5e2a5b","#602b5c","#612c5d","#632d5e","#642e5f","#663060","#683161","#693262","#6b3363","#6c3564","#6d3665","#6f3766","#703967","#713a68","#733b69","#743d69","#753e6a","#76406b","#77416c","#78426d","#79446e","#7a456e","#7b466f","#7c4770","#7d4970","#7e4a71","#7f4b72","#7f4d72","#804e73","#814f73","#825074","#825275","#835375","#835476","#845576","#845677","#855777","#855978","#865a78","#865b78","#865c79","#875d79","#875e7a","#885f7a","#88607a","#88617b","#88627b","#89647b","#89657c","#89667c","#8a677d","#8a687d","#8a697d","#8a6a7e","#8a6b7e","#8b6c7e","#8b6d7e","#8b6e7f","#8b6f7f","#8b707f","#8c7180","#8c7280","#8c7380","#8c7481","#8c7581","#8d7681","#8d7781","#8d7882","#8d7982","#8d7a82","#8d7b83","#8e7c83","#8e7d83","#8e7e83","#8e7f84","#8e8084","#8e8184","#8f8285","#8f8385","#8f8485","#8f8585","#8f8686","#8f8786","#8f8886","#908987","#908a87","#908b87","#908c87","#908d88","#908e88","#918f88","#919089","#919189","#919289","#919389","#91948a","#92958a","#92968a","#92978a","#92988b","#92998b","#929a8b","#939b8c","#939c8c","#939d8c","#939e8c","#939f8d","#93a08d","#93a18d","#94a28d","#94a38e","#94a48e","#94a68e","#94a78f","#94a88f","#95a98f","#95aa8f","#95ab90","#95ac90","#95ad90","#96ae90","#96af91","#96b091","#96b191","#96b291","#97b392","#97b492","#97b592","#97b692","#97b793","#98b893","#98b993","#98ba93","#98bc94","#99bd94","#99be94","#99bf95","#9ac095","#9ac195","#9ac295","#9bc396","#9bc496","#9cc696","#9cc797","#9cc897","#9dc997","#9eca98","#9ecb98","#9fcd99","#9fce99","#a0cf9a","#a1d19a","#a2d29b","#a3d39b","#a4d59c","#a5d69d","#a6d79d","#a7d99e","#a8da9f","#a9dca0","#abdda0","#acdfa1","#aee0a2","#afe1a3","#b1e3a4","#b3e4a5","#b4e6a6","#b6e7a7","#b8e9a9","#baeaaa","#bcebab","#beedac","#c0eead","#c2efaf","#c4f0b0","#c6f2b1","#c8f3b2","#c9f4b4","#cbf5b5","#cdf6b6","#cff6b7","#d1f7b9","#d3f8ba","#d5f9bb","#d6f9bc","#d8fabd","#dafabe","#dcfbc0","#ddfbc1","#dffcc2","#e0fcc3","#e2fdc4","#e3fdc5","#e5fdc6","#e6fdc7","#e8fec8","#e9fec9","#eafeca","#ecfecb","#edfecc","#eeffcd","#f0ffce","#f1ffcf","#f2ffcf","#f3ffd0","#f5ffd1","#f6ffd2","#f7ffd3","#f8ffd4","#faffd5","#fbffd6","#fcffd7","#fdffd7","#feffd8","#ffffd9"],
  "turku":["#000000","#010101","#030303","#050505","#070707","#090908","#0b0b0a","#0c0c0c","#0e0e0d","#0f0f0f","#111010","#121211","#131313","#141414","#151515","#161616","#171717","#181818","#191919","#1a1a19","#1b1b1a","#1c1c1b","#1d1d1c","#1e1e1d","#201f1e","#21201f","#222120","#232221","#242322","#252423","#262524","#272625","#282725","#292826","#2a2a27","#2b2b28","#2c2c29","#2d2d2a","#2f2e2b","#302f2c","#31302c","#32312d","#33322e","#34332f","#353430","#363531","#373631","#393732","#3a3833","#3b3934","#3c3a34","#3d3b35","#3e3c36","#3f3d37","#403f37","#424038","#434139","#44423a","#45433a","#46443b","#47453c","#48463c","#4a473d","#4b483e","#4c493e","#4d4a3f","#4e4b40","#4f4c40","#504d41","#514e42","#534f42","#545043","#555143","#565244","#575345","#585445","#5a5546","#5b5747","#5c5847","#5d5948","#5e5a48","#5f5b49","#605c4a","#625d4a","#635e4b","#645f4b","#65604c","#66614d","#67624d","#69634e","#6a644e","#6b654f","#6c6650","#6d6750","#6f6851","#706a51","#716b52","#726c53","#736d53","#756e54","#766f54","#777055","#787156","#7a7256","#7b7357","#7c7457","#7d7558","#7f7659","#807859","#81795a","#837a5b","#847b5b","#857c5c","#867d5d","#887e5d","#897f5e","#8b805f","#8c815f","#8d8260","#8f8461","#908561","#928662","#938763","#958864","#968964","#978a65","#998b66","#9b8c67","#9c8d67","#9e8e68","#9f8f69","#a1906a","#a2916a","#a4926b","#a5936c","#a7936d","#a8946e","#aa956e","#ac966f","#ad9770","#af9771","#b09871","#b29972","#b39973","#b59a74","#b69b74","#b89b75","#b99c76","#bb9c77","#bc9d77","#bd9d78","#bf9d79","#c09e79","#c19e7a","#c39e7b","#c49f7b","#c59f7c","#c79f7d","#c89f7d","#c99f7e","#ca9f7e","#cba07f","#cca080","#cea080","#cfa081","#d0a082","#d1a082","#d2a083","#d3a083","#d4a084","#d5a085","#d6a085","#d7a086","#d8a087","#d9a187","#daa188","#dba189","#dca189","#dda18a","#dfa18b","#e0a18c","#e1a18d","#e2a28d","#e3a28e","#e4a28f","#e5a290","#e6a391","#e7a392","#e8a393","#e9a495","#eaa496","#eba597","#eca598","#eda69a","#eea79b","#efa79c","#f0a89e","#f1a99f","#f2aaa1","#f3aba2","#f4aca3","#f5aca5","#f6ada6","#f7aea8","#f7afa9","#f8b0ab","#f9b1ac","#f9b3ae","#fab4af","#fbb5b1","#fbb6b2","#fcb7b4","#fcb8b5","#fcb9b6","#fdbab8","#fdbbb9","#fdbcba","#febdbc","#febfbd","#fec0be","#fec1bf","#ffc2c1","#ffc3c2","#ffc4c3","#ffc5c4","#ffc6c5","#ffc7c6","#ffc8c7","#ffc9c9","#ffcaca","#ffcbcb","#ffcccc","#ffcecd","#ffcfce","#ffd0cf","#ffd1d0","#ffd2d1","#ffd3d2","#ffd4d4","#ffd5d5","#ffd6d6","#ffd7d7","#ffd8d8","#ffd9d9","#ffdada","#ffdbdb","#ffdcdc","#ffdddd","#ffdfde","#ffe0df","#ffe1e1","#ffe2e2","#ffe3e3","#ffe4e4","#ffe5e5","#ffe6e6"],
  "vik":["#001161","#001362","#011563","#011664","#011865","#011a66","#011b67","#011d68","#011e69","#01206a","#01226b","#01236c","#01256d","#02266e","#02286f","#022970","#022b71","#022c72","#022e73","#023074","#023175","#023376","#023477","#023678","#023779","#02397a","#023a7b","#023c7c","#023d7d","#023f7e","#02417f","#024280","#024481","#024582","#024783","#024984","#024a85","#024c86","#034d87","#034f88","#035189","#04528a","#04548b","#05568c","#05578e","#06598f","#075b90","#095d91","#0a5e92","#0c6093","#0e6294","#0f6496","#116697","#136898","#156999","#186b9b","#1a6d9c","#1c6f9d","#1f719e","#2173a0","#2475a1","#2677a2","#2979a4","#2c7ba5","#2f7da6","#317fa8","#3481a9","#3783ab","#3a85ac","#3d87ad","#4089af","#438bb0","#468db2","#498fb3","#4d91b4","#5094b6","#5396b7","#5698b9","#599aba","#5c9cbb","#609ebd","#63a0be","#66a2c0","#69a4c1","#6ca6c2","#70a8c4","#73aac5","#76acc6","#79aec8","#7db0c9","#80b2cb","#83b4cc","#86b6cd","#89b8cf","#8dbad0","#90bcd1","#93bed3","#96c0d4","#99c2d5","#9dc4d7","#a0c6d8","#a3c7d9","#a6c9db","#a9cbdc","#adcddd","#b0cfdf","#b3d1e0","#b6d3e1","#b9d5e2","#bcd7e4","#c0d9e5","#c3dbe6","#c6dce7","#c9dee8","#cce0e9","#cfe2ea","#d2e3eb","#d5e5ec","#d8e6ed","#dae8ed","#dde9ed","#dfeaee","#e2ebee","#e4eced","#e6eded","#e8eded","#e9edec","#ebeeeb","#eceee9","#edede8","#edede6","#eeece5","#eeece3","#eeebe0","#eeeade","#eee9dc","#eee7d9","#ede6d6","#ece5d4","#ece3d1","#ebe1ce","#eae0cb","#e9dec8","#e8ddc6","#e7dbc3","#e6d9c0","#e4d7bd","#e3d6ba","#e2d4b7","#e1d2b4","#e0d0b1","#dfcfae","#ddcdab","#dccba8","#dbc9a5","#dac8a3","#d9c6a0","#d7c49d","#d6c39a","#d5c197","#d4bf94","#d3bd91","#d2bc8e","#d0ba8c","#cfb889","#ceb786","#cdb583","#ccb380","#cbb17e","#c9b07b","#c8ae78","#c7ac75","#c6ab72","#c5a970","#c4a76d","#c3a66a","#c1a467","#c0a265","#bfa162","#be9f5f","#bd9d5c","#bc9c59","#bb9a57","#b99854","#b89651","#b7954e","#b6934c","#b59149","#b49046","#b28e44","#b18c41","#b08a3e","#af883b","#ad8739","#ac8536","#ab8333","#aa8130","#a87f2e","#a77d2b","#a67b28","#a47926","#a37723","#a27520","#a0731e","#9f711b","#9d6f19","#9c6d17","#9b6b14","#996912","#986710","#96650e","#95630c","#94610a","#925f08","#915d06","#905b05","#8f5904","#8d5703","#8c5503","#8b5302","#8a5101","#884f01","#874e01","#864c01","#854a00","#844800","#824600","#814400","#804300","#7f4100","#7e3f00","#7d3d00","#7b3c00","#7a3a01","#793801","#783601","#773501","#763301","#753101","#732f01","#722e01","#712c01","#702a01","#6f2801","#6e2701","#6c2501","#6b2301","#6a2101","#691f01","#681e00","#671c00","#651a00","#641800","#631600","#621400","#611200"]})4e:T1f59,## Sources
1. The misuse of colour in science communication ([article](https://www.nature.com/articles/s41467-020-19160-7), [video](https://www.youtube.com/watch?v=Hhkj_AiicmQ)), Nature, 2020
  - There is no uniform color perception across all people.
    - [Figure 2](https://www.nature.com/articles/s41467-020-19160-7/figures/2): Grayscale is a good test of accessibility and printing
    - Should be readable to the 0.5% of women and 8% of men with color-vision deficiency.
    - [Never use red and green at the same luminocity](https://www.nature.com/articles/s41467-020-19160-7#Sec3:~:text=The%20colour%20map%20should%20not%20contain%20red%20and%20green%20at%20a%20similar%20luminosity), because red green color blindness is the most common
  - ["Scientifically derived colour maps are perceptually uniform"](https://www.nature.com/articles/s41467-020-19160-7#:~:text=Scientifically%20derived%20colour%20maps%20are%20perceptually%20uniform)
    - [Figure 3](https://www.nature.com/articles/s41467-020-19160-7/figures/3): ΔE₀₀ as a standard of perceptual uniformity
  - ["Perceptual colour order is important."](https://www.nature.com/articles/s41467-020-19160-7#Sec3:~:text=Perceptual%20colour%20order,compare%20significant%20values.)
    -  Linear change in lightness and brightness
    -  [Figure 4](https://www.nature.com/articles/s41467-020-19160-7/figures/4): "Perceptual order is given when individual colours of a colour map can be sequentially ordered effortlessly without consulting the colour bar."
  -  [Always include color bars](https://www.nature.com/articles/s41467-020-19160-7#Sec3:~:text=It%20is%20imperative%20to%20ensure%20the%20colour%20bar%20is%20included%20on%20all%20figures%20where%20a%20colour%20scale%20is%20used%2C%20as%20even%20the%20most%20intuitive%20colour%20map%20could%20be%20rendered%20useless%20with%20no%20colour%20bar%20for%20the%20reader%20to%20refer%20to.) for scale
  -  [It is publisher's duty to use scientific color maps](https://www.nature.com/articles/s41467-020-19160-7#Sec3:~:text=Individuals%2C%20publishers%20and%20press%20should%20take%20a%20proactive%20approach%20to%20spot%20unscientific%20use%20of%20colour%20and%20so%20prevent%20the%20dissemination%20of%20visually%20distorted%20data.)
  - [Box 2](https://www.nature.com/articles/s41467-020-19160-7#Sec3): freely available scientific color maps
    - [MPL colormaps](https://bids.github.io/colormap/), which are all part of D3, and includes colormap editor for matlab
    - [Color CET](https://colorcet.com/gallery.html)
    - [CMOceans](https://matplotlib.org/cmocean/)
    - [Color brewer](https://colorbrewer2.org/#type=sequential&scheme=Blues&n=9)
    - Author's color map [Scientific colour maps](https://observablehq.com/@fil/colormaps)
2. [An interactive review of Oklab](https://raphlinus.github.io/color/2021/01/18/oklab-critique.html)
3. [Oklab color interpolation](https://observablehq.com/@aras-p/oklab-interpolation-test)
4. [The CIELAB lecture](https://www.youtube.com/watch?v=sk8NC740SFY)
5. [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/)
6. [D3 color difference](https://github.com/Evercoder/d3-color-difference)
7. The non-Riemannian nature of perceptual color space ([popular article](https://discover.lanl.gov/news/0810-color-perception), [academic article](https://www.pnas.org/doi/10.1073/pnas.2119753119#sec-8), [dataset](https://github.com/lanl/color/tree/main/Gray_Experiment/code
)), Los Alamos Labs, 2022
 - The large contrast between very different colors is less than the sum of the smallest perceptual distances between the colors. Probably [log distance](https://en.wikipedia.org/wiki/Weber%E2%80%93Fechner_law#Vision) instead of linear distance
8. Color scale generators
   - [Chroma.js](https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1)
   - [Leonardo](https://leonardocolor.io/scales.html#)
   - [Side by side comparison of gradient](https://raphlinus.github.io/color/2021/01/18/oklab-critique.html) as well as a critique
9. [OKLCH color picker](https://oklch.com/?ref=producthunt#44.24,0.179,269.94,100)
10. [equilibrium distribution model](https://arxiv.org/pdf/2205.14472.pdf) for evenly spacing and maximizing categorical colors
11. [delta E 2000 calculation](https://observablehq.com/@mbostock/measuring-color-difference)
12. [When not to use CIELAB](https://www.youtube.com/watch?v=aWrI0esSRUM&ab_channel=JohnSeymour)
   - Don't deduce either the trichromacy or psychological color models
   - Don't use CIELAB to model exact complementary colors
   - Don't do linear gradient interpolation / gamut mapping
     - Don't compare the hue between different chroma (especially blues) or luminance
   - Don't calculate perceptual distance using straight line distance (like the original ${tex`E_{ab}`} metric did, use the state of the art ${tex`E_{00}`} instead)
   - Don't assume it is correct under different lighting conditions
13.  CIECAM02 J combines brightness with saturation, so has a complex relationship with CIELAB's L*
  - [Helmholtz–Kohlrausch effect](https://en.wikipedia.org/wiki/Helmholtz%E2%80%93Kohlrausch_effect), the saturation of a color adds to its perceived luminance.
  - [D3-color implementation of CIECAM02](https://github.com/connorgr/d3-cam02) (CAM02-UCS Jab and CAM02 JCh are not the same!)
  - [Observables implementation of CIECAM16](https://observablehq.com/@jrus/cam16)
14. [D3 color read me](https://github.com/d3/d3-color)
15. [HyAB](http://markfairchild.org/PDFs/PAP40.pdf), a distance metric using CIELAB coordinates, works better than ΔE₀₀ for distances greater than 10.
    - "It is thus concluded that, for very large color differences, the effect of lightness difference should be considered perceptually separable, and the HyAB color difference formula is the most practical and accurate solution."
16. [Additional CIELAB metrics](https://core.ac.uk/download/pdf/42604345.pdf)
  - D^★ depth, T^★ clarity and V^★ vividness equations, which were first published in [this article](https://onlinelibrary.wiley.com/doi/10.1002/col.21833).
     - [D^★ depth is E_ab distance from white and V^★ is E_ab distance from black](https://onlinelibrary.wiley.com/cms/asset/1f0f0b1a-be6c-4d5b-b874-6d4566d4692d/col21833-fig-0010-m.jpg)
  - check out Hunt's saturation attribute (p. 45)
  - Cho hue-based model CIECAM02 preformed better than the CIELAB or CIECAM02-UCS (p. 192)
17. Chroma.js
  - [interpolation corrections](https://www.vis4.net/blog/2013/09/mastering-multi-hued-color-scales/) use Bezier interpolation and L* for correction.
18. Color scheme design articles
  - [Creating a Design System to Prevent Problematic Colour Pairings](https://nightingaledvs.com/data-journalism-colour-accessibility/?mc_cid=c4e145c304&mc_eid=be19fe72bd)
  - [Emphasize what you want readers to see with color](https://blog.datawrapper.de/emphasize-with-color-in-data-visualizations/)
19. [Why color banding appears in dark gradients](https://youtu.be/h9j89L8eQQk?t=188)
20. Color blindness
  - [Review of colorblindness libraries](https://daltonlens.org/opensource-cvd-simulation/)
  - [color-blind libray](https://www.npmjs.com/package/color-blind)
21. [OKLAB is good for gamut mapping and gradients](https://youtu.be/dOsp6u4bIwI)
22. People do not naturally categorize colors by the color-opponent primaries of red, green, blue and yellow. Instead, they use Utility-Based Coding, where they categorize colors in narrow bands according to familiar objects in their environment and culture. There are no canonical primary colors. link
23. Color blindness prevalence statistics [link](https://www.colour-blindness.com/general/prevalence/)4f:T6c4,
  
[ // Kristy full palette 

'#F2CF15', '#F6DD5B', '#F9E78A', '#FBF1B9', '#FEFAE8', '#2190B2', '#63B1C9', '#90C7D9', '#BCDEE8', '#E9F4F7', '#08B461', '#52CA91', '#84D9B0', '#B5E8D0', '#E6F7EF', '#C00202', '#D34E4E', '#E08181', '#ECB3B3', '#F9E6E6', '#7221B2', '#9D64CA', '#B88FD8', '#D5BDE8', '#F1E9F8', '#F34561', '#F77D90', '#F9A2B0', '#FBC7CF', '#FEECEF', '#E56636', '#ED9472', '#F2B29A', '#F7D1C3', '#FCF0EB', '#0676FD', '#519FFE', '#82BAFE', '#B4D6FE', '#E6F1FF', '#893F2D', '#AC796C', '#C49F96', '#DCC5C0', '#F3ECEA', '#5D574F', '#8E8A84', '#AEAAA7', '#CFCDCB', '#EFEFEE'

]

[ // Kristy Pastels

'#F8D888', '#E1C06B', '#86BBD8', '#6B96AD', '#59C9A5', '#47A184', '#FFA59F', '#B2746F'

]

[ // Kristy Vibrant

'#393270', '#6D79AB', '#055ECA', '#0676FD', '#BE39AA', '#EE47D5', '#C8455A', '#EE536C', '#1FBAAA', '#04D3BF', '#CA9E21', '#FDC529', '#9E99AB'

]

[ // cato website

'#0D0E51', '#202D7B', '#2C3B95', '#3043B4', '#465DE4', '#7B8AE1', '#BFC7F8', '#EFF1FD', '#1A1714', '#433E38', '#5E574F', '#7C756D', '#A1978B', '#CABEB1', '#E8DED3', '#F9F7F4', '#893F2D', '#C64D2D', '#E56636', '#C97703', '#FFC97E', '#2565AA', '#B72025'

]

[ // infogram default

'#6978DB', '#64C872', '#F38375', '#FDC153', '#C181CE', '#FAF093', '#919598', '#69C6DB'

]

[ // yellow-blue 

 '#2561a2', '#2f90c1', '#49c3e9', '#607585', '#889eaf', '#bad0de', '#e8e7de', '#f7f5b6', '#ecdb69' 

]

[ // yellow-blue 2

 '#2561a2', '#2f90c1', '#49c3e9', '#607585', '#889eaf', '#e5eaeb', '#b1d2dd', '#f7f5b6',
  '#ecdb69'

]

[ // southwest triadic 

'#035486', '#2688b5', '#37bae1', '#9fcedf', '#7693a7', '#d3ddde', '#beaaa7', '#f2b597', '#ffd699', '#fef3cd', '#a99dbe', '#d4aac1', '#fedcdc'

]

50:[{"id":"2361baab2ca3d9515f46e0ee6229640783750b6f513b1f9c078ca0b0b389a648a679ec8338629a794b0bff5590f96a0a921b9e30320f85d197989fafa6c8d327","href":"https://static.observableusercontent.com/files/2361baab2ca3d9515f46e0ee6229640783750b6f513b1f9c078ca0b0b389a648a679ec8338629a794b0bff5590f96a0a921b9e30320f85d197989fafa6c8d327","name":"Product Lines & Menue Flyer JB .docx","type":"application/vnd.openxmlformats-officedocument.wordprocessingml.document","lastModified":1702661239815.39,"size":2137281}]
2d:{"id":"525efdbf20cbb541","slug":null,"title":"Discrete Color Palette Generator","thumbnail":"3ff790063e35d905b4d4a2bf0fe1da53f3f090428a4a5b3a917022a5e59227ed","access_level":"public","create_time":"$D2022-09-01T23:32:46.705Z","update_time":"$D2025-06-13T22:17:31.017Z","view_time":null,"first_public_time":"$D2022-11-24T06:15:03.118Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":4495,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"}],"comments":[{"id":"2ad94de7dc879afe","reply_to_id":null,"content":"I am very curious to lean more about the phenomenological category!","create_time":"$D2023-08-03T14:26:31.860Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"41a1b3d9cbfb4be9","reply_to_id":"2ad94de7dc879afe","content":"$2f","create_time":"$D2023-08-03T14:49:27.799Z","update_time":"$D2023-08-03T19:36:50.775Z","resolved":true,"user":{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}},{"id":"01a5281007c0cdfe","reply_to_id":"2ad94de7dc879afe","content":"Wow, I didn't expect such a detailed reply! Thanks, this is super-interesting! 👍","create_time":"$D2023-08-03T15:36:49.648Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"8b778611edc7ee18","reply_to_id":null,"content":"Is there a way to make the gradient stepwise rather than smoothly flowing?","create_time":"$D2024-04-18T07:47:19.977Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"401169214b4aede8","login":"peter-dyakonov","name":"Peter Dyakonov","avatar_url":"https://avatars-next.observableusercontent.com/958ca2b86e34ea77d513aab8fcad7b3da30d74020ad2ba6d6c31bab51a482c20","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Discrete Color Palette Generator","cells":[{"id":0,"value":"# Discrete Color Palette Generator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1429,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4387,"value":"viewof color = Inputs.color({label: 'Use color picker to get hex from tags', value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3429,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4141,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4132,"value":"{\n  let number = 10\n  let list = ``\n  let f = charts[set.type]\n  for( let i=0; i`\n  return html`${list}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4204,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2588,"value":"colorMatrix = {\n  let padding = ({left:0, right:0, top:0, bottom:0})\n  let cellSize = 50\n  let tablePadding = 20\n  \n  let w = Math.min(width, cellSize * (palette.length+1) + tablePadding + padding.left + padding.right)\n  let h = w\n  let svg = d3.select(DOM.svg(w, h))\n  \n  let xScale = d3.scaleLinear([ 0, cellSize * (palette.length+1) + tablePadding ], [padding.left, w - padding.right]);\n  let yScale = d3.scaleLinear([ 0, cellSize * (palette.length+1) + tablePadding ], [padding.top, h - padding.bottom]);\n\n  let line = d3\n      .line()\n      .x((d) => xScale(d[0]))\n      .y((d) => yScale(d[1]))\n\n  let cells = svg\n      .selectAll(\"g\")\n      .data( dataColorMatrix )\n    .enter()\n      .append('path')\n      .attr(\"fill\", d => d.color )\n      .attr(\"stroke\", d => d.color )\n      .attr('d', d => line(d.line))\n    \n\n  return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2333,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3884,"value":"gradient = {\n  let start = 1\n  let stop = 0\n  let steps = 16\n  d3, chroma, palette, Fabio\n  let scale = eval(options1.scale)\n  let list = []\n  for( let i=0; i  \"}\n    }\n    \n  }\n  t += ' ]'\n  return html`${t}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2594,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1517,"value":"mutable colorSpaceControls = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2353,"value":"{mutable colorSpaceControls = options2}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3448,"value":"mutable c = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":851,"value":"distance = {\n  let data = []\n  let colors = [...palette]\n  function compare(a, b) {\n    a = d3.lab(a).l\n    b = d3.lab(b).l\n    \n    if (a>b) {\n      return 1;\n    }\n    if (a>> 15, t | 1);\n      t ^= t + Math.imul(t ^ t >>> 7, t | 61);\n      return ((t ^ t >>> 14) >>> 0) / 4294967296;\n    }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4147,"value":"function toAlpha(num) {\n   if(num>25){num+=6}\n   if(num < 0 || num > 57 || typeof num !== 'number'){\n      return num-57;\n   }\n   const leveller = 64;\n   //since actually A is represented by 65 and we want to represent it\n   //with one\n   return String.fromCharCode(num + leveller+1);\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4136,"value":"charts = ({\n  'Basic column': basicColumn,\n  'Stacked column': stackedColumn,\n  'Proportion column': proportionColumn,\n  'Grouped column': groupedColumn,\n  \n  'Basic line': basicLine,\n  'Marker line': markerLine ,\n  'Bump chart': bumpChart,\n  \n  'Basic scatter': basicScatter,\n  'Symbol scatter': symbolScatter,\n  'Regression scatter': regressionScatter,\n  'Delaunay scatter': delaunayScatter,\n  'Density scatter': densityScatter,\n  'Voronoi scatter': voronoiScatter,\n  \n  'Heat map': heatMap,\n  'Radar': radar,\n  '': null,\n  '': null,\n  '': null,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4150,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4139,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4154,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4157,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4160,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4163,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4166,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4169,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4172,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4175,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4178,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4181,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4184,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4187,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4190,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4193,"value":"t = {\n  while(set.type == \"Heat map\"){\n    yield new Date().getTime() / 1000\n  }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4134,"value":"-------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":629,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3980,"value":"Fabio = {\n  let keys = Object.keys(FabioFull)\n  let length = keys.length\n\n  let simple = ({})\n  let list = []\n  for(let i=0; i {});\n  //await require(\"three@0.96/examples/js/postprocessing/EffectComposer.js\").catch(() => {});\n  return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1585,"value":"d3 = require(\"d3\", \"d3-hsv\", \"d3-cam02\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2070,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2658,"value":"colorblind = import('https://cdn.skypack.dev/color-blind@0.1.3?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2672,"value":"cb = {\n  let mod = colorblind.default\n  mod.normal = (B,R) => R===true ? ({R:d3.rgb(B).r, G:d3.rgb(B).g, B:d3.rgb(B).b}) : B\n  let lightness\n  mod.greyscale = (B,R) => {\n    lightness = 2.55 * chroma.hex(B).hcl()[2]\n    return R===true ? ({R:lightness, G:lightness, B:lightness}) : d3.rgb(lightness, lightness, lightness).hex()\n  }\n  return mod\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4093,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3435,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":294,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4198,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W50","stdlib":"1","titling":"auto"}}
2e:"$2d:body"
red	b* pink/green
green	b* pink/green
blue	a* yellow/blue
lightness	L* lightness	whiteness
value	V* vividness	whiteness
saturation	D* depth	blackness
chroma	C* chroma	chromaticness
hue	h	Φ