search

ucarion / cielab.io

CIELab.io is a color tool based on human perception
https://cielab.io
88 stars 7 forks source link

feat: add forma 36 colors #2

Closed fabe closed 2 years ago

fabe commented 2 years ago

Hey, not sure if you're taking contributions here, if not feel free to close this!

I added our (Contentful's) color palette of our design system Forma 36. We've used CIELAB and this tool during our work on the palette quite a bit, so I thought it might make sense to add it. Thanks!

ucarion commented 2 years ago

Super cool, thanks for sharing this! Just merged.

On this point in the blog post, btw:

In some cases, like our base blue, we had to fine-tune the hues in the lighter shades, or they were too purple.

This is because CIELab actually has some flaws. In particular, it's quite skewed along the blue axis, dipping into purples. OKLab performs better here, here's a cool video articulating some of the theory and how it comes up in the context of CSS Color 4:

https://www.youtube.com/watch?v=dOsp6u4bIwI

I wasn't aware of oklab when making this website -- in fact, I'm not even sure if oklab was even published yet -- but it would be a better choice these days.

fabe commented 2 years ago

Thank you! Yes, absolutely, we've run into quite a few limitations of CIELAB, although it was still pretty helpful to reason about color. I'll check out oklab, looks really promising!