Add OKLAB and OKLCH to color-picker

[V1OL3TF0X]

Addresses @2439

📝 Description

This PR adds two new modes to the color-picker: oklch and oklab. I also needed to fix a bit of the logic, so switching between modes worked properly. A also tried to update the examples to the best of my abilities

⛳️ Current behavior (updates)

• color pikcer has 3 modes: RGBA, HSLA and HSBA

🚀 New behavior

• color-picker has 2 new modes - OKLAB and OKLCH.
• examples are updated to see effects of switching modes, as well as show all channels of the current mode under area picker
• switching the mode doesn't break the UI

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

If anything falls outside contribution guidelines, please let me know - I tried to follow the code style to the best of my abilities, but some things may have slipped through.

As parsing oklab and oklch has some complicated math involved, I opted to add culori/js to take care of that

[changeset-bot]

⚠️ No Changeset found

Latest commit: 59a2b38

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
zag-nextjs	✅ Ready (Inspect)	Visit Preview	May 13, 2025 9:18pm
zag-solid	✅ Ready (Inspect)	Visit Preview	May 13, 2025 9:18pm
zag-svelte	✅ Ready (Inspect)	Visit Preview	May 13, 2025 9:18pm
zag-vue	✅ Ready (Inspect)	Visit Preview	May 13, 2025 9:18pm
zag-website	✅ Ready (Inspect)	Visit Preview	May 13, 2025 9:18pm

[segunadebayo]

@V1OL3TF0X thanks for this PR. Love the direction.

Could we do this without an additional dependency? We want to keep the bundle size roughly similar

[V1OL3TF0X]

@V1OL3TF0X thanks for this PR. Love the direction.

Could we do this without an additional dependency? We want to keep the bundle size roughly similar

@segunadebayo Done - I leaned out the dependency as much as possible. This has the downside of not clamping by chroma but by RGB (less accurate, but I'm not smart enough to translate clampChroma from culori). I decided to keep the conversion functions, since rewriting them wouldn't impact the bundle size as they're dependency free, and could only lead to some mistakes during the process. (they're all pure functions, so the bundle size will be literally identical)

I also updated the docs a bit, to include the new modes

[V1OL3TF0X]

@segunadebayo what's the status on this? Should I add the version bump, is the docs update good? If not, what's there to change?

[segunadebayo]

@V1OL3TF0X I'm going to review the code slowly for the next week or so.

Thanks again for working on this

[Hugos68]

@segunadebayo What's the status on this? We really want to use the Color picker but OKLCH support is a must for us.

[V1OL3TF0X]

@segunadebayo How's the review process going?

[V1OL3TF0X]

@segunadebayo any updates on this?