A few questions about OKLCH color.

[dufu1991]

The v4 version uses OKLCH color mode by default, and I've noticed that the HEX colors in the documentation don't seem to correspond correctly to OKLCH.

For example, for the color value red-500, the colors in the documentation are #ef4444 and oklch (0.637 0.237 25.331), using Chrome, version 133.0.6943.142 (official) (arm64), and using the developer tools to see the hex value for this color, which is #fb2c36, which does not match the #ef4444 shown in the documentation? does not match the #ef4444 shown in the documentation?

In addition, I used https://oklch.com/ to calculate hex and OKLCH, and found that the document is not accurate, I don't know how the tailwindcss.com site's algorithm for converting this color is, and I don't know what the problem is, which calculation is needed to take precedence?

I don't know if it's related to the monitor or not. To add, the device I'm using is a M4 MacBook Pro, and the macOS default color mode is this one, System Settings - Displays.

[philipp-spiess]

Hey! Yeah the hex colors used in the docs are from the old Tailwind CSS v3 theme that we based the new oklch color theme off. You're right that in some cases the difference is quite stark: https://play.tailwindcss.com/QblKOPbQRY so probably want to do something else here. We did this because we wanted to avoid pulling in a color manipulation library just for this but maybe we can precompute the closest hex colors for all color values somehow that match more closely.

Note though that it's recommended to use the oklch(…) values anyways since oklch(…) to hex is a lossy conversion, since the hex color space is narrower.