the HSL color spectrum with all points mapped to their closest named CSS color.
- she/her
- twitch.tv/ShinyOlivia
rock mech with a fox cave painting face | gamedev | vtuber | 🏳️⚧️🏳️🌈 💜🤍🖤 she/her | art/rig: me | http://twitch.tv/ShinyOlivia | pfp: https://twitter.com/toothedselkie |
You must log in to comment.
in reply to @potch's post:
Cute! Just curious: how is the HSL → 2D mapping and the colors distance here? I thought this was done only fully saturated colors (the "peel" of the HSL cone), but I don't see black, and many colors look less saturated than I'd expect (but OTOH these aren't the HSL colors, but the closest named colors 🤔).
I think black presents a problem for voronoi diagrams in the HSL color space. All lightness 0 colors are black, so it would contain the entire bottom line, rather than a single point, and I'm not sure if there's a good algorithm for generalizing voronoi diagrams to allow kernel shapes that aren't points of size 0.
IDK about efficient implementation, but from a "definition" standpoint shouldn't replacing "distance to a point" with "distance to a (possibly 0-length) segment" be enough?
I mean, yes, but calculating the distance to even a line-section is significantly more challenging than calculating the distance to a point. I'm sure it's possible, but it's certainly work.
This is really cool, really pretty, and also really useful, since I often tend to restrict myself to css named colours when it isn't too much of a hassle to do so
I made a game a while back that tests your knowledge of CSS named colors https://color-guesser.emilybonar.com/
Really interesting to see where all the colors are clumped in this! Has me thinking about why certain areas on the spectrum have more fine-grained named color choices than others...
haha we almost said this but decided against, it seems like a lot of work
when i did it for my things i just stole the math for the transforms from python-colormath (srgb -> linear rgb -> CIE-1931 XYZ -> CIE-1976 L*a*b*; iirc some of the transforms are nonlinear so it's not necessarily doable with a single matrix transformation)
yeah we did it very carefully in JavaScript a while back, happy to share that code if it's useful. it was fun getting the matrix part wrong and seeing what that did to the resulting color wheel (we were rendering a color wheel), really made the whole thing feel less magical and more like choices someone made.
shouldn't this wrap on the left and right? it looks like it just cuts off at hue 0/360