franvarney/index.html

## index.html
<!doctype html>
<html>
  <head>
    <style>
      .colors, #preview {
        height: 50px;
        width: 50px;
      }
      .colors:hover {
        cursor: pointer;
      }
      #preview {
        background-color: #FFFFFF;
      }
      .red {
        background-color: #FF0000;
      }

      .yellow {
        background-color: #FFFF00;
      }

      .green {
        background-color: #00FF00;
      }

      .blue {
        background-color: #0000FF;
      }
    </style>
  </head>
  <body>
    <div id='preview'></div>
    <div>
      <div class='colors red'></div>
      <div class='colors yellow'></div>
      <div class='colors green'></div>
      <div class='colors blue'></div>
    </div>
    <script>
      function mixColors(color) {
        var stylesheet = document.styleSheets[0];

        var preview = document.getElementById('preview');
        var prevColor = getComputedStyle(preview).backgroundColor;

        var values = color.slice(4, color.length - 1).split(', ');
        var prevValues = prevColor.slice(4, prevColor.length - 1).split(', ');

        var newColor = 'rgb(' + Number((prevValues[0] * 0.9) + (values[0] * 0.1)) + ', ' + Number((prevValues[1] * 0.9)  + (values[1] * 0.1)) + ', ' + Number((prevValues[2] * 0.9)  + (values[2] * 0.1)) + ')';

        preview.style.backgroundColor = newColor;
      }

      function getColor(e) {
        var element = e.target;
        var color = element.className.split(' ')[1];
        var divColor = getComputedStyle(element).backgroundColor;

        switch (color) {
          case 'red':
            mixColors(divColor);
            break;
          case 'yellow':
            mixColors(divColor);
            break;
          case 'green':
            mixColors(divColor);
            break;
          case 'blue':
            mixColors(divColor);
            break;
          // default
        }
      }

      var elements = document.getElementsByClassName('colors');
      Object.keys(elements).forEach(function (key) {
        elements[key].onclick = getColor;
      });
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<style>
	.colors, #preview {
	height: 50px;
	width: 50px;
	}
	.colors:hover {
	cursor: pointer;
	}
	#preview {
	background-color: #FFFFFF;
	}
	.red {
	background-color: #FF0000;
	}

	.yellow {
	background-color: #FFFF00;
	}

	.green {
	background-color: #00FF00;
	}

	.blue {
	background-color: #0000FF;
	}
	</style>
	</head>
	<body>
	<div id='preview'></div>
	<div>
	<div class='colors red'></div>
	<div class='colors yellow'></div>
	<div class='colors green'></div>
	<div class='colors blue'></div>
	</div>
	<script>
	function mixColors(color) {
	var stylesheet = document.styleSheets[0];

	var preview = document.getElementById('preview');
	var prevColor = getComputedStyle(preview).backgroundColor;

	var values = color.slice(4, color.length - 1).split(', ');
	var prevValues = prevColor.slice(4, prevColor.length - 1).split(', ');

	var newColor = 'rgb(' + Number((prevValues[0] * 0.9) + (values[0] * 0.1)) + ', ' + Number((prevValues[1] * 0.9) + (values[1] * 0.1)) + ', ' + Number((prevValues[2] * 0.9) + (values[2] * 0.1)) + ')';

	preview.style.backgroundColor = newColor;
	}

	function getColor(e) {
	var element = e.target;
	var color = element.className.split(' ')[1];
	var divColor = getComputedStyle(element).backgroundColor;

	switch (color) {
	case 'red':
	mixColors(divColor);
	break;
	case 'yellow':
	mixColors(divColor);
	break;
	case 'green':
	mixColors(divColor);
	break;
	case 'blue':
	mixColors(divColor);
	break;
	// default
	}
	}

	var elements = document.getElementsByClassName('colors');
	Object.keys(elements).forEach(function (key) {
	elements[key].onclick = getColor;
	});
	</script>
	</body>
	</html>