Adding colour to an emoji using different CSS techniques

Introduction

This is a ‘for fun’ article that I thought I’d share after trying a few different methods of adding extra layered colour to coloured emoji. I’m not going to cover any technical aspects, for a very in-depth article you could read Everything You Need To Know About Emoji written by Rob Reed on Smashing Magazine.

Quick wins, achievable results

Text based emoji (pictographs etc.) e.g. ⌘ ⌥ ‰ ★ are simple and will inherit the currentColor set by the CSS. I’ll be playing with the custom coloured emoji in this article e.g. 👋 🤷‍♂️ 🚀 to showcase the effects that you can achieve. It won’t be an exhaustive list but rather a taster for quick wins and easily achievable results.

№ 1: Full coloured fill

The simplest technique is to completely fill the character(s). Trick here is to make the content transparent and refill using the text-shadow property with offset-x, offset-y and blur-radius set to 0 (zero.).

HTML

<span class="emoji-fill">👋 🤷‍♂️ 🚀</span>

CSS

.emoji-fill {
  color: transparent;
  text-shadow: 0 0 0 #cc2e75;
}

RESULT

There are some fairly obvious drawbacks to this approach but keep on reading…

№ 2: Coloured outline

The following is *ahem* — a bit of a hack, but hey, it works (cross browser too.)

What we’re doing is adding text-shadow to the visible character whilst simultaneously making it transparent to remove the main body. This leaves us with a halo effect.

To fully remove the main part of the character we use a ::before pseudo-element to perfectly cover the original using the name attribute (attr) to select the same emoji for the purpose of covering. The pseudo-element uses the same technique as № 1: Full coloured fill in terms of colouration. Remember to set the colour of the text-shadow to match your document (or parents) background colour.

HTML

<span class="emoji-outline" name="👋">👋</span>
<span class="emoji-outline" name="🤷‍♂️">🤷‍♂️</span>
<span class="emoji-outline" name="🚀">🚀</span>

CSS

.emoji-outline {
  position: relative;
  color: transparent;
  text-shadow: 0 0 3px #cc2e75;
}
.emoji-outline::before {
  position: absolute;
  content: attr(name);
  text-shadow: 0 0 0 #fff; /* ⬅︎ Set to parents background colour */
}

RESULT

№ 3: Coloured filter

In this example we’ll be using an external resource tool (Hex Colour To CSS Filter Converter) to convert the target HEX colour into a set of parameters useable by a filter in our CSS.

HTML

<span class="emoji-filter">👋 🤷‍♂️ 🚀</span>

CSS

.emoji-filter {
  filter: invert(49%) sepia(80%) saturate(5916%) hue-rotate(313deg) brightness(82%) contrast(94%);
}

RESULT

Don’t be discouraged by the first results, you’ve now got base values you can edit allowing for a fine degree of control.

Edit until you are happy with the results

This is where you’ll need to play about until you find a suitable combination to meet your needs. Lets start by reducing the invert value from 49 down to 9 and saturate from 5916% to 1000%.

EDITED CSS

.emoji-filter {
  filter: invert(9%) sepia(80%) saturate(3916%) hue-rotate(313deg) brightness(82%) contrast(94%);
}

NEW RESULT

Yeah, it’s still a long way from perfect but you I hope you get the idea. Depending on your target colour you’ll have an easier time with some than others, it may pay to reselect the base colour and start over. Hopefully these examples have been enough to get the creative juices flowing and be a starter into the world of colouring emojis*.

*For the sake of utility, it’s probably easiest for English speakers to agree on “emojis” as the plural of “emoji.” However, the Oxford English Dictionary, Merriam-Webster Dictionary, and others have long listed both “emoji” and “emojis” as options.

grammarly.com

Final thoughts

I chose #cc2e75 as the example base colour as it works well with the Light & Dark themes that this site uses, making the process a bit more difficult. If you are working with a singular background colour you’ll reduce by at least 50% the number of variables you need to take into account. 🙃

Happy colouring and if you have any other (good) suggestions please let me know, thank you!

Article Information

About Dave A.K.A. 'barrd'

Dave is a Bristol based Scottish Expat who has 20+ years experience of web development. Loves playing guitar, reading books, watching Sci-Fi and tinkering with tech.

Read more about Dave