JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <h1>Average Color of an Image</h1>
  <p>Drop an image in the box below to get the average color of it in RGB values! </p>
  <div id="dropBox" ondrop="drop(event)" ondragover="drag(event)">
    <p>Drop your image here! :)</p>
  </div>
  <div id="images"></div>
  <div class="colorBox"> </div>
</body>

CSS

@charset "UTF-8";

/* CSS Document */

body {
  margin: auto;
}

h1 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 24px;
  color: #036;
  text-align: center;
  font-weight: bold;
}

p {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #000;
  text-align: center;
}

.colorBox {
  height: 100px;
  width: 300px;
  margin-top: 50px;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  border: 1px solid #CCC;
}

#dropBox {
  height: 200px;
  width: 500px;
  background-color: #FFF;
  border: 2px dashed #CCC;
  margin: auto;
}

JavaScript

function addImage(file) {
	 var img = new Image();
   img.src = URL.createObjectURL(file);
   var hue = document.querySelector(".colorBox");

   img.onload = function() {
     var rgb = averageColor(img);
     var rgbString = "rgb(" + rgb.r + " , " + rgb.g + ", " + rgb.b + ")";
     rgb.innerHTML = "";
     //I used querySelector to grab the class .colorBox that will hold the rgb avrg. color value
     hue.style.backgroundColor = rgbString;
   }
   document.getElementById('images').appendChild(hue);

 }

 function averageColor(img) {
   //I create canvas and set the width and height of it to that of the image
   var canvas = document.createElement("canvas");
   var ctx = canvas.getContext("2d");
   var width = canvas.width = img.naturalWidth;
   var height = canvas.height = img.naturalHeight;

   ctx.drawImage(img, 0, 0);
   var imageData = ctx.getImageData(0, 0, width, height);
   var data = imageData.data;
   var r = 0; //I set the rgb values to 0 for non supporting browsers 
   var g = 0;
   var b = 0;
   //loop over each pixel

   for (var i = 0, l = data.length; i < l; i += 4) {
     r += data[i];
     g += data[i + 1];
     b += data[i + 2];
   }

   //get the average values for rgb using Math.floor 

   r = Math.floor(r / (data.length / 4));
   g = Math.floor(g / (data.length / 4));
   b = Math.floor(b / (data.length / 4));
console.log(r, g, b)
   return {
     r: r,
     g: g,
     b: b
   };
 }

 //create the drag and drop zone..
 window.drag = function(event) {
   event.stopPropagation();
   event.preventDefault();
   //event.dataTransfer.setData;
   event.dataTransfer.dropEffect = "copy"; //this property will copy the image to the new location
 }

 window.drop = function(event) {
   event.preventDefault();
   var file = event.dataTransfer.files[0];
   addImage(file); //append the dragged 
 }