Fix: Set neutral, zinc, and stone color palettes to use 'none' for Hue in OKLCH

[nmurrell07]

Summary

This PR fixes the Abney Effect and hue-shifting issue when mixing neutral colors with other colors using color-mix() in OKLCH space.

Problem

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, zinc, and stone 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.

Solution

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.

Changes

• Updated neutral palette: Changed all colors from oklch(X% 0 0) to oklch(X% none none)
• Updated zinc palette: Changed all colors from oklch(X% 0 0) to oklch(X% none none)
• Updated stone palette: Changed all colors from oklch(X% 0 0) to oklch(X% none none)

Test Plan

• Verify that color-mix(in oklch, green-700, neutral-700) now produces a desaturated dark green instead of a yellowish color
• Verify that existing color-mix operations with neutral colors work as expected
• Run existing tests to ensure no regressions

Fixes #19830

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 44debef4-608e-4b67-95ca-cedc27832510

📥 Commits

Reviewing files that changed from the base of the PR and between 17d324f and a0f7788.

📒 Files selected for processing (1)

• packages/tailwindcss/src/compat/colors.ts

---

Walkthrough

The change updates color definitions in the Tailwind CSS compatibility module by modifying the oklch color format for specific color palettes. The zinc and mauve palettes are updated at the '50' color stop, while the neutral palette is updated across multiple stops from '50' through '950'. In each case, zero values for chroma and hue parameters in the oklch format are replaced with the none keyword. The overall structure and control flow of the file remain unchanged.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: updating neutral, zinc, and stone color palettes to use 'none' for Hue in OKLCH format.
Description check	✅ Passed	The description comprehensively explains the problem (Abney Effect with color-mix), the solution (using 'none' for hue), the specific changes made, and includes a test plan with references to the linked issue.
Linked Issues check	✅ Passed	The PR fully addresses the linked issue #19830 by changing neutral, zinc, and stone palettes from oklch(X% 0 0) to oklch(X% none none) to prevent hue shifting during color-mix operations.
Out of Scope Changes check	✅ Passed	All changes in the PR are directly related to the linked issue objective. The modifications are limited to updating the OKLCH color definitions in the compat colors file for the three specified palettes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can customize the tone of the review comments and chat replies.

Configure the tone_instructions setting to customize the tone of the review comments and chat replies. For example, you can set the tone to Act like a strict teacher, Act like a pirate and more.