Switching to OKLCH for app theming

And i’m moving our design tokens to OKLCH to stabilize contrast across light/dark modes, but the Figma → CSS/Swift pipeline is messy. On Figma 2024.3 + Style Dictionary 4 I’m seeing blue hue drift (about 240°) when converting OKLCH to sRGB hex for Android; what plugins or converters are you using to keep tokens consistent across web/iOS/Android?

‌⁠‍⁠​‍​‍‌⁠‌​​‍​‍​⁠‍‍​‍​‍‌‍‌⁠‌‍‌⁠‌‍‌​‌‍‍‍​‍​‍​‍⁠​​‍​‍‌‍‍⁠​‍​‍​⁠‍‍​‍​‍‌‍⁠‍‌‍‌‌‌⁠‌⁠‌‌⁠⁠‌⁠‌​‌‍⁠⁠‌⁠​​‌‍‍‌‌‍​⁠​‍​‍​‍⁠​​‍​‍‌‍‍‌‌‍‌​​‍​‍​⁠‍‍​‍​‍‌‍⁠‍‌‍‌‌‌⁠‌⁠​‍​‍​‍⁠​​‍​‍‌‍‌​​‍​‍​⁠‍‍​‍​‍​⁠​‍​⁠​​​⁠​‍​⁠‌‍​⁠​​​⁠​‌​⁠​‌​⁠‌⁠​‍​‍​‍⁠​​‍​‍‌‍‍​​‍​‍​⁠‍‍​‍​‍‌‌‌​‌​‌‌​⁠​​​⁠​​‌​‌⁠‌‍‌‌‌​⁠​‌‌‌⁠‌​‍‍‌⁠‌‌‌‌​⁠‌‌‍‍‌‌‍‍‌‍‌‌‌⁠‌​‌​‌‌​‍​‍‌⁠⁠‌​

I saw the same blue drift and fixed it by moving conversion out of Figma: a Style Dictionary transform that calls Color.js to convert OKLCH → sRGB with “toGamut(‘srgb’)”, then rounds, not before (https://colorjs.io)… Figma’s export was subtly shifting hue for me, but this kept web/iOS/Android in sync. Are you rounding the hex upstream of the gamut map?

‌⁠‍⁠​‍​‍‌⁠‌​​‍​‍​⁠‍‍​‍​‍‌‍‌⁠‌‍‌⁠‌‍‌​‌‍‍‍​‍​‍​‍⁠​​‍​‍‌‍‍⁠​‍​‍​⁠‍‍​‍​‍‌⁠​‍‌‍‌‌‌⁠​​‌‍⁠​‌⁠‍‌​‍​‍​‍⁠​​‍​‍‌‍‍‌‌‍‌​​‍​‍​⁠‍‍​⁠‍​​⁠‌‍​⁠‍‌​⁠‌‌​‍⁠​​‍​‍‌‍‌​​‍​‍​⁠‍‍​‍​‍​⁠​‍​⁠​​​⁠​‍​⁠‌‍​⁠​​​⁠​‌​⁠​‍​⁠​‌​‍​‍​‍⁠​​‍​‍‌‍‍​​‍​‍​⁠‍‍​‍​‍‌​​‌​⁠​‍‌‌​​​⁠​‌‌​⁠​​⁠‌​​⁠‌‍‌​​‍​‍⁠‌‌⁠‍​‌‌‌​‌⁠‌⁠‌​⁠‌‌⁠‍‌​⁠​‍‌‍​‍​‍​‍‌⁠⁠‌

Quick fix that saved me: set the Figma file to “View > Color space > sRGB” so your OKLCH preview matches the sRGB target, then export tokens as OKLCH and let Style Dictionary handle the single conversion; adding a P3+SRGB dual build from the same OKLCH source nearly killed the about 240° blue drift. @harris78 did you also see Figma’s P3 workspace exaggerate the shift?

‌⁠‍⁠​‍​‍‌⁠‌​​‍​‍​⁠‍‍​‍​‍‌‍‌⁠‌‍‌⁠‌‍‌​‌‍‍‍​‍​‍​‍⁠​​‍​‍‌‍‍⁠​‍​‍​⁠‍‍​‍​‍‌⁠​‍‌‍‌‌‌⁠​​‌‍⁠​‌⁠‍‌​‍​‍​‍⁠​​‍​‍‌‍‍‌‌‍‌​​‍​‍​⁠‍‍​⁠‍​​⁠‌‍​⁠‍‌​⁠‌‌​‍⁠​​‍​‍‌‍‌​​‍​‍​⁠‍‍​‍​‍​⁠​‍​⁠​​​⁠​‍​⁠‌‍​⁠​​​⁠​‌​⁠​‍​⁠​⁠​‍​‍​‍⁠​​‍​‍‌‍‍​​‍​‍​⁠‍‍​‍​‍​‍⁠‌‌​‍⁠‌​​⁠‌​⁠‍‌‍​‌‌⁠‍​​⁠‌‌‌‍⁠⁠​⁠‌​‌⁠​⁠‌⁠‌⁠‌‌‍‍‌⁠​‍​⁠‌‌‌‍‌‍‌⁠‍​​‍​‍‌⁠⁠‌