Color for Unicode Emoji

Question

It's possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color?

For example, here is some Emoji and some regular (plane 0) Unicode symbols. All should be red, but only the symbols are rendered in red.

Associated HTML + CSS:

<p>   🐘🐧🐼 </p> <p>   ♥★ℹ </div>  p {   font-size: 3em;   color: red } 

Answer 1

Yes, you can color them!

div {    color: transparent;      text-shadow: 0 0 0 red;  }

<div>🚀🎭😻</div>

Answer 2

Not every emoji works the same. Some are old textual symbols that now have an (optional or default) colorful representation, others were explicitly (only) as emojis. That means, some Unicode codepoints should have two possible representations, text and emoji. Authors and users should be able to express their preference for one or the other. This is currently done with otherwise invisible variation selectors U+FE0E (text, VS-15) and U+FE0F (emoji, VS-16), but higher-level solutions (e.g. for CSS) have been proposed.

The text-style emojis are monochromatic and should be displayed in the foreground color, i.e. currentcolor in CSS, just like any other glyph. The Unicode Consortium provides an overview of emojis by style (beta version). You should be able to append ︎ in HTML to select the textual variant with anything in the columns labeled “Default Text Style; has VSs” and “Default Emoji Style; has VSs”. This doesn’t include the example emojis 🐘🐧🐼 and many others, though.

p {    color: red; font-size: 3em; margin: 0;    text-transform: text;           /* proposed */    font-variant-emoji: text;       /* proposed */    font-variant-color: monochrome; /* proposed */    font-color: monochrome;         /* proposed */    font-palette: dark;             /* drafted for CSS Fonts Level 4 */  }  p.hack {    color: rgba(100%, 0%, 0%, 0);    text-shadow: 0 0 0 red;  }  p.font {    font-family: Emojione, Noto, Twemoji, Symbola;  }  @font-face { /* http://emojione.com/developers/ */    font-family: Emojione;    src: local("EmojiOne BW"), local("EmojiOne"), local("Emoji One"),          /*   https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-bw.otf – monochrome only, deprecated, removed              https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-android.ttf – with hack              https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-apple.ttf – with hack */         url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff2") format("woff2"),         url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff") format("woff"),         url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.otf") format("truetype");  }  @font-face { /* https://www.google.com/get/noto/#noto-emoji-zsye */    font-family: Noto;    src: local("Noto Emoji"), local("Noto Color Emoji"), local("Noto"),          url("https://cdn.rawgit.com/googlei18n/noto-emoji/master/fonts/NotoEmoji-Regular.ttf");  }  @font-face { /* https://github.com/eosrei/twemoji-color-font/releases */    font-family: Twemoji;    src: local("Twemoji");  }  @font-face { /* http://users.teilar.gr/~g1951d/ */    font-family: Symbola;    src: local("Symbola");  }

<p title="🐘🐧🐼♥★ℹ💀👌 without variation selectors">&#x1F418; &#x1F427; &#x1F43C; &#x2665; &#x2605; &#x2139; &#x1F480; &#x1F44C;</p>  <p title="🐘🐧🐼♥★ℹ💀👌 with text variation selector 15">&#x1F418;&#xFE0E; &#x1F427;&#xFE0E; &#x1F43C;&#xFE0E; &#x2665;&#xFE0E; &#x2605;&#xFE0E; &#x2139;&#xFE0E; &#x1F480;&#xFE0E; &#x1F44C;&#xFE0E;</p>  <p title="🐘🐧🐼♥★ℹ💀👌 with emoji variation selector 16">&#x1F418;&#xFE0F; &#x1F427;&#xFE0F; &#x1F43C;&#xFE0F; &#x2665;&#xFE0F; &#x2605;&#xFE0F; &#x2139;&#xFE0F; &#x1F480;&#xFE0F; &#x1F44C;&#xFE0F;</p>  <p title="🐘🐧🐼♥★ℹ💀👌 with `text-shadow` hack" class="hack">&#x1F418; &#x1F427; &#x1F43C; &#x2665; &#x2605; &#x2139; &#x1F480; &#x1F44C;</p>  <p title="🐘🐧🐼♥★ℹ💀👌 with custom font" class="font">&#x1F418; &#x1F427; &#x1F43C; &#x2665; &#x2605; &#x2139; &#x1F480; &#x1F44C;</p>

I’ve added 💀 U+1F480 Skull and 👌 U+1F44C OK Hand Sign because the background should show through their “eyes” and I’ve used numeric character references just to make the code more obvious and more robust against copy-and-paste errors.

It has been proposed, however, that both variation selectors can be applied to any character, which would have no effect in most cases. Note that some vendors, especially Samsung, are already shipping (default) emoji glyphs for several other characters (goo.gl/a4yK6p or goo.gl/DqtHcc).