v4.2 Neutral color in color palettes should use none for Hue in OKLCH to prevent Abney Effect and hue-shifting in color-mix()

[StevenLZH]

What version of Tailwind CSS are you using?

v4.2.1

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 15.1.7, Vite 6.1.0

What version of Node.js are you using?

v20.0.0

What browser are you using?

Chrome, Edge, Firefox

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/IjMcrIzxwk

Describe your issue

Unexpected hue shifting (turning yellow) when mixing Green and Neutral colors using color-mix in OKLCH space.

When mixing a themed green color (e.g., green-700) with a neutral color (e.g., neutral-700) using the CSS color-mix(in oklch, ...) function, the resulting color unexpectedly shifts toward yellow instead of becoming a desaturated dark green.

This happens because Tailwind's default neutral palettes define their OKLCH hue as 0 (which represents the Red/Magenta axis in OKLCH) instead of none. When performing a linear interpolation in a color-mix:

• green-700 (Hue ≈ 150)
• neutral-700 (Hue = 0)
• Result: The browser calculates the average hue: $(150 + 0) / 2 = 75$, which is exactly the Yellow hue range.

Neutral colors in OKLCH should have their Hue component set to none (powerless). This ensures that when mixed with other colors, the hue of the non-neutral color is preserved, resulting in a natural desaturation rather than a hue shift to yellow.