aevaDec 17, 2023
I finally fixed Tangerine's oklab color implementation last night, and then went and also implemented oklch and hsl. I really like oklch! It feels like I magically unlocked a bunch of new colors. It's really powerful for generating color pallets.
Show threadaevaDec 17, 2023

To any would-be implementors of oklab and oklch, I highly recommend only working from the w3c's CSS4 color specification, and ignore everything else. The spec has a lot of important information that the original oklab blog post glosses over, the spec walks you through actually implementing it, and the standardized version uses a different white point.

Also it's worth noting that MDN's information on oklab is straight up wrong, and firefox doesn't correctly implement the "powerless" cases. 🙃

Show threadaeva

you can also just copy my implementation (with the caveat that I haven't tested it exhaustively), but I still recommend familiarizing yourself with the CSS4 color spec as it explains the theory involved

https://github.com/Aeva/tangerine/blob/excelsior/tangerine/colors.h

https://github.com/Aeva/tangerine/blob/excelsior/tangerine/colors.cpp

tangerine/tangerine/colors.h at excelsior · Aeva/tangerine

🍊. Contribute to Aeva/tangerine development by creating an account on GitHub.

GitHub
Dec 17, 2023 at 9:17pmWeb
Show threadaevaDec 17, 2023
I meant to post a picture of this earlier, but here's a demo of the new oklch support I added to #TangerineCSG last night. I've always found building color pallets to be clumsy and disappointing, so I'm really excited to now have something that's pretty good at transforming individual colors into sets of colors that compose well.
Show threadaevaDec 17, 2023
For the sake of comparison, here's the exact same demo but in hsl space instead of oklch. See alt text notes for both.
Show threadaevaDec 18, 2023
I think my main takeaway here is that, as a tool that a human interacts with directly, sRGB and hsl are alright for good for picking out specific saturated colors. I think oklab and oklch aren't as useful for that purpose, but oklab is really good at giving you a nice spectrum of color between two points, and oklch is really good at mutating colors into different colors that have similar behaviors.
Show threadaevaDec 18, 2023

Should any of you have seen this thread earlier today, and thought "gee, I really wish Aeva would make that demo interactive and toss it up on her itch.io page on a whim, then I could experience oklch color in full oklch color to my heart's content", WELL I HAVE GREAT NEWS FOR YOU BECAUSE I DID EXACTLY THAT:

https://aeva.itch.io/lchooq

L. C. H. O. O. Q. by Aeva

Explore oklch color space!

itch.io
Show threadClifton RoystonDec 18, 2023

@aeva

Very nice. After playing with it a bit, I have a question though:

Can we ever truly debug normals? Really normal normals? I have my doubts.

Show threadClifton RoystonDec 18, 2023

@aeva

But seriously, it's a neat toy, and while I haven't quite figured out what clicks do in different contexts, it does come up with some interesting and fairly harmonious color palettes.

Show threadaevaDec 18, 2023
@CliftonR :D awesome!
Show threadaevaDec 18, 2023
@CliftonR would you like an explanation of the clicks, or would that be a spoiler :3
Show threadFarbsDec 18, 2023

@aeva do you think oklab and oklch would be good for building an evenly spaced general purpose palette?

Regarding gradients, I usually just pick at least 3 points and make a curve through sRGB. It's very flexible and I find it's still pretty easy to use.

Show threadaevaDec 18, 2023
@Farbs I think it is quite good at that sort of thing.
Show threadFarbsDec 18, 2023

@aeva I've been mucking about with it, building a palette with some fixed colours and some random, and using terrible search algos to try to maximise the oklab distance between colours by moving the un-fixed ones.

Here I started with all eight corners of the RGB cube plus orange, and it regularly decides to fill in the gaps with a dark red, two blues, two greens, and two purples.

I think it's done a pretty decent job!

Show threadFarbsDec 18, 2023
@aeva Without orange that area was usually occupied by a very sad light brown.
Show threadaevaDec 18, 2023

@Farbs An comic artist friend of mine posted this tutorial that explains their approach to constructing constrained color pallets:

https://web.archive.org/web/20181210161549/http://pigeonbits.tumblr.com/post/90063280483/color-palette-tutorial-time-this-is-by-no-means

I was thinking if I expand LCHOOQ, I might try to make a similar thing where you pick a key color (or several) and it fills out some swatches that can then be tweaked further. And maybe also have some simple scenes for testing the pallet with different compositions.

Show threadaevaDec 18, 2023

@Farbs also I saw this post the other day which shows an interesting color pallet analysis tool https://mastodon.art/@musthbly/111581919579328448

I'm not sure if that's a custom tool or something built into aseprite, but it looks useful either way. I think it's really interesting because my first thought on that pallet in isolation would have been skepticism (on the bad assumption of using it for dithering), but the art speaks for itself.

musthbly (@[email protected])

Attached: 3 images had this palette for a while, submitted to lospec today https://lospec.com/palette-list/bly32 #MastoArt #PixelArt #palettes #aseprite

Mastodon.ART
Show threadaevaDec 18, 2023
@Farbs so that got me thinking that when I construct color pallets I get too fixated on the individual colors in isolation and I don't put nearly enough thought into how they actually compose.