Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

color returned by the oklch() function does not match input color space CSS #332

Open
shipurjan opened this issue Mar 11, 2024 · 0 comments

Comments

@shipurjan
Copy link

shipurjan commented Mar 11, 2024

I'm not sure if it's actually a problem, maybe they can't be converted between each other perfectly, but I'm adding this issue just in case

Problem:

In CSS a color like #ef4444 (HEX) or rgb(239 68 68) (RGB) does not produce the same perceived color converted to OKLCH with function chroma('#ef4444').oklch().

Demo:

https://codesandbox.io/p/sandbox/oklch-hsl-rgb-color-space-comparison-c6gtyn?file=%2Fsrc%2FApp.tsx

To see the color output from the function as it is converted from the oklch() function: remove line 281 from the demo above

// boost C value a little bit, since chroma-js doesn't convert hex to oklch exactly 1-to-1
if (i === 1) return n * 100 + (n === 0 ? 0 : 39);

Currently it's boosted by 39 to match the hex color more closely, but originally it doesn't match

@shipurjan shipurjan changed the title color returned by the oklch() function does not match CSS color returned by the oklch() function does not match input color space CSS Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant