Show HN: Simple algorithm and color space to generate diverse skin tones
I found that picking out plausible but diverse skin tones for my digital art and game development projects was kind of difficult, and I got curious about if there was a way to define a color space that made it easy.
I've built a color picker and procedural generation algorithm based on the space as well as a bunch of other fun js features and demos throughout the page that use the equations. If you find it interesting, I have lots of explanations of how I built it and what properties the space has.
The methodology might be a bit shaky, but hopefully the result is as helpful for others as I have found it! There's lots of room for improvements (see the Future Work section), but I'm really happy with how it turned out.
- s1mon - 9635 sekunder sedanIt's always entertaining to try to understand these things from first principles. Color and skin color in particular are very complex things to measure and model. It's not just a physical quantity, it's also a matter of human perception based on lighting and a host of factors.
It seems like some work was done to research existing approaches, but I don't see any reference to Pantone Skin Tones [0]. Without intending to, I've worked on 3 different projects which involved measuring skin tones for makeup applications. The Pantone range is not 100% perfect, but it's pretty well done and easy to understand. There are two axes: a light/dark one, and red-yellow one [1].
[0] https://www.pantone.com/na/en-us/skintone
[1] https://cosmeticsbusiness.com/pantone-skintone-guide-80945
- vermarish - 15099 sekunder sedanThis is beautiful work! First, I thought this would involve using PCA to go from 3D to 2D, which would result in an easier selector to use, but at the expense of representing every person.
Then, I thought this would stop at using the U-space vectors (the ones that form the basis of the PCA image) and their corresponding ellipse to form our color space, but no, the function fitting is a very slick idea, even if it was executed by hand.
Lastly, I love the presentation of sampling from different r values. Whether you sample from a fixed r value or a range of r values, I bet this has great applications in game design or animation.
I still don't quite get the manual data labeling process at the beginning? It seems like it would encode some bias, but the consistency of the first point cloud and the results certainly speak for themselves.
- dahart - 4858 sekunder sedan> What colors are we? The short answer is maybe something like “brown” and the long answer is very, very long.
Pete Shirley (author of Ray Tracing In One Weekend) is also a part time color scientist, and he clued me into the fact that if you crank the saturation to 100% of pictures of people of any race, the skin color comes out orange. I think I heard that some face detectors may work on this principle, but I don’t remember where I heard that.
- mbo - 12138 sekunder sedanLove it!
I was looking at this a little while ago, and used some of The Pudding's data on makeup/foundation shades (https://pudding.cool/2018/06/makeup-shades/) and plotted it into the Oklab colorspace (https://observablehq.com/@55th/foundation-shades). The shades form themselves into that same crescent as seen in the article.
- andai - 15432 sekunder sedanNice. Most of these colors look right to me, but I'm also seeing green, blue and purple? If you're curating colors from the space manually then it's not a problem.
"Only realistic colors" would be a different problem. And I'm not sure if there's a way to solve that problem without excluding some real colors too.
(Maybe if the colour selector was a different shape? I don't know much about color spaces.)
- stephantul - 14964 sekunder sedanLove it. I especially thought the introspective “aside” section on related resources was great, and I wish more people would show this kind of reflection.
- stu2b50 - 4294 sekunder sedanI think it’s worthwhile to note this is under a light with a color temperature similar to sunlight.
When you’re actually painting, skin can really be any color. Blue is a perfectly valid (and fairly common) skin color - just look at someone in the moonlight. It takes two to tango, and the other dancer is the light source.
- xdennis - 202 sekunder sedanA reporter once asked the Picard actor why his character is bald. Surely, they would find a cure by the time humanity figured out space travel. The actor countered saying that by the 24th century they would have stopped caring about such trivial things.
Similarly, you'd think that as people got less racist they would stop caring about skin color. Instead, the left is obsessed with skin color. We used to have a single emoji skin color representing all of humanity. Now we have 6. Presumably OP thinks that's too few. We used to have a single emoji for pregnant women. Now we have 18. 6 for women who identify as men, 6 for women who identify as non-women, and 6 women who don't identify.
- m_w_ - 16152 sekunder sedanThis is super cool! I have always loved projects that try to categorize color space. Usually my work has gone in the other direction - isGray, isCloseToWhite, isPastel - but it's the same insofar as it's defining shapes like your matplot visual.
Wish I had this on hand like this three or four years ago when I was working on VR avatar software - we had hard-coded skin tone options at the time - would have been a cool addition!
- kaitlinseng - 1690 sekunder sedanSo glad to see Nyma getting recognition! I went to elementary and middle school with her, happy to see her succeeding.
- Sharlin - 6093 sekunder sedanThe U and V axes seem roughly correspond to the tint/temperature (green-magenta/blue-amber) axes that you can find in a white balance tool in photo editors and also as an in-camera setting.
Nb. I'd advise against calling the PCA'd space XYZ because that's a well known standard color space: https://en.wikipedia.org/wiki/CIE_1931_color_space#CIE_XYZ_c...
- manoDev - 12094 sekunder sedanSkin tones are particularly difficult to pin down, besides the pigmentation there are two effects at play: 1) sub surface scattering (light goes thru and bounces under the skin a bit) and 2) some infra-red emission (the responsible for making some people appear magenta on digital photography)
So even when you get the palette right, to paint it like a believable material in a convincing way is still super hard!
- xp84 - 12165 sekunder sedanThis part ( https://toneyalexander.github.io/inclusive-color-space/#pick... ) is especially cool.
Would love to see this 3-D picker ability in the many character designers out there, instead of the lame 8 swatches or whatever.
- ecesena - 8349 sekunder sedanNice. This is relatively old work (2020) but Pinterest had/has skin tone features, for example if you're searching for cosmetic products. Worth a check if anything might be useful for your work. https://medium.com/pinterest-engineering/powering-inclusive-...
- dofm - 12917 sekunder sedanInteresting though that the 1.5 setting (at least on my older iPhone) doesn’t really ever seem to cover the range of skin tones of indigenous Australians (“aboriginal” and Torres Strait Islanders), who apparently get their skin tones from a somewhat different expression of genes than other peoples with darker skin.
The 2.0 “outliers” cover those skin tones.
Masai and some Somali skin tones, similarly, look better represented by the outliers.
The full range of possible human skin tones is perhaps a bit of a challenge for technical colour representation, partly because diffuse reflectance seems to vary so much and that is hard to approximate on screen (e.g. as any website designer could attest, the difference between representing silver and grey is the use of highlights), though the representation of skin tones is a lot better than the early colour film era.
- PullJosh - 13694 sekunder sedanI love this! Such a beautiful use of some real nerdy math to benefit humans in a way non-nerds would appreciate.
- rrradical - 13495 sekunder sedanVery neat project. Could I use this code to generate skin tones in my own project? Or more meant to just be educational/inspirational? I guess I'm wondering if you've considered adding a license.
- ptsneves - 13960 sekunder sedanOn the movie Dolemite by Eddy Murphy, they go over the fact that black people absorb light and white people reflect, and how that changes the motion picture shooting process totally. Also how one size does not fit all. Cool project! I am not much into the humanities part of the project. For me this is as natural as having a localization framework, just in this case for skin tones.
- zetanor - 8076 sekunder sedanSetting R² to various large values like 50, 500 and 5000 then moving the slider around seems to give a decent and simple visual representation of what's happening.
- JacobAsmuth - 3803 sekunder sedanMe after I spend a day at the beach: #BA3A17
- efitz - 12680 sekunder sedanNever seen anyone #E6FFF8 (bottom right corner).
An albino that consumed too much colloidal silver for years?
- RIMR - 15091 sekunder sedanFor anyone confused, turn off your dark mode extension. :)
- hluska - 14579 sekunder sedanThis is excellent work! You’ve got a 49 year old and a 10 year old equally into it. That’s impressive - nice work.
- aaroninsf - 11264 sekunder sedanNot my domain though I followed the data science enough to nod as if I really followed it,
but this is just lovely and inspirational work. A unique marriage of hacking in the celebratory sense, thoughtfulness, and meaningful contribution. Outstanding.
- bellowsgulch - 13276 sekunder sedanSkin is so interesting as a surface to think about how light passes through and bounces off of.
There is at least one article published by a technical artist at Pixar who describes modeling a skull within a human scan so that subsurface lighting is more accurately rendered.
I suspect you could combine this with dr_scully’s comment and GolDDranks’ to reach the nuance involved in long tail realism details.
- Abh1Works - 15363 sekunder sedanCool work!
- ralusek - 11311 sekunder sedanIf you're ##CCFFFF please go to the hospital
- uhdozo - 8910 sekunder sedanVery interesting, I'll need to read it again lol
- tyromaniac - 15851 sekunder sedan[dead]
- noobahoi - 12088 sekunder sedan[flagged]
- nahidmahmud555 - 7135 sekunder sedan[flagged]
- - 16233 sekunder sedan
- drnick1 - 10750 sekunder sedan[flagged]
- richard_chase - 9467 sekunder sedan[flagged]
- moralestapia - 15469 sekunder sedanInteresting.
It might be a bit biased though, as there's much more variation on fairer skin tones than on dark ones (there's only one that looks like the colloquial "black").
This contradicts all research and social media from the past decade.
- 383toast - 15183 sekunder sedanSeems to underrepresent pale skin tone variety
- hneqy2wqls - 12227 sekunder sedanThis hits different after a long week
Nördnytt! 🤓