{"id":321233,"date":"2020-09-17T07:52:14","date_gmt":"2020-09-17T14:52:14","guid":{"rendered":"https:\/\/css-tricks.com\/?p=321233"},"modified":"2020-09-17T07:52:15","modified_gmt":"2020-09-17T14:52:15","slug":"changing-emoji-skin-tones-programmatically","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/changing-emoji-skin-tones-programmatically\/","title":{"rendered":"Changing Emoji Skin Tones Programmatically"},"content":{"rendered":"\n

So, you know how many emoji have different skin tones? Emoji skin tones are extremely popular, especially over text and on social media. The raised black fist emoji (✊🏿) was voted \u201cThe Most 2020 Emoji\u201d<\/a> by Emojipedia\u2019s World Emoji Awards.<\/p>\n\n\n\n

Each tone is a modifier and many emoji are made up of modifiers and base encodings that map to specific characters. Unfortunately, not every emoji library supports modifiers. But, given their popularity, emoji skin tone modifiers are more than a \u201cnice to have\u201d feature. Plus, they\u2019re a smart way to work because they allow us to write more modular and efficient code.<\/p>\n\n\n\n

So that\u2019s what we\u2019re doing in this article: figure out how to work with emoji modifiers programmatically. This way, if you\u2019re ever stuck without skin tone support \u2014 or want to create custom variations of other emoji \u2014 then you\u2019ll know how!<\/p>\n\n\n\n\n\n\n

Meet the Fitzpatrick scale<\/h3>\n\n\n

Skin tone modifiers were officially added to emoji in 2015 as part of Unicode 8.0<\/a>. They are based on the Fitzpatrick scale<\/a>, which is a formal classification of human skin tones. The following chart shows how the emoji characters match to Fitzpatrick types:<\/p>\n\n\n\n

Skin tone character<\/th>Fitzpatrick type<\/th><\/tr><\/thead>
🏻<\/td>1-2<\/td><\/tr>
🏼<\/td>3<\/td><\/tr>
🏽<\/td>4<\/td><\/tr>
🏾<\/td>5<\/td><\/tr>
🏿<\/td>6<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

In the simplest use case, when one of these characters is appended to an emoji that supports skin tone modifiers, it will change the skin tone of the emoji.<\/p>\n\n\n\n

Another way to say that: 👶 +🏽 = 👶🏽<\/p>\n\n\n

Applying skin tone modifiers with CSS<\/h3>\n\n\n

To swap between emoji skin tones using CSS, we would start with the base emoji character (👶) and then append the skin tone using the ::after<\/code> pseudo-selector.<\/p>\n\n\n\n