color scaler

HTML

              
                <div id="app" :style="{ '--bgg': gradient('gradient'), '--bgs': gradient('steps') }">
  <!--h2>Color Scaler</h2-->
  <form @submit.prevent>
    <fieldset>
      <legend>Options</legend>
      <label>
        <span>Inpterpolation Color Model</span>
        <select v-model="currentSpace">
          <option v-for="space in spaces">{{space}}</option>
        </select>
      </label>
      <label>
        <span>Interpolation</span>
        <select v-model="interpolation">
          <option>linear</option>
          <option>bezier</option>
        </select>
      </label>
      <label>
        <span>Amount of colors</span>
        <input type="number" v-model="nbrOfColors" step="1" :min='min' max="1000"/>
      </label>

      <label>
        <input type="checkbox" v-model="connectColors" />
        <span>connect last and first color</span>
      </label>
      
      <!--label>
        <input type="checkbox" v-model="correctLightness" />
        <span>correct lightness</span>
      </label-->
      
      <label>
        <span>Padding <i>{{padding}}</i> <button aria-label="set padding to 0" v-if="padding != 0" @click="padding = 0">×</button></span>
        <input type="range" min="-1" max="1" step="0.001" v-model="padding"/>
      </label>
    </fieldset>
 
    <fieldset>
      <legend>Color</legend>
      <div class="fieldsetgroup">
        <input type="color" v-model="currentColor" />
        <input type="text" v-model="currentColor" />
        <button @click="addColor">Add Color</button>
      </div>

      <vuedraggable
        :list="list"
        class="list-group"
        ghost-class="ghost"
      >
        <div
          class="list-group-item"
          v-for="element, i in list"
          :key="element.value"
          :style="{'--color': element.value}"
        > 
          <input type="color" :value="element.value" v-on:change="changeColor($event, i)" />
          {{ element.value }}
          <button aria-label="remove color" @click="removeMe(i)">×</button>
        </div>
      </vuedraggable>
    </fieldset>
       
  </form>
  
  <div class="color-scale">
  </div>
  
  <div class="color-scale color-scale--cont">
  </div>
  
  <div class="color-pie">
  </div>
  <div class="color-pie color-pie--grad">
  </div>
  
  <div class="color-pie color-pie--rad">
  </div>
  
  <div class="canvas">
    <canvas ref="can" width="400" height="400">
    </canvas>
  </div>
  
    <fieldset>
      <legend>Viz options</legend>
      <label>
        <input type="checkbox" v-model="interpolationVizModelSync" />
        <span>visualize in interpolation model</span>
      </label>
    
      <label>
        <span>Visualization Model</span>
        <select :disabled="interpolationVizModelSync" v-model="currentVizSpace">
          <option v-for="space in spaces">{{space}}</option>
        </select>
      </label>
      <label>
        <input type="checkbox" v-model="autoRotate" />
        <span>auto spin</span>
      </label>
      
      
      <label>
        <span>Simulate Colorblindness</span>
        <select v-model="colorBlindness">
          <option v-for="blindness in colorBlindnesses">{{blindness}}</option>
        </select>
      </label>
    </fieldset>
  <label>
    <span>Color Export</span>
  <textarea>{{rawColors}}</textarea>
  </label>
</div>

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Space+Mono:700i,700');
:root {
  --right: min(2.5rem, 10vw);
  --right2: calc(var(--right) + 15vmin);
  --d: calc(30vmin - .5rem);
  --r: calc(var(--d) * .5);
}
:root, input, textarea, select, button {
  font-family: 'Space Mono', monospace;
  font-size: .8rem;
  font-weight: 700;
}

body {
  padding-right: calc(var(--right) + var(--right2) + var(--r) + 1rem);
}

h1, h2 {
  margin-top: 0;
}
:root {
  padding: 1rem;
}

.canvas {
  width: 42vw;
}

canvas {
  width: 100%;
  display: block;
}

// background: radial-gradient(closest-side, var(--gs));
.list-group {
  margin-top: .5em;
}

.list-group-item {
  position: relative;
  padding: .5em;
  cursor: move;
  border: 2px solid #202124;
  background: #fff;
  
  & + & {
    margin-top: -2px;
  }
  &::before {
    content: "↕";
    font-size: 1.5em;
    margin-right: .25em;
  }
}

