Show HN: Simple algorithm and color space to generate diverse skin tones

Posted by automatoney 5 hours ago

Show HN: Simple algorithm and color space to generate diverse skin tones(toneyalexander.github.io)

Hello HN!

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.

349 points | 73 commentspage 2

kaitlinseng 1 hour ago|

So glad to see Nyma getting recognition! I went to elementary and middle school with her, happy to see her succeeding.

Sharlin 2 hours ago||

The 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 4 hours ago||

Skin 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 4 hours ago||

This 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.

barbecue_sauce 3 hours ago|

I think the ideal would be to use this picker to select a few tones, and then gradient map those across different parts of the body according to a grayscale map. Then you could fine-tune things like palm color, cheeks, facial tone, etc. individually.

ecesena 3 hours ago||

Nice. 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-...

PullJosh 4 hours ago||

I love this! Such a beautiful use of some real nerdy math to benefit humans in a way non-nerds would appreciate.

rrradical 4 hours ago||

Very 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.

automatoney 4 hours ago||

Good catch, added MIT license - feel free to use it! On top of that, my understanding is that math/equations are not subject to copyright, so the core part of this work (the equations/ideas) I think legally has 0 limitations - even if there were a restrictive license. But IANAL so might have some misconceptions.

Joel_Mckay 4 hours ago||

Procedural generators are often free if you look around for a bit.

https://kuhantilope.gumroad.com/l/ultimate-skin

https://extensions.blender.org/add-ons/mpfb/

https://github.com/alessandro-zomparelli/tissue

ymmv, as some paid plugins actually speed up the funky blender workflow (the auto-Bake plugin by the same author is important for procedural generated textures.)

https://sanctus.gumroad.com/l/SLibrary?layout=profile

Have a great day =3

ptsneves 4 hours ago||

On 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 2 hours ago||

Setting 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.

efitz 4 hours ago|

Never seen anyone #E6FFF8 (bottom right corner).

An albino that consumed too much colloidal silver for years?

More comments...