October 25, 2018No Comments

Talk to Makeup Guru

Everyday there is another set of new makeup products. Sometime it's about texture, and sometimes it's about brand itself - but most all, it's about color.

"For those of us who are obsessed with makeup — lipstick in particular — there's no such thing as too many of our favorite products. With our laser vision, we can tell the true difference between any two shades, no matter how similar they may look to the untrained eye." — Twitter Boyfriends Are Confused About These Two Obviously Very Different Worlds Apart Lip Colors, KARA NESVIG

Makeup Guru was designed to give "FRESH MAKEUP TUTORIAL: WITH BRAND NEW {color} EYESHADOW!" based on your favorite color at this moment. Original text is from one of the tutorials in Deck of Scarlet. The project is also a continuation of Makeup Guru from Reading and Writing Electronic Text class, but in more conversational form.


example of using Makeup Guru when you choose pink lavender color



To generate entities and functions, I used xkcd color data from Corpora. Full code can be found here: Makeup Guru. The process is composed of (1) sorting hex to RGB (2) building word vectors based on RGB values (3) receiving user's favorite color and seeking nearest 6 colors (4) implementing colors to tutorial along with other elements.

example of using Makeup Guru when you choose one of green shades

example of using Makeup Guru when you choose pink gross green color

xkcd.json provides a wide variety of 952 colors, and is inclusive to such colors as poo, baby puke green, snot shade, diarrhea... etc. Of course, beauty is subjective (especially when it comes to an abstract component as color), so some people might want those shades in their makeup. Regardless of the terms, the Makeup Guru will go through the same process and give you the tutorial.


1. Hex to RGB

def hex_to_int(s):
    s = s.lstrip("#")
    return int(s[:2], 16), int(s[2:4], 16), int(s[4:6], 16)
colors = dict()

sorting.py returns the same xkcd colors along with RGB values as sorted.json, which looks like this:

  "cloudy blue": [172, 194, 217],
  "dark pastel green": [86, 174, 87],
  "dust": [178, 153, 110],
  "electric lime": [168, 255, 4],
  "fresh green": [105, 216, 79],
  "light eggplant": [137, 69, 133],


2. Color Vectors

The original codes I have are in python and p5.js (as separate sketches), which were relatively easier to create vector space. In order to adapt the same structure, I used vectors node module. var dist = require('vectors/dist')(3) (and it only operates with var) creates three dimensional vector space, which can be used for locating [red, green, blue] values.

function findNearest(v) {
  var dist = require('vectors/dist')(3)
  let keys = Object.keys(colorVector);
  keys.sort((a, b) => {
    let d1 = dist(v, colorVector[a]);
    let d2 = dist(v, colorVector[b]);
    return d1 - d2;
  nearestColors.length = 0;
  for (let i = 0; i < 7; i++){

fineNearest() seeks 7 nearest colors from the "favorite color" and results nearestColors - these 7 colors are used for generating the overall tutorial text.


3. Favorite Color and Nearest Colors

app.intent('Pick Color', (conv, params) => {
  conv.data.favColor = params.xkcd;
  pos = colorVector[conv.data.favColor]

For example, if you picked "cocoa" as your favorite color, than it will be:

  pos = colorVector["cocoa"]
  findNearest([135, 95, 66])


4. Colors in Tutorial

    `How exciting! To give you a bold look, I'm switching to a bigger blending brush.` +
    ` And I’ll use it to blend out the edges of that ` +
    nearestColors[3] + ` shade into the crease and, you know, make it look really nice and seamless.` +
    ` And see how that eyeshadow kind of blended into more of like a ` +
    nearestColors[4] + ` shade? When it’s fading, it looks more ` +
    nearestColors[5] + `, rather than ` + nearestColors[6] + `.` +
    ` It is really nice. It looks like I used many different colors when I just used one single eyeshadow.`


Further Notes 💄

  • Sometime I think marketing operates in similar way as fortune teller: consumers give the "seed" of their story, and fortune tellers/industries rephrase and repackage the content that is given by the consumers. So you are actually offering them a hint to target you.
  • Throughout the tutorial, the Makeup guru talks about only one shadow product, in many different phrases.
  • node-word2vec might be interesting to use for future related projects.


No comments.

Leave a reply