.ghost {
  background: #202124;
  color: #fff;
}

.color-scale,
.color-pie {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--right);
  background: linear-gradient(180deg, var(--bgs)) #202124;
}

.color-scale--cont {
  right: var(--right);
  width: var(--right2);
  background: linear-gradient(180deg, var(--bgg)) #202124;
}

.color-pie {
  bottom: auto;
  top: 2rem;
  height: var(--d);
  width: var(--d);
  right: calc(var(--right) + var(--right2) - var(--r));
  border-radius: 50%;
  box-shadow: 0 0 0 .1rem #fff;
  background: conic-gradient(var(--bgs)) #202124;

  &::before {
    opacity: 0;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    background: #fff;
    transform: translate(-50%, -50%) scale(.5);
    border-radius: 50%;
    transition: 100ms opacity linear 100ms, 300ms transform cubic-bezier(.7,.3,0,1);
  }
  &:hover {
    &::before {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}

.color-pie--grad {
  top: calc(4rem + 30vmin);
  background: conic-gradient(var(--bgg)) #202124;
}

.color-pie--rad {
  top: calc(6rem + 60vmin);
  background: radial-gradient(closest-side, var(--bgs));
  
  &::before {
    width: 100%;
    height: 100%;
    background: radial-gradient(
      closest-side, var(--bgg));
    transition: none;
  }
}

legend {
  background: white;
  padding: 0 0.25em;
  font-size: 1.25rem;
  margin-left: -0.25em;
}

label {
  padding-top: .5em;
  display: block;
  
  span {
    display: block;
    margin-bottom: .25em;
  }
  input[type="checkbox"] + span {
    display: inline-block;
  }
}

input[type="color"] {
  padding: 0;
  
  height: 1.4em;
  width: 1.4em;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: .05rem;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}

fieldset,
textarea {
  display: block;
  margin-bottom: 1em;
  margin-right: auto;
  width: max(0rem, 40vw);
  border: 2px solid #202124;
  padding: .75rem;
}
.fieldsetgroup {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  input[type=text] {
    flex-grow: 1;
  }
  input[type="color"] {
    height: auto;
    aspect-ratio: 1;
    flex-shrink: 0;
  }
}

.canvas {
  padding: .75rem;
  
  margin-bottom: 1em;
  margin-right: auto;
  max-width: 40rem;
}

JS

              
                const { Illustration, Group, Anchor, Rect, TAU, Ellipse, Shape } = Zdog;


function translate(value, low1, high1, low2, high2) {
  return low2 + (high2 - low2) * ((value - low1) / (high1 - low1));
}

const colorModes = {
  hsv: {
    func: 'hsv',
    x: [0, 360],
    y: [1, 1],
    z: [2, 1]
  }/*,
  hcg: {
    func: 'hcg',
    x: [0, 360],
    y: [1, 1],
    z: [2, 1]
  }*/,
  hsi: {
    func: 'hsi',
    x: [0, 360],
    y: [1, 1],
    z: [2, 1]
  },
  hsl: {
    func: 'hsl',
    x: [0, 360],
    y: [1, 1],
    z: [2, 1]
  },
  rgb: {
    func: 'rgb',
    x: [0, 255],
    y: [1, 255],
    z: [2, 255]
  },
  lrgb: {
    func: 'lrgb',
    x: [0, 255],
    y: [1, 255],
    z: [2, 255]
  },
  lab: {
    func: 'lab',
    z: [0, 100],
    y: [1, 127, -128],
    x: [2, 127, -128]
  },
  oklab: {
    func: 'oklab',
    z: [0, 1],
    y: [1, .3, -.3],
    x: [2, .35, -.35]
  },
  lch: {
    func: 'lch',
    z: [0, 100],
    y: [1, 100],
    x: [2, 0, 360]
  },
  oklch: {
    func: 'oklch',
    z: [0, 1],
    y: [1, 1],
    x: [2, 0, 360]
  }
};

const colorBlindness = [
  'none',
  'protanopia',
  'deuteranopia',
  'tritanopia',
  'achromatopsia',
];




new Vue({
  el: '#app',
  components: {
    vuedraggable
  },
  data() {
    return {
      padding: 0,
      connectColors: false,
      currentSpace: 'oklab',
      currentVizSpace: 'oklab',
      interpolationVizModelSync: true,
      interpolation: 'linear',
      nbrOfColors: 12,
      correctLightness: false,
      currentColor: '#212324',
      spaces: Object.keys(colorModes).sort(),
      autoRotate: false,
      
      colorBlindnesses: [...colorBlindness],
      colorBlindness: 'none',
      
      list: [
        { value: "#08544f" },
        { value: "#ff4000" },
        { value: "#cbd6ec" }
      ],
    }
  },
  watch: {
    currentSpace: function (newEntry) {
      if (this.interpolationVizModelSync) {
        this.currentVizSpace = newEntry;
      }
    },
    colorScale: function (newEntry, oldEntry) {
      this.updateViz();
    },
    currentVizSpace: function (newEntry, oldEntry) {
      this.updateViz();
    },
    interpolationVizModelSync: function (newEntry, oldEntry) {
      if (newEntry) {
        this.currentVizSpace = this.currentSpace;
      }
    }
  },
  computed: {
    min: function() {
      return this.list.length;
    },
    colorScale: function () {
      const colors = this.list.map(l => l.value);
      
      if (this.connectColors) {
        colors.push(colors[0])  
      }
      
      let scale;
      if ( this.interpolation === 'bezier' ) {
        scale = chroma.bezier(colors).scale()
      } else {
        scale = chroma.scale(colors)
      }
      
      /*
      if (this.correctLightness) {
        scale.correctLightness();
      }*/
      
      let expcolors = scale
                   .padding(parseFloat(this.padding))
                   .mode(this.currentSpace)
                   .colors(
                     parseInt(this.nbrOfColors) + 
                     (this.connectColors ? 1 : 0)
                   );
      
      if (this.connectColors) {
        expcolors.pop();
      }
      
      return expcolors;
    },
    
    rawColors: function () {
      return this.colorScale.join(',')
    },
  },
  methods: {
    colorblind: function (color) {
      if (this.colorBlindness != 'none') {
        const [r, g, b] = chroma(color).rgb();
        
        const simulation = simulate(
          {r, g, b}, 
          this.colorBlindness
        );
        
        return chroma.rgb(
          Object.values(simulation)
        ).hex(); 
      } else {
        return color;
      }
    },
    gradient: function (type = 'steps') {
      if (type == 'steps') {
        const l = this.colorScale.length;
        return this.colorScale.map(
          (c, i) => `${this.colorblind(c)} ${i/l*100}% ${(i+1)/l*100}%`
        ).join(',');
      } else {
        return this.colorScale
          .map(c => this.colorblind(c))
          .join(',') + (
          this.connectColors ?
          ',' + this.colorblind(this.colorScale[0]) :
        '');
      }
    },
    removeMe: function (i) {
      this.list.splice(i,1);
    },
    changeColor: function (e, i) {
      this.list[i].value = e.target.value;
    },
    addColor: function () {
      if(chroma.valid(this.currentColor)) {
        
        this.list.push({
          value: this.currentColor,
        });
      }
    },
    updateViz: function () {
      this.z.space.remove();
      this.z.space = new Anchor({
        addTo: this.z.illu,
      });

      this.updateSpace();

      this.z.illu.updateRenderGraph();
    },
    addSpaceBound: function () {
      const lineColor = '#202124';
      const illo = this.z.illu;
      
      const w = this.z.illu.width;
      const h = this.z.illu.height;
      const s = Math.min(w, h) * .5;
      const stroke = 2;
      
      new Shape({
        addTo: illo,
        path: [
          { y: -s * .5, x: -s * .5, z: -s * .5},
          { y:  s * .5, x: -s * .5, z: -s * .5},
        ],
        stroke: stroke,
        color: lineColor,
      });

      new Shape({
        addTo: illo,
        path: [
          { y: -s * .5, x: s * .5, z: -s * .5},
          { y:  s * .5, x: s * .5, z: -s * .5},
        ],
        stroke: stroke,
        color: lineColor,
      });

      new Shape({
        addTo: illo,
        path: [
          { y: -s * .5, x: -s * .5, z: s * .5},
          { y:  s * .5, x: -s * .5, z: s * .5},
        ],
        stroke: stroke,
        color: lineColor,
      });

      new Shape({
        addTo: illo,
        path: [
          { z: -s * .5, y: -s * .5, x: -s * .5},
          { z: s * .5, y: -s * .5, x: -s * .5},
        ],
        stroke: stroke,
        color: lineColor,
      });

      new Shape({
        addTo: illo,
        path: [
          { z: -s * .5, y: s * .5, x: -s * .5},
          { z: s * .5, y: s * .5, x: -s * .5},
        ],
        stroke: stroke,
        color: lineColor,
      });

      new Shape({
        addTo: illo,
        path: [
          { z: -s * .5, y: s * .5, x: s * .5},
          { z: s * .5, y: s * .5, x: s * .5},
        ],
        stroke: stroke,
        color: lineColor,
      });


      new Shape({
        addTo: illo,
        path: [
          { x: -s * .5, y: s * .5, z: s * .5},
          { x: s * .5, y: s * .5, z: s * .5},
        ],
        stroke: stroke,
        color: lineColor,
      });


      new Shape({
        addTo: illo,
        path: [
          { x: -s * .5, y: -s * .5, z: -s * .5},
          { x: s * .5, y: -s * .5, z: -s * .5},
        ],
        stroke: stroke,
        color: lineColor,
      });

      new Shape({
        addTo: illo,
        path: [
          { x: -s * .5, y: s * .5, z: -s * .5},
          { x: s * .5, y: s * .5, z: -s * .5},
        ],
        stroke: stroke,
        color: lineColor,
      });
    },
    updateSpace: function () {
      const w = this.z.illu.width;
      const h = this.z.illu.height;
      const s = Math.min(w, h) * .5;
      const stroke = 2;

      this.colorScale.forEach(color => {
        const c = chroma(color);
        const mode = colorModes[this.currentVizSpace];
        const colorComp = c[mode.func === 'lrgb' ? 'rgb' : mode.func]();
        const position = c.gl();
        console.log(position)
        
        let pX = translate(colorComp[mode.x[0]], mode.x[2] || 0, mode.x[1], -s * .5, s * .5);
        let pZ = translate(colorComp[mode.z[0]], mode.z[2] || 0, mode.z[1], -s * .5, s * .5);
        let pY = translate(colorComp[mode.y[0]], mode.y[2] || 0, mode.y[1], -s * .5, s * .5);
        
        if (mode.func === 'hsl' || mode.func === 'hsv' || mode.func === 'hsi' || mode.func === 'hcg') {
          let theta = Math.PI * colorComp[mode.x[0]] / 180;
          let r = colorComp[mode.y[0]] * s;

          if (mode.func === 'hsi') {
            r *= colorComp[mode.z[0]] * 0.5;
          } else if (mode.func === 'hsv') {
            r *= colorComp[mode.z[0]] * 0.5;
          } else if (mode.func === 'hcg') {
            r *= .5;
          } else {
            r *= colorComp[mode.z[0]] < 0.5 ? colorComp[mode.z[0]] : 1 - colorComp[mode.z[0]];
          }

          pY = r * Math.cos(theta);
          pX = r * Math.sin(theta);
        }


        if (mode.func === 'lch' || mode.func === 'oklch') {
          let theta = Math.PI * colorComp[mode.x[0]] / 180;
          let r = translate(colorComp[mode.y[0]], 0, mode.y[1], 0, s * .5);

          pY = r * Math.cos(theta);
          pX = r * Math.sin(theta);
        }


        const shape = new Shape({
          addTo: this.z.space,
          stroke: 10,
          color: color,
          translate: {
            x: pX,
            y: pY,
            z: pZ,
          },
        });
      });

      this.z.illu.updateRenderGraph();

    }
  },
  mounted: function () {
    const can = this.$refs.can; 
    
    this.z = {};
    
    this.z.illu = new Illustration({
      element: can,
      dragRotate: true,
      resize: true,
    });
    
    this.z.space = new Anchor({
     addTo: this.z.illu,
    });
    
    this.z.illu.rotate.x -= .5;
    this.z.illu.rotate.y = .785;
    
    this.addSpaceBound();
    this.updateSpace();
    
    const animate = () => {
      this.z.illu.updateRenderGraph();
      if (this.autoRotate) {
        this.z.illu.rotate.y += .001
      }
      requestAnimationFrame( animate );
    }
    animate();
  }
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions