aeva
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.
Dec 17, 2023 at 8:52pmWeb
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 threadaevaDec 17, 2023

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
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.
Show threadNeia masksDec 17, 2023
@aeva Yeah, I've rarely regretted going straight to the specifications
Show threadNeia masksDec 17, 2023
@aeva And the direct link: https://www.w3.org/TR/css-color-4/#lab-colors
CSS Color Module Level 4

Show threadschwaDec 18, 2023

@aeva
And here I thought I could finally fix dark gradients in Firefox. Maybe not today.

This looks amazing though!

Show threadAnton LobashevDec 17, 2023
@aeva so what was the issue after all?
Show threadaevaDec 17, 2023
@soulthreads idk. I threw it all in the garbage and started over by following the w3c's specification to the letter and then it all just worked funny that.
Show threadChris Lilley ๐Ÿด๓ ง๓ ข๓ ณ๓ ฃ๓ ด๓ ฟJan 22, 2024
@aeva @soulthreads ๐Ÿ˜‰ glad it all worked out!
Show threadaevaJan 22, 2024
@svgeesus @soulthreads did you work on that spec?
Show threadChris Lilley ๐Ÿด๓ ง๓ ข๓ ณ๓ ฃ๓ ด๓ ฟJan 22, 2024
@aeva @soulthreads Yes, I wrote a lot of it.
It turns out that detailed, tutorial-like background plus minimal but correct code is what it took to get people using it.
Show threadaevaJan 22, 2024
@svgeesus @soulthreads oh awesome! I found it enormously helpful, so thank you for all of the work you put into it. Having correct examples available to reference along with clear implementation instructions made a huge difference for me.
Show threadjellDec 17, 2023
@aeva Nice! The more software that exposes LCH, the better.
Show threadolivia jackDec 18, 2023
@aeva oh wow! I hadn't heard of this before, thanks for sharing