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]

🦋 Changeset detected

Latest commit: ce79247

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 85 packages

Name	Type
@zag-js/color-picker	Minor
@zag-js/anatomy-icons	Minor
@zag-js/anatomy	Minor
@zag-js/core	Minor
@zag-js/docs	Minor
@zag-js/preact	Minor
@zag-js/react	Minor
@zag-js/solid	Minor
@zag-js/svelte	Minor
@zag-js/vanilla	Minor
@zag-js/vue	Minor
@zag-js/accordion	Minor
@zag-js/angle-slider	Minor
@zag-js/async-list	Minor
@zag-js/avatar	Minor
@zag-js/carousel	Minor
@zag-js/cascade-select	Minor
@zag-js/checkbox	Minor
@zag-js/clipboard	Minor
@zag-js/collapsible	Minor
@zag-js/combobox	Minor
@zag-js/date-input	Minor
@zag-js/date-picker	Minor
@zag-js/dialog	Minor
@zag-js/drawer	Minor
@zag-js/editable	Minor
@zag-js/file-upload	Minor
@zag-js/floating-panel	Minor
@zag-js/hover-card	Minor
@zag-js/image-cropper	Minor
@zag-js/listbox	Minor
@zag-js/marquee	Minor
@zag-js/menu	Minor
@zag-js/navigation-menu	Minor
@zag-js/number-input	Minor
@zag-js/pagination	Minor
@zag-js/password-input	Minor
@zag-js/pin-input	Minor
@zag-js/popover	Minor
@zag-js/presence	Minor
@zag-js/progress	Minor
@zag-js/qr-code	Minor
@zag-js/radio-group	Minor
@zag-js/rating-group	Minor
@zag-js/scroll-area	Minor
@zag-js/select	Minor
@zag-js/signature-pad	Minor
@zag-js/slider	Minor
@zag-js/splitter	Minor
@zag-js/steps	Minor
@zag-js/switch	Minor
@zag-js/tabs	Minor
@zag-js/tags-input	Minor
@zag-js/timer	Minor
@zag-js/toast	Minor
@zag-js/toggle-group	Minor
@zag-js/toggle	Minor
@zag-js/tooltip	Minor
@zag-js/tour	Minor
@zag-js/tree-view	Minor
@zag-js/store	Minor
@zag-js/types	Minor
@zag-js/aria-hidden	Minor
@zag-js/auto-resize	Minor
@zag-js/collection	Minor
@zag-js/color-utils	Minor
@zag-js/utils	Minor
@zag-js/date-utils	Minor
@zag-js/dismissable	Minor
@zag-js/dom-query	Minor
@zag-js/file-utils	Minor
@zag-js/focus-trap	Minor
@zag-js/focus-visible	Minor
@zag-js/highlight-word	Minor
@zag-js/hotkeys	Minor
@zag-js/i18n-utils	Minor
@zag-js/interact-outside	Minor
@zag-js/json-tree-utils	Minor
@zag-js/live-region	Minor
@zag-js/popper	Minor
@zag-js/rect-utils	Minor
@zag-js/remove-scroll	Minor
@zag-js/scroll-snap	Minor
@zag-js/stringify-state	Minor
svelte-kit-starter	Patch

Not sure what this means? Click here to learn what changesets are.

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
zag-nextjs	Error		Mar 4, 2026 11:53am
zag-solid	Ready	Preview	Mar 4, 2026 11:53am
zag-svelte	Ready	Preview	Mar 4, 2026 11:53am
zag-vue	Ready	Preview	Mar 4, 2026 11:53am
zag-website	Ready	Preview	Mar 4, 2026 11:53am

[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