<div>
  <button>Button</button>
  <div>
    <span>Color info (in RGBA format):</span> <span id="colorInfo"></span>
  </div>
</div>
body { 
  display: grid;
  place-items: center;
  text-align: center;
  height: 100vh;
  margin: 0;
}
button {
  min-width: 135px;
  max-width: 200px;
  min-height: 50px;
  border: 0;
  outline: 0;

  color: white;

  /* pink to orange */
  background: #ee0979; 
  background: linear-gradient(to right, #ee0979, #ff6a00);
  
  vertical-align: top;
  
  cursor: pointer;
}
var btn = document.querySelector("button");
var ctx;

var colorInfoElem = document.querySelector("#colorInfo");
html2canvas(btn).then(canvas => {
  ctx = canvas.getContext("2d");
  
  btn.addEventListener("click", getColorAtPoint)
});

function getColorAtPoint(e) {
  // Get the coordinate of the click
  let x = e.offsetX;
  let y = e.offsetY;
  
  // Get the color data of the canvas version of our element at that location
  let rgbaColorArr = ctx.getImageData(x, y, 1, 1).data;

  colorInfoElem.innerText = rgbaColorArr; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3.us-east-2.amazonaws.com/zachsaucier-com/html2canvas.min.js