[BUG] animation fails when transitioning between oklch and hex color formats

[davbrito]

Description:

I'm experiencing an issue when trying to animate the backgroundColor, specifically when animating between colors defined in different formats: oklch and #hex. The animation fails, and I receive a console warning when transitioning.

Example Snippet:

    <motion.div
      animate={{
        backgroundColor: isActive ? "oklch(0.65 0.18 260)" : "#ffffff",
      }}
    />

Console Warning:

'oklch(0.65 0.18 260)' is not an animatable color. Use the equivalent color code instead.

CodeSandbox:

https://codesandbox.io/p/devbox/small-http-j8rxt3

Steps to reproduce

Steps to reproduce the behavior:

1. Go to the CodeSandbox
2. Click on 'Toggle color'
3. Observe that the background color animation fails, and the console warning appears.

Expected behavior

The backgroundColor should smoothly animate between the oklch color and the hex color.

In my real use case, the oklch color comes from a CSS variable defined by Tailwindcss V4.

Environment details

motion version: [email protected]
Browser: Google Chrome 133.0.6943.53