Conversation

Notices

1. Embed this notice
   Yohan Yukiya Seseㆍ사요한・謝雪矢 (youronlyone@c.im)'s status on Thursday, 28-Mar-2024 14:39:17 JST Yohan Yukiya Seseㆍ사요한・謝雪矢

   It's time to put to rest #hex and #rgb() / #rgba() colours in #CSS and embrace the future: #oklch() and #oklab()

   * oklch() model: https://caniuse.com/?search=oklch%28%29
   * oklab(): https://caniuse.com/?search=oklab%28%29

   I'm not sure why we still need to add/support lch() and lab() since the ‘okay’ version is the ‘fixed’ version… which is better. Then again, I'm not a #colour expert, hence I can't think of a reason. (Can someone enlighten us, mortals? Thank you!)

   Since oklch(), oklab(), lch(), and lab() are still not widely supported (yet), and many end-users are still using an old version of browsers without support, there is #hwb().

   As you can see from https://caniuse.com/?search=hwb%28%29 hwb() is widely supported already. The only browsers still without hwb() support are niche browsers, mainly from China (they don't even support rgb() according to #CanIUse).

   * Base #color model: hwb()
   * To be future proof: oklch() or oklab()

   What I'm more excited about is the #RelativeColor feature from #CSSColor5, but that's for another day.

   #CSSColor4 #CSS5 #CSS #colors #color #webdev #webmaster

   • Embed this notice
     Chris Lilley 🏴󠁧󠁢󠁳󠁣󠁴󠁿 (svgeesus@mastodon.scot)'s status on Thursday, 28-Mar-2024 14:39:16 JST Chris Lilley 🏴󠁧󠁢󠁳󠁣󠁴󠁿

     in reply to

     @youronlyone lch() and lab() because a lot of tooling, instruments, published data uses that.
     You are right that oklab and oklch are better if backwards compat is not a concern.

   • Embed this notice
     Yohan Yukiya Seseㆍ사요한・謝雪矢 (youronlyone@c.im)'s status on Thursday, 28-Mar-2024 14:40:07 JST Yohan Yukiya Seseㆍ사요한・謝雪矢

     in reply to

     • Chris Lilley 🏴󠁧󠁢󠁳󠁣󠁴󠁿

     @svgeesus Ahh! That's a very good point!

     Thank you for sharing!