Is it possible to get the majority color of an emoji?

Question

What I'm trying to achieve is adding a text-shadow to an emoji with the text-shadow color being the most prominent color in the emoji.

I know there are JavaScript libraries that identify the most prominent color in images, but since the emoji is technically text I'm not sure how I'd do it or even if it's possible at all.

I would provide some code for what I've already tried, but quite honestly, I wouldn't even know where to start.

.emoji {
  text-shadow: 0px 0px 20px rgba(54, 169, 230, 0.65);
  padding: 3px 6px;
  font-size: 24px;
}

<span class="emoji">💎</span>

Answer 1

An alternative approach without using text-shadow is to copy the emoji, place it directly behind the original and blur it.

You could create the copy directly in the HTML, or if easier use js, as in the example below.

var emoji = document.querySelector("#blur-me");
var copy = emoji.cloneNode(true);
copy.classList.remove("emoji");
emoji.appendChild(copy);

.emoji {
  padding: 3px 6px;
  font-size: 24px;
  position: relative;
  display: inline-block;
}

.emoji span {
  position: absolute;
  left: 6px;
  z-index: -1;
  filter: blur(10px);
}

<span class="emoji" id="blur-me">💎</span>