new-color-palette

gistfile1.txt

  function rgbToHsl(r, g, b) {
      r /= 255, g /= 255, b /= 255;
      var max = Math.max(r, g, b),
          min = Math.min(r, g, b);
      var h, s, l = (max + min) / 2;

      if (max == min) {
          h = s = 0; // achromatic
      } else {
          var d = max - min;
          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
          switch (max) {
              case r:
                  h = (g - b) / d + (g < b ? 6 : 0);
                  break;
              case g:
                  h = (b - r) / d + 2;
                  break;
              case b:
                  h = (r - g) / d + 4;
                  break;
          }
          h /= 6;
      }

      return [h, s, l];
  }


  function SinebowColorGenerator(opt_a, opt_brightness) {
      this.a_ = (opt_a === undefined) ? 1 : opt_a;
      this.brightness_ = (opt_brightness === undefined) ? 1 : opt_brightness;
      this.colorIndex_ = 0;
      this.keyToColor = {};
  }

  SinebowColorGenerator.prototype = {
      colorForKey(key) {
          if (!this.keyToColor[key]) {
              this.keyToColor[key] = this.nextColor();
          }
          return this.keyToColor[key];
      },

      nextColor() {
          const components = SinebowColorGenerator.nthColor(this.colorIndex_++);
          return SinebowColorGenerator.calculateColor(
              components[0], components[1], components[2],
              this.a_, this.brightness_);
      }
  };

  SinebowColorGenerator.PHI = (1 + Math.sqrt(5)) / 2;

  SinebowColorGenerator.sinebow_ = function(h) {
      h += 0.5;
      h = -h;
      let r = Math.sin(Math.PI * h);
      let g = Math.sin(Math.PI * (h + 1 / 3));
      let b = Math.sin(Math.PI * (h + 2 / 3));
      r *= r;
      g *= g;
      b *= b;
      // Roughly correct for human perception.
      // https://en.wikipedia.org/wiki/Luma_%28video%29
      // Multiply by 2 to normalize all values to 0.5.
      // (Halfway between black and white.)
      const y = 2 * (0.2989 * r + 0.5870 * g + 0.1140 * b);
      r /= y;
      g /= y;
      b /= y;
      return [256 * r, 256 * g, 256 * b];
  };

  SinebowColorGenerator.nthColor = function(n) {
      return SinebowColorGenerator.sinebow_(n * this.PHI);
  };

  function lerp(percentage, lo, hi) {
      const range = hi - lo;
      return lo + percentage * range;
  }

  function normalize(value, lo, hi) {
      return (value - lo) / (hi - lo);
  }
  SinebowColorGenerator.calculateColor = function(r, g, b, a, brightness) {
      if (brightness <= 1) {
          r *= brightness;
          g *= brightness;
          b *= brightness;
      } else {
          r = lerp(normalize(brightness, 1, 2), r, 255);
          g = lerp(normalize(brightness, 1, 2), g, 255);
          b = lerp(normalize(brightness, 1, 2), b, 255);
      }
      r = Math.round(r);
      g = Math.round(g);
      b = Math.round(b);
      return [r, g, b];
  };

  const old = [
      [122, 98, 135],
      [150, 83, 105],
      [44, 56, 189],
      [99, 86, 147],
      [104, 129, 107],
      [130, 178, 55],
      [87, 109, 147],
      [111, 145, 88],
      [81, 152, 131],
      [142, 91, 111],
      [81, 163, 70],
      [148, 94, 86],
      [144, 89, 118],
      [83, 150, 97],
      [105, 94, 139],
      [89, 144, 122],
      [105, 119, 128],
      [96, 128, 137],
      [145, 88, 145],
      [88, 145, 144],
      [90, 100, 143],
      [121, 97, 136],
      [111, 160, 73],
      [112, 91, 142],
      [86, 147, 86],
      [63, 100, 170],
      [81, 152, 107],
      [60, 164, 173],
      [143, 72, 161],
      [159, 74, 86]
  ];



  old.sort((a, b) => rgbToHsl(...a)[0] - rgbToHsl(...b)[0]);

  for (var rgb of old) {
      var div = document.createElement('div');
      div.style.cssText =
          `width:20px;height:20px;background-color: rgb(${rgb.join(',')});float:left`;
      console.log(div.style.cssText);
      document.body.appendChild(div);
  }
  var div = document.createElement('div');
  div.style.cssText = `width:20px;height:20px;`;
  document.body.appendChild(div);


  const numGeneralPurposeColorIds = 23;
  const generalPurposeColors = new Array(numGeneralPurposeColorIds);
  const sinebowAlpha = 1.0;
  const sinebowBrightness = 1.5;
  const sinebowColorGenerator =
      new SinebowColorGenerator(sinebowAlpha, sinebowBrightness);
  for (let i = 0; i < numGeneralPurposeColorIds; i++) {
      generalPurposeColors[i] = sinebowColorGenerator.nextColor();
      console.log(generalPurposeColors[i])
  }

  generalPurposeColors.sort((a, b) => rgbToHsl(...a)[0] - rgbToHsl(...b)[0]);

  for (var rgb of generalPurposeColors) {
      var div = document.createElement('div');
      div.style.cssText =
          `width:20px;height:20px;background-color: rgb(${rgb.join(',')});float:left`;
      console.log(div.style.cssText);
      document.body.appendChild(div);
  }