Color Mix

HTML

<div id="app">
  <color-mix colors="UV"></color-mix>
  <color-mix colors="Amber"></color-mix>
  <color-mix colors="Green, Amber"></color-mix>
  <color-mix colors="Blue, Amber"></color-mix>

  Primary Green
  <color-mix colors="Cyan 255, Magenta 160, Yellow 252"></color-mix>
  
  Golden Amber
  <color-mix colors="Cyan 0, Magenta 192, Yellow 233"></color-mix>
 
  Deep Golden Amber
  <color-mix colors="Cyan 0, Magenta 244, Yellow 253"></color-mix>
  
  2700K
  <color-mix colors="Red 255, Green 168, Blue 0, White 83"></color-mix>
  
  3200K
  <color-mix colors="Red 255, Green 180, Blue 0, White 155"></color-mix>
  
  4200K
  <color-mix colors="Red 247, Green 214, Blue 19, White 255"></color-mix>
  
  5600K
  <color-mix colors="Red 217, Green 251, Blue 50, White 255"></color-mix>
  
  8000K
  <color-mix colors="Red 168, Green 255, Blue 84, White 255"></color-mix>
  
  104
  <color-mix colors="Red 82, Green 0, Green 170, Blue 120, Amber 50"></color-mix>
  
  112
  <color-mix colors="Red 0, Green 180, Green 65, Blue 0, Amber 220"></color-mix>
  <color-mix colors="UV 90"></color-mix>
  
  120
  <color-mix colors="Red 63, Green 75, Green 145, Blue 0, Amber 44"></color-mix>
  <color-mix colors="UV 190"></color-mix>
  
  128
  <color-mix colors="Red 185, Green 40, Green 100, Blue 233, Amber 0"></color-mix>
  <color-mix colors="UV 70"></color-mix>
  
  136
  <color-mix colors="Red 95, Green 60, Green 25, Blue 30, Amber 255"></color-mix>
  <color-mix colors="UV 200"></color-mix>
  
  144
  <color-mix colors="Red 0, Green 245, Green 0, Blue 0, Amber 60"></color-mix>
  <color-mix colors="UV 150"></color-mix>
  
  152
  <color-mix colors="Red 0, Green 200, Green 0, Blue 200, Amber 0"></color-mix>
  <color-mix colors="UV 200"></color-mix>
  
  160
  <color-mix colors="Red 45, Green 0, Green 125, Blue 180, Amber 0"></color-mix>
  <color-mix colors="UV 60"></color-mix>
  
  168
  <color-mix colors="Red 200, Green 0, Green 177, Blue 235, Amber 0"></color-mix>
  <color-mix colors="UV...

SCSS

body {
  background: #000;
  color: #fff;
  font-weight: bold;
  font-size: 150%;
  font-family: monospace
}

.color-mix {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1rem;
}

.color {
  width: 2rem;
  height: 2rem;
  margin: .2rem;
}

.equals {
  padding: .5rem;
}

JavaScript

new Vue({
  el: '#app',
  components: {
    'color-mix': {
      template: `<div class="color-mix"><div
        class="addend color"
        v-for="color in rgbaColors"
        v-bind:style="{ background: 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (color[3]/255) + ')' }">
      </div>
      <div class="equals">=</div>
      <div class="color summary"
        v-bind:style="{ background: 'rgb(' + mixedColor[0] + ',' + mixedColor[1] + ',' + mixedColor[2] + ')' }">
      </div>{{ rgbToHex(mixedColor) }}</div>`,
      props: [`colors`],
      data: function() {
        return {
        	colorLookup: {
            Red: `#ff0000`,
            Green: `#00ff00`,
            Blue: `#0000ff`,
            Cyan: `#00ffff`,
            Magenta: `#ff00ff`,
            Yellow: `#ffff00`,
            Amber: `#ffbf00`,
            White: `#ffffff`,
            UV: `#8800ff`,
            Lime: `#bfff00`,
            Indigo: `#4b0082`
          }
        };
      },
      methods: {
      	rgbToHex: function(rgb) {
        	return `#${this.rgbComponentToHex(rgb[0])}${this.rgbComponentToHex(rgb[1])}${this.rgbComponentToHex(rgb[2])}`
      	},
      	rgbComponentToHex: function(c) {
          const hex = c.toString(16);
          return hex.length == 1 ? "0" + hex : hex;
      	}
      },
      computed: {
       	rgbaColors: function() {
					return this.colors.split(/, ?/).map(color => {
          	let [hex, alpha] = color.split(' ');
            
            if (hex in this.colorLookup) {
            	hex = this.colorLookup[hex];
            }
            
            if (!alpha) {
            	alpha = 255
            }
            
            return [
            	parseInt(hex[1] + hex[2], 16),
            	parseInt(hex[3] + hex[4], 16),
            	parseInt(hex[5] + hex[6], 16),
              parseInt(alpha)
            ]
          });
        },
        mixedColor: function() {
          let result = [0, 0, 0];
          for (const color of this.rgbaColors)...