diff --git a/examples/next-ts/hooks/use-controls.tsx b/examples/next-ts/hooks/use-controls.tsx
index 2676abb246..df447ee6ee 100644
--- a/examples/next-ts/hooks/use-controls.tsx
+++ b/examples/next-ts/hooks/use-controls.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-onchange */
 import { ControlRecord, deepGet, deepSet, getControlDefaults } from "@zag-js/shared"
 import { useState } from "react"
 
@@ -18,7 +17,7 @@ export function useControls<T extends ControlRecord>(config: T) {
     ui: () => (
       <div className="controls-container">
         {Object.keys(config).map((key) => {
-          const { type, label = key, options, placeholder, min, max } = (config[key] ?? {}) as any
+          const { type, label = key, options, placeholder, min, max, forceValue } = (config[key] ?? {}) as any
           const value = deepGet(state, key)
           switch (type) {
             case "boolean":
@@ -67,7 +66,7 @@ export function useControls<T extends ControlRecord>(config: T) {
                       setState(key, e.target.value)
                     }}
                   >
-                    <option>-----</option>
+                    {!forceValue && <option>-----</option>}
                     {options.map((option) => (
                       <option key={option} value={option}>
                         {option}
diff --git a/examples/next-ts/pages/color-picker.tsx b/examples/next-ts/pages/color-picker.tsx
index 44f30afed6..3bf48304b9 100644
--- a/examples/next-ts/pages/color-picker.tsx
+++ b/examples/next-ts/pages/color-picker.tsx
@@ -3,7 +3,6 @@ import { normalizeProps, useMachine } from "@zag-js/react"
 import { colorPickerControls } from "@zag-js/shared"
 import serialize from "form-serialize"
 import { useId } from "react"
-import { Show } from "../components/show"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
@@ -30,13 +29,10 @@ export default function Page() {
   const service = useMachine(colorPicker.machine, {
     id: useId(),
     name: "color",
-    format: "hsla",
     defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
     ...controls.context,
   })
-
   const api = colorPicker.connect(service, normalizeProps)
-
   return (
     <>
       <main className="color-picker">
@@ -67,11 +63,70 @@ export default function Page() {
                     <div {...api.getAreaBackgroundProps()} />
                     <div {...api.getAreaThumbProps()} />
                   </div>
-
-                  <div {...api.getChannelSliderProps({ channel: "hue" })}>
-                    <div {...api.getChannelSliderTrackProps({ channel: "hue" })} />
-                    <div {...api.getChannelSliderThumbProps({ channel: "hue" })} />
-                  </div>
+                  {api.format.startsWith("rgb") && (
+                    <>
+                      <div {...api.getChannelSliderProps({ channel: "red" })}>
+                        <div {...api.getChannelSliderTrackProps({ channel: "red" })} />
+                        <div {...api.getChannelSliderThumbProps({ channel: "red" })} />
+                      </div>
+                      <div {...api.getChannelSliderProps({ channel: "green" })}>
+                        <div {...api.getChannelSliderTrackProps({ channel: "green" })} />
+                        <div {...api.getChannelSliderThumbProps({ channel: "green" })} />
+                      </div>
+                      <div {...api.getChannelSliderProps({ channel: "blue" })}>
+                        <div {...api.getChannelSliderTrackProps({ channel: "blue" })} />
+                        <div {...api.getChannelSliderThumbProps({ channel: "blue" })} />
+                      </div>
+                    </>
+                  )}
+                  {api.format.startsWith("okl") && (
+                    <div {...api.getChannelSliderProps({ channel: "lightness" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "lightness" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "lightness" })} />
+                    </div>
+                  )}
+                  {api.format === "oklab" && (
+                    <>
+                      <div {...api.getChannelSliderProps({ channel: "a" })}>
+                        <div {...api.getChannelSliderTrackProps({ channel: "a" })} />
+                        <div {...api.getChannelSliderThumbProps({ channel: "a" })} />
+                      </div>
+                      <div {...api.getChannelSliderProps({ channel: "b" })}>
+                        <div {...api.getChannelSliderTrackProps({ channel: "b" })} />
+                        <div {...api.getChannelSliderThumbProps({ channel: "b" })} />
+                      </div>
+                    </>
+                  )}
+                  {api.format === "oklch" && (
+                    <div {...api.getChannelSliderProps({ channel: "chroma" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "chroma" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "chroma" })} />
+                    </div>
+                  )}
+                  {api.format !== "rgba" && api.format !== "oklab" && (
+                    <div {...api.getChannelSliderProps({ channel: "hue" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "hue" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "hue" })} />
+                    </div>
+                  )}
+                  {api.format.includes("s") && (
+                    <div {...api.getChannelSliderProps({ channel: "saturation" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "saturation" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "saturation" })} />
+                    </div>
+                  )}
+                  {api.format.startsWith("hsl") && (
+                    <div {...api.getChannelSliderProps({ channel: "lightness" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "lightness" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "lightness" })} />
+                    </div>
+                  )}
+                  {api.format.startsWith("hsb") && (
+                    <div {...api.getChannelSliderProps({ channel: "brightness" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "brightness" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "brightness" })} />
+                    </div>
+                  )}
 
                   <div {...api.getChannelSliderProps({ channel: "alpha" })}>
                     <div {...api.getTransparencyGridProps({ size: "12px" })} />
@@ -79,32 +134,48 @@ export default function Page() {
                     <div {...api.getChannelSliderThumbProps({ channel: "alpha" })} />
                   </div>
 
-                  <Show when={api.format.startsWith("hsl")}>
+                  {api.format.startsWith("hsl") && (
                     <div style={{ display: "flex", width: "100%" }}>
                       <span>H</span> <input {...api.getChannelInputProps({ channel: "hue" })} />
                       <span>S</span> <input {...api.getChannelInputProps({ channel: "saturation" })} />
                       <span>L</span> <input {...api.getChannelInputProps({ channel: "lightness" })} />
                       <span>A</span> <input {...api.getChannelInputProps({ channel: "alpha" })} />
                     </div>
-                  </Show>
+                  )}
 
-                  <Show when={api.format.startsWith("rgb")}>
+                  {api.format.startsWith("rgb") && (
                     <div style={{ display: "flex", width: "100%" }}>
                       <span>R</span> <input {...api.getChannelInputProps({ channel: "red" })} />
                       <span>G</span> <input {...api.getChannelInputProps({ channel: "green" })} />
                       <span>B</span> <input {...api.getChannelInputProps({ channel: "blue" })} />
                       <span>A</span> <input {...api.getChannelInputProps({ channel: "alpha" })} />
                     </div>
-                  </Show>
+                  )}
 
-                  <Show when={api.format.startsWith("hsb")}>
+                  {api.format.startsWith("hsb") && (
                     <div style={{ display: "flex", width: "100%" }}>
                       <span>H</span> <input {...api.getChannelInputProps({ channel: "hue" })} />
                       <span>S</span> <input {...api.getChannelInputProps({ channel: "saturation" })} />
                       <span>B</span> <input {...api.getChannelInputProps({ channel: "brightness" })} />
                       <span>A</span> <input {...api.getChannelInputProps({ channel: "alpha" })} />
                     </div>
-                  </Show>
+                  )}
+                  {api.format === "oklab" && (
+                    <div style={{ display: "flex", width: "100%" }}>
+                      <span>L</span> <input {...api.getChannelInputProps({ channel: "lightness" })} />
+                      <span>A</span> <input {...api.getChannelInputProps({ channel: "a" })} />
+                      <span>B</span> <input {...api.getChannelInputProps({ channel: "b" })} />
+                      <span>Alpha</span> <input {...api.getChannelInputProps({ channel: "alpha" })} />
+                    </div>
+                  )}
+                  {api.format === "oklch" && (
+                    <div style={{ display: "flex", width: "100%" }}>
+                      <span>L</span> <input {...api.getChannelInputProps({ channel: "lightness" })} />
+                      <span>C</span> <input {...api.getChannelInputProps({ channel: "chroma" })} />
+                      <span>H</span> <input {...api.getChannelInputProps({ channel: "hue" })} />
+                      <span>Alpha</span> <input {...api.getChannelInputProps({ channel: "alpha" })} />
+                    </div>
+                  )}
 
                   <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
                     <div style={{ position: "relative" }}>
diff --git a/examples/nuxt-ts/components/Controls.vue b/examples/nuxt-ts/components/Controls.vue
index 2daab13b14..27aacea14b 100644
--- a/examples/nuxt-ts/components/Controls.vue
+++ b/examples/nuxt-ts/components/Controls.vue
@@ -7,34 +7,23 @@ defineProps<{ control: any }>()
     <div v-for="(value, key) in control.config" :key="key">
       <template v-if="value.type === 'boolean'">
         <div class="checkbox">
-          <input
-            :data-testid="key"
-            :id="value.label || key"
-            type="checkbox"
-            :checked="control.getState(key)"
-            @input="
-              (e) => {
-                control.setState(key, (e.target as HTMLInputElement).checked)
-              }
-            "
-          />
+          <input :data-testid="key" :id="value.label || key" type="checkbox" :checked="control.getState(key)" @input="
+            (e) => {
+              control.setState(key, (e.target as HTMLInputElement).checked)
+            }
+          " />
           <label :for="value.label || key">{{ value.label || key }}</label>
         </div>
       </template>
       <template v-if="value.type === 'string'">
         <div class="text">
           <label style="margin-right: 10px">{{ value.label || key }}</label>
-          <input
-            :data-testid="key"
-            type="text"
-            :placeholder="value.placeholder"
-            :value="control.getState(key)"
+          <input :data-testid="key" type="text" :placeholder="value.placeholder" :value="control.getState(key)"
             @keydown.enter="
               (event) => {
                 control.setState(key, (event.target as HTMLInputElement).value)
               }
-            "
-          />
+            " />
         </div>
       </template>
       <template v-if="value.type === 'select'">
@@ -42,23 +31,14 @@ defineProps<{ control: any }>()
           <label :for="value.label || key" style="margin-right: 10px">
             {{ value.label || key }}
           </label>
-          <select
-            :data-testid="key"
-            :id="value.label || key"
-            :value="control.getState(key)"
-            @change="
-              (e) => {
-                control.setState(key, (e.target as HTMLSelectElement).value)
-              }
-            "
-          >
-            <option>-----</option>
-            <option
-              v-for="option in value.options"
-              :key="option"
-              :value="option"
-              :selected="control.getState(key) === option"
-            >
+          <select :data-testid="key" :id="value.label || key" :value="control.getState(key)" @change="
+            (e) => {
+              control.setState(key, (e.target as HTMLSelectElement).value)
+            }
+          ">
+            <option v-if="!value.forceValue">-----</option>
+            <option v-for="option in value.options" :key="option" :value="option"
+              :selected="control.getState(key) === option">
               {{ option }}
             </option>
           </select>
@@ -69,20 +49,13 @@ defineProps<{ control: any }>()
           <label :for="value.label || key" style="margin-right: 10px">
             {{ value.label || key }}
           </label>
-          <input
-            :data-testid="key"
-            :id="value.label || key"
-            type="number"
-            :min="value.min"
-            :max="value.max"
-            :value="control.getState(key)"
-            @keydown.enter="
+          <input :data-testid="key" :id="value.label || key" type="number" :min="value.min" :max="value.max"
+            :value="control.getState(key)" @keydown.enter="
               (e) => {
                 const val = parseFloat((e.target as HTMLInputElement).value)
                 control.setState(key, isNaN(val) ? 0 : val)
               }
-            "
-          />
+            " />
         </div>
       </template>
     </div>
diff --git a/examples/nuxt-ts/pages/color-picker.vue b/examples/nuxt-ts/pages/color-picker.vue
index af169f0e99..4c6332e83b 100644
--- a/examples/nuxt-ts/pages/color-picker.vue
+++ b/examples/nuxt-ts/pages/color-picker.vue
@@ -11,7 +11,6 @@ const service = useMachine(
   controls.mergeProps<colorPicker.Props>({
     id: useId(),
     name: "color",
-    defaultFormat: "hsla",
     defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
   }),
 )
@@ -23,14 +22,12 @@ const presets = ["#f47373", "#697689"]
 
 <template>
   <main class="color-picker">
-    <form
-      @change="
-        (e) => {
-          const result = serialize(e.currentTarget as HTMLFormElement, { hash: true })
-          console.log(result)
-        }
-      "
-    >
+    <form @change="
+      (e) => {
+        const result = serialize(e.currentTarget as HTMLFormElement, { hash: true })
+        console.log(result)
+      }
+    ">
       <input v-bind="api.getHiddenInputProps()" />
       <div v-bind="api.getRootProps()">
         <label v-bind="api.getLabelProps()">
@@ -53,11 +50,57 @@ const presets = ["#f47373", "#697689"]
               <div v-bind="api.getAreaBackgroundProps()" />
               <div v-bind="api.getAreaThumbProps()" />
             </div>
+            <template v-if="api.format.startsWith('rgb')">
+              <div v-bind="api.getChannelSliderProps({ channel: 'red' })">
+                <div v-bind="api.getChannelSliderTrackProps({ channel: 'red' })" />
+                <div v-bind="api.getChannelSliderThumbProps({ channel: 'red' })" />
+              </div>
+              <div v-bind="api.getChannelSliderProps({ channel: 'green' })">
+                <div v-bind="api.getChannelSliderTrackProps({ channel: 'green' })" />
+                <div v-bind="api.getChannelSliderThumbProps({ channel: 'green' })" />
+              </div>
+              <div v-bind="api.getChannelSliderProps({ channel: 'blue' })">
+                <div v-bind="api.getChannelSliderTrackProps({ channel: 'blue' })" />
+                <div v-bind="api.getChannelSliderThumbProps({ channel: 'blue' })" />
+              </div>
+            </template>
+            <div v-if="api.format.startsWith('okl')" v-bind="api.getChannelSliderProps({ channel: 'lightness' })">
+              <div v-bind="api.getChannelSliderTrackProps({ channel: 'lightness' })" />
+              <div v-bind="api.getChannelSliderThumbProps({ channel: 'lightness' })" />
+            </div>
 
-            <div v-bind="api.getChannelSliderProps({ channel: 'hue' })">
+            <template v-if="api.format === 'oklab'">
+              <div v-bind="api.getChannelSliderProps({ channel: 'a' })">
+                <div v-bind="api.getChannelSliderTrackProps({ channel: 'a' })" />
+                <div v-bind="api.getChannelSliderThumbProps({ channel: 'a' })" />
+              </div>
+              <div v-bind="api.getChannelSliderProps({ channel: 'b' })">
+                <div v-bind="api.getChannelSliderTrackProps({ channel: 'b' })" />
+                <div v-bind="api.getChannelSliderThumbProps({ channel: 'b' })" />
+              </div>
+            </template>
+
+            <div v-if="api.format === 'oklch'" v-bind="api.getChannelSliderProps({ channel: 'chroma' })">
+              <div v-bind="api.getChannelSliderTrackProps({ channel: 'chroma' })" />
+              <div v-bind="api.getChannelSliderThumbProps({ channel: 'chroma' })" />
+            </div>
+            <div v-if="api.format !== 'oklab' && api.format !== 'rgba'"
+              v-bind="api.getChannelSliderProps({ channel: 'hue' })">
               <div v-bind="api.getChannelSliderTrackProps({ channel: 'hue' })" />
               <div v-bind="api.getChannelSliderThumbProps({ channel: 'hue' })" />
             </div>
+            <div v-if="api.format.includes('s')" v-bind="api.getChannelSliderProps({ channel: 'saturation' })">
+              <div v-bind="api.getChannelSliderTrackProps({ channel: 'saturation' })" />
+              <div v-bind="api.getChannelSliderThumbProps({ channel: 'saturation' })" />
+            </div>
+            <div v-if="api.format.startsWith('hsl')" v-bind="api.getChannelSliderProps({ channel: 'lightness' })">
+              <div v-bind="api.getChannelSliderTrackProps({ channel: 'lightness' })" />
+              <div v-bind="api.getChannelSliderThumbProps({ channel: 'lightness' })" />
+            </div>
+            <div v-if="api.format.startsWith('hsb')" v-bind="api.getChannelSliderProps({ channel: 'brightness' })">
+              <div v-bind="api.getChannelSliderTrackProps({ channel: 'brightness' })" />
+              <div v-bind="api.getChannelSliderThumbProps({ channel: 'brightness' })" />
+            </div>
 
             <div v-bind="api.getChannelSliderProps({ channel: 'alpha' })">
               <div v-bind="api.getTransparencyGridProps({ size: '12px' })" />
@@ -66,26 +109,35 @@ const presets = ["#f47373", "#697689"]
             </div>
 
             <div v-if="api.format.startsWith('hsl')" style="display: flex; width: 100%">
-              <span>H</span> <input v-bind="api.getChannelInputProps({ channel: 'hue' })" /> <span>S</span>
-              <input v-bind="api.getChannelInputProps({ channel: 'saturation' })" /> <span>L</span>
-              <input v-bind="api.getChannelInputProps({ channel: 'lightness' })" /> <span>A</span>
-              <input v-bind="api.getChannelInputProps({ channel: 'alpha' })" />
+              <span>H</span> <input v-bind="api.getChannelInputProps({ channel: 'hue' })" />
+              <span>S</span> <input v-bind="api.getChannelInputProps({ channel: 'saturation' })" />
+              <span>L</span> <input v-bind="api.getChannelInputProps({ channel: 'lightness' })" />
+              <span>A</span> <input v-bind="api.getChannelInputProps({ channel: 'alpha' })" />
             </div>
-
             <div v-if="api.format.startsWith('rgb')" style="display: flex; width: 100%">
-              <span>R</span> <input v-bind="api.getChannelInputProps({ channel: 'red' })" /> <span>G</span>
-              <input v-bind="api.getChannelInputProps({ channel: 'green' })" /> <span>B</span>
-              <input v-bind="api.getChannelInputProps({ channel: 'blue' })" /> <span>A</span>
-              <input v-bind="api.getChannelInputProps({ channel: 'alpha' })" />
+              <span>R</span> <input v-bind="api.getChannelInputProps({ channel: 'red' })" />
+              <span>G</span> <input v-bind="api.getChannelInputProps({ channel: 'green' })" />
+              <span>B</span> <input v-bind="api.getChannelInputProps({ channel: 'blue' })" />
+              <span>A</span> <input v-bind="api.getChannelInputProps({ channel: 'alpha' })" />
             </div>
-
             <div v-if="api.format.startsWith('hsb')" style="display: flex; width: 100%">
-              <span>H</span> <input v-bind="api.getChannelInputProps({ channel: 'hue' })" /> <span>S</span>
-              <input v-bind="api.getChannelInputProps({ channel: 'saturation' })" /> <span>B</span>
-              <input v-bind="api.getChannelInputProps({ channel: 'brightness' })" /> <span>A</span>
-              <input v-bind="api.getChannelInputProps({ channel: 'alpha' })" />
+              <span>H</span> <input v-bind="api.getChannelInputProps({ channel: 'hue' })" />
+              <span>S</span> <input v-bind="api.getChannelInputProps({ channel: 'saturation' })" />
+              <span>B</span> <input v-bind="api.getChannelInputProps({ channel: 'brightness' })" />
+              <span>A</span> <input v-bind="api.getChannelInputProps({ channel: 'alpha' })" />
+            </div>
+            <div v-if="api.format === 'oklab'" style="display: flex; width: 100%">
+              <span>L</span> <input v-bind="api.getChannelInputProps({ channel: 'lightness' })" />
+              <span>A</span> <input v-bind="api.getChannelInputProps({ channel: 'a' })" />
+              <span>B</span> <input v-bind="api.getChannelInputProps({ channel: 'b' })" />
+              <span>Alpha</span> <input v-bind="api.getChannelInputProps({ channel: 'alpha' })" />
+            </div>
+            <div v-if="api.format === 'oklch'" style="display: flex; width: 100%">
+              <span>L</span> <input v-bind="api.getChannelInputProps({ channel: 'lightness' })" />
+              <span>A</span> <input v-bind="api.getChannelInputProps({ channel: 'chroma' })" />
+              <span>B</span> <input v-bind="api.getChannelInputProps({ channel: 'hue' })" />
+              <span>Alpha</span> <input v-bind="api.getChannelInputProps({ channel: 'alpha' })" />
             </div>
-
             <div style="display: flex; gap: 10px; align-items: center">
               <div style="position: relative">
                 <div v-bind="api.getTransparencyGridProps({ size: '4px' })" />
diff --git a/examples/solid-ts/src/components/controls.tsx b/examples/solid-ts/src/components/controls.tsx
index d8a856200a..7fcf85090c 100644
--- a/examples/solid-ts/src/components/controls.tsx
+++ b/examples/solid-ts/src/components/controls.tsx
@@ -1,5 +1,5 @@
 import { deepGet } from "@zag-js/shared"
-import { For, createMemo } from "solid-js"
+import { For, Show, createMemo } from "solid-js"
 import type { UseControlsReturn } from "~/hooks/use-controls"
 
 export function Controls({ store }: { store: UseControlsReturn }) {
@@ -7,9 +7,9 @@ export function Controls({ store }: { store: UseControlsReturn }) {
   const items = createMemo(() => {
     const keys = Object.keys(store.config)
     return keys.map((key) => {
-      const { type, label = key, options, placeholder, min, max } = (config[key] ?? {}) as any
+      const { type, label = key, options, placeholder, min, max, forceValue } = (config[key] ?? {}) as any
       const value = createMemo(() => deepGet(state(), key))
-      return { key, type, label, options, placeholder, min, max, value }
+      return { key, type, label, options, placeholder, min, max, value, forceValue }
     })
   })
 
@@ -64,7 +64,9 @@ export function Controls({ store }: { store: UseControlsReturn }) {
                       setState(item.key, e.currentTarget.value)
                     }}
                   >
-                    <option>-----</option>
+                    <Show when={!item.forceValue}>
+                      <option>-----</option>
+                    </Show>
                     <For each={item.options as any[]}>{(option) => <option value={option}>{option}</option>}</For>
                   </select>
                 </div>
diff --git a/examples/solid-ts/src/routes/color-picker.tsx b/examples/solid-ts/src/routes/color-picker.tsx
index 15be6c09a8..1ac03823a2 100644
--- a/examples/solid-ts/src/routes/color-picker.tsx
+++ b/examples/solid-ts/src/routes/color-picker.tsx
@@ -31,13 +31,12 @@ export default function Page() {
     controls.mergeProps<colorPicker.Props>({
       id: createUniqueId(),
       name: "color",
-      defaultFormat: "hsla",
       defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
     }),
   )
 
   const api = createMemo(() => colorPicker.connect(service, normalizeProps))
-
+  const format = createMemo(() => api().format)
   return (
     <>
       <main class="color-picker">
@@ -68,14 +67,67 @@ export default function Page() {
                     <div {...api().getAreaBackgroundProps()} />
                     <div {...api().getAreaThumbProps()} />
                   </div>
-
-                  <div {...api().getChannelSliderProps({ channel: "hue" })}>
-                    <div {...api().getChannelSliderTrackProps({ channel: "hue" })} />
-                    <div {...api().getChannelSliderThumbProps({ channel: "hue" })} />
-                  </div>
-
+                  <Show when={format().startsWith("rgb")}>
+                    <div {...api().getChannelSliderProps({ channel: "red" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "red" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "red" })} />
+                    </div>
+                    <div {...api().getChannelSliderProps({ channel: "green" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "green" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "green" })} />
+                    </div>
+                    <div {...api().getChannelSliderProps({ channel: "blue" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "blue" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "blue" })} />
+                    </div>
+                  </Show>
+                  <Show when={format().startsWith("okl")}>
+                    <div {...api().getChannelSliderProps({ channel: "lightness" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "lightness" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "lightness" })} />
+                    </div>
+                  </Show>
+                  <Show when={format() === "oklab"}>
+                    <div {...api().getChannelSliderProps({ channel: "a" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "a" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "a" })} />
+                    </div>
+                    <div {...api().getChannelSliderProps({ channel: "b" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "b" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "b" })} />
+                    </div>
+                  </Show>
+                  <Show when={format() === "oklch"}>
+                    <div {...api().getChannelSliderProps({ channel: "chroma" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "chroma" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "chroma" })} />
+                    </div>
+                  </Show>
+                  <Show when={format() !== "rgba" && format() !== "oklab"}>
+                    <div {...api().getChannelSliderProps({ channel: "hue" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "hue" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "hue" })} />
+                    </div>
+                  </Show>
+                  <Show when={format().includes("s")}>
+                    <div {...api().getChannelSliderProps({ channel: "saturation" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "saturation" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "saturation" })} />
+                    </div>
+                  </Show>
+                  <Show when={format().startsWith("hsl")}>
+                    <div {...api().getChannelSliderProps({ channel: "lightness" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "lightness" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "lightness" })} />
+                    </div>
+                  </Show>
+                  <Show when={format().startsWith("hsb")}>
+                    <div {...api().getChannelSliderProps({ channel: "brightness" })}>
+                      <div {...api().getChannelSliderTrackProps({ channel: "brightness" })} />
+                      <div {...api().getChannelSliderThumbProps({ channel: "brightness" })} />
+                    </div>
+                  </Show>
                   <div {...api().getChannelSliderProps({ channel: "alpha" })}>
-                    <div {...api().getTransparencyGridProps({ size: "12px" })} />
                     <div {...api().getChannelSliderTrackProps({ channel: "alpha" })} />
                     <div {...api().getChannelSliderThumbProps({ channel: "alpha" })} />
                   </div>
@@ -106,6 +158,22 @@ export default function Page() {
                       <span>A</span> <input {...api().getChannelInputProps({ channel: "alpha" })} />
                     </div>
                   </Show>
+                  <Show when={format() === "oklab"}>
+                    <div style={{ display: "flex", width: "100%" }}>
+                      <span>L</span> <input {...api().getChannelInputProps({ channel: "lightness" })} />
+                      <span>A</span> <input {...api().getChannelInputProps({ channel: "a" })} />
+                      <span>B</span> <input {...api().getChannelInputProps({ channel: "b" })} />
+                      <span>Alpha</span> <input {...api().getChannelInputProps({ channel: "alpha" })} />
+                    </div>
+                  </Show>
+                  <Show when={format() === "oklch"}>
+                    <div style={{ display: "flex", width: "100%" }}>
+                      <span>L</span> <input {...api().getChannelInputProps({ channel: "lightness" })} />
+                      <span>C</span> <input {...api().getChannelInputProps({ channel: "chroma" })} />
+                      <span>H</span> <input {...api().getChannelInputProps({ channel: "hue" })} />
+                      <span>Alpha</span> <input {...api().getChannelInputProps({ channel: "alpha" })} />
+                    </div>
+                  </Show>
 
                   <div style={{ display: "flex", gap: "10px", "align-items": "center" }}>
                     <div style={{ position: "relative" }}>
diff --git a/examples/svelte-ts/src/lib/components/controls.svelte b/examples/svelte-ts/src/lib/components/controls.svelte
index 14102bb6fd..91bc04d31e 100644
--- a/examples/svelte-ts/src/lib/components/controls.svelte
+++ b/examples/svelte-ts/src/lib/components/controls.svelte
@@ -7,7 +7,7 @@
 
 <div class="controls-container">
   {#each Object.keys(controls.config) as key}
-    {@const { type, label = key, options, placeholder, min, max } = (controls.config[key] ?? {}) as any}
+    {@const { type, label = key, options, placeholder, min, max, forceValue } = (controls.config[key] ?? {}) as any}
     {@const value = deepGet(controls.context, key)}
     {#if type === "boolean"}
       <div class="checkbox">
@@ -51,7 +51,7 @@
             controls.setContext(key, (e.target as HTMLInputElement).value)
           }}
         >
-          <option>-----</option>
+          {#if !forceValue}<option>-----</option>{/if}
           {#each options as option}
             <option value={option}>
               {option}
@@ -72,11 +72,11 @@
           {max}
           {value}
           onkeydown={(e) => {
-          if (e.key === "Enter") {
-            const val = parseFloat((e.target as HTMLInputElement).value)
-            controls.setContext(key, isNaN(val) ? 0 : val)
-          }
-        }}
+            if (e.key === "Enter") {
+              const val = parseFloat((e.target as HTMLInputElement).value)
+              controls.setContext(key, isNaN(val) ? 0 : val)
+            }
+          }}
         />
       </div>
     {:else if type === "number"}{/if}
diff --git a/examples/svelte-ts/src/routes/color-picker.svelte b/examples/svelte-ts/src/routes/color-picker.svelte
index 37da50653d..f0c9226877 100644
--- a/examples/svelte-ts/src/routes/color-picker.svelte
+++ b/examples/svelte-ts/src/routes/color-picker.svelte
@@ -12,12 +12,13 @@
   const controls = useControls(colorPickerControls)
 
   const id = $props.id()
-  const service = useMachine(colorPicker.machine, {
+  const machineProps = {
     id,
     name: "color",
-    format: "hsla",
     defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
-  })
+    ...controls.context,
+  }
+  const service = useMachine(colorPicker.machine, machineProps)
 
   const api = $derived(colorPicker.connect(service, normalizeProps))
 </script>
@@ -52,11 +53,67 @@
               <div {...api.getAreaBackgroundProps()}></div>
               <div {...api.getAreaThumbProps()}></div>
             </div>
+            {#if api.format.startsWith("rgb")}
+              <div {...api.getChannelSliderProps({ channel: "red" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "red" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "red" })}></div>
+              </div>
+              <div {...api.getChannelSliderProps({ channel: "green" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "green" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "green" })}></div>
+              </div>
+              <div {...api.getChannelSliderProps({ channel: "blue" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "blue" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "blue" })}></div>
+              </div>
+            {/if}
 
-            <div {...api.getChannelSliderProps({ channel: "hue" })}>
-              <div {...api.getChannelSliderTrackProps({ channel: "hue" })}></div>
-              <div {...api.getChannelSliderThumbProps({ channel: "hue" })}></div>
-            </div>
+            {#if api.format.startsWith("okl")}
+              <div {...api.getChannelSliderProps({ channel: "lightness" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "lightness" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "lightness" })}></div>
+              </div>
+            {/if}
+            {#if api.format === "oklab"}
+              <div {...api.getChannelSliderProps({ channel: "a" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "a" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "a" })}></div>
+              </div>
+              <div {...api.getChannelSliderProps({ channel: "b" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "b" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "b" })}></div>
+              </div>
+            {/if}
+            {#if api.format === "oklch"}
+              <div {...api.getChannelSliderProps({ channel: "chroma" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "chroma" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "chroma" })}></div>
+              </div>
+            {/if}
+            {#if api.format !== "rgba" && api.format !== "oklab"}
+              <div {...api.getChannelSliderProps({ channel: "hue" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "hue" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "hue" })}></div>
+              </div>
+            {/if}
+            {#if api.format.includes("s")}
+              <div {...api.getChannelSliderProps({ channel: "saturation" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "saturation" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "saturation" })}></div>
+              </div>
+            {/if}
+            {#if api.format.startsWith("hsl")}
+              <div {...api.getChannelSliderProps({ channel: "lightness" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "lightness" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "lightness" })}></div>
+              </div>
+            {/if}
+            {#if api.format.startsWith("hsb")}
+              <div {...api.getChannelSliderProps({ channel: "brightness" })}>
+                <div {...api.getChannelSliderTrackProps({ channel: "brightness" })}></div>
+                <div {...api.getChannelSliderThumbProps({ channel: "brightness" })}></div>
+              </div>
+            {/if}
 
             <div {...api.getChannelSliderProps({ channel: "alpha" })}>
               <div {...api.getTransparencyGridProps({ size: "12px" })}></div>
diff --git a/packages/machines/color-picker/src/color-picker.connect.ts b/packages/machines/color-picker/src/color-picker.connect.ts
index f91f85af34..52f832bdd2 100644
--- a/packages/machines/color-picker/src/color-picker.connect.ts
+++ b/packages/machines/color-picker/src/color-picker.connect.ts
@@ -23,8 +23,8 @@ export function connect<T extends PropTypes>(
 ): ColorPickerApi<T> {
   const { context, send, prop, computed, state, scope } = service
 
-  const value = context.get("value")
   const format = context.get("format")
+  const value = context.get("value").toFormat(format)
 
   const areaValue = computed("areaValue")
   const valueAsString = computed("valueAsString")
@@ -262,6 +262,7 @@ export function connect<T extends PropTypes>(
       const { xChannel, yChannel } = getAreaChannels(props)
       const channel = { xChannel, yChannel }
 
+      const dir = prop("dir") === "rtl" ? "right" : "left"
       const xPercent = areaValue.getChannelValuePercent(xChannel)
       const yPercent = 1 - areaValue.getChannelValuePercent(yChannel)
 
@@ -287,9 +288,8 @@ export function connect<T extends PropTypes>(
         "aria-valuetext": `${xChannel} ${xValue}, ${yChannel} ${yValue}`,
         style: {
           position: "absolute",
-          left: `${xPercent * 100}%`,
+          [dir]: `${xPercent * 100}%`,
           top: `${yPercent * 100}%`,
-          transform: "translate(-50%, -50%)",
           touchAction: "none",
           forcedColorAdjust: "none",
           "--color": color,
@@ -389,7 +389,7 @@ export function connect<T extends PropTypes>(
 
     getChannelSliderTrackProps(props) {
       const { orientation = "horizontal", channel, format } = props
-      const normalizedValue = format ? value.toFormat(format) : areaValue
+      const normalizedValue = format ? value.toFormat(format) : value
 
       return normalize.element({
         ...parts.channelSliderTrack.attrs,
@@ -438,16 +438,16 @@ export function connect<T extends PropTypes>(
     getChannelSliderThumbProps(props) {
       const { orientation = "horizontal", channel, format } = props
 
-      const normalizedValue = format ? value.toFormat(format) : areaValue
+      const normalizedValue = format ? value.toFormat(format) : value
       const channelRange = normalizedValue.getChannelRange(channel)
       const channelValue = normalizedValue.getChannelValue(channel)
 
       const offset = (channelValue - channelRange.minValue) / (channelRange.maxValue - channelRange.minValue)
-
+      const dir = prop("dir") === "rtl" ? "right" : "left"
       const placementStyles =
         orientation === "horizontal"
-          ? { left: `${offset * 100}%`, top: "50%" }
-          : { top: `${offset * 100}%`, left: "50%" }
+          ? { [dir]: `${offset * 100}%`, top: "50%" }
+          : { top: `${offset * 100}%`, [dir]: "50%" }
 
       return normalize.element({
         ...parts.channelSliderThumb.attrs,
@@ -467,12 +467,12 @@ export function connect<T extends PropTypes>(
         style: {
           forcedColorAdjust: "none",
           position: "absolute",
-          background: getChannelDisplayColor(areaValue, channel).toString("css"),
+          background: getChannelDisplayColor(value, channel).toString("css"),
           ...placementStyles,
         },
         onFocus() {
           if (!interactive) return
-          send({ type: "CHANNEL_SLIDER.FOCUS", channel })
+          send({ type: "CHANNEL_SLIDER.FOCUS", channel, format })
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return
@@ -700,7 +700,7 @@ export function connect<T extends PropTypes>(
   }
 }
 
-const formats: ColorFormat[] = ["hsba", "hsla", "rgba"]
+const formats: ColorFormat[] = ["hsba", "hsla", "rgba", "oklab", "oklch"]
 const formatRegex = new RegExp(`^(${formats.join("|")})$`)
 
 function getNextFormat(format: ColorFormat) {
diff --git a/packages/machines/color-picker/src/color-picker.machine.ts b/packages/machines/color-picker/src/color-picker.machine.ts
index 77a9257c4b..9ca5dbd06a 100644
--- a/packages/machines/color-picker/src/color-picker.machine.ts
+++ b/packages/machines/color-picker/src/color-picker.machine.ts
@@ -42,26 +42,33 @@ export const machine = createMachine<ColorPickerSchema>({
 
   context({ prop, bindable, getContext }) {
     return {
-      value: bindable<Color>(() => ({
-        defaultValue: prop("defaultValue"),
-        value: prop("value"),
-        isEqual(a, b) {
-          return a.toString("css") === b?.toString("css")
-        },
-        hash(a) {
-          return a.toString("css")
-        },
-        onChange(value) {
-          const ctx = getContext()
-          const valueAsString = value.toString(ctx.get("format"))
-          prop("onValueChange")?.({ value, valueAsString })
-        },
-      })),
+      value: bindable<Color>(() => {
+        const fmt = prop("format") ?? prop("defaultFormat")
+        return {
+          defaultValue: prop("defaultValue").toFormat(fmt),
+          value: prop("value")?.toFormat(fmt),
+          isEqual(a, b) {
+            return a.toString("css") === b?.toString("css")
+          },
+          hash(a) {
+            return a.toString("css")
+          },
+          onChange(value) {
+            const ctx = getContext()
+            const v = value.toFormat(ctx.get("format"))
+            prop("onValueChange")?.({ value: v, valueAsString: v.toString() })
+          },
+        }
+      }),
       format: bindable<ColorFormat>(() => ({
         defaultValue: prop("defaultFormat"),
         value: prop("format"),
         onChange(format) {
           prop("onFormatChange")?.({ format })
+          const ctx = getContext()
+          const newValue = ctx.get("value").toFormat(ctx.get("format"))
+          if (newValue.isEqual(ctx.get("value"))) return
+          ctx.set("value", newValue)
         },
       })),
       activeId: bindable<string | null>(() => ({ defaultValue: null })),
@@ -81,8 +88,8 @@ export const machine = createMachine<ColorPickerSchema>({
     interactive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
     valueAsString: ({ context }) => context.get("value").toString(context.get("format")),
     areaValue: ({ context }) => {
-      const format = context.get("format").startsWith("hsl") ? "hsla" : "hsba"
-      return context.get("value").toFormat(format)
+      const fmt = context.get("format")
+      return context.get("value").toFormat(fmt.startsWith("r") ? "hsba" : fmt)
     },
   },
 
@@ -472,29 +479,36 @@ export const machine = createMachine<ColorPickerSchema>({
         context.set("activeId", null)
         context.set("activeOrientation", null)
       },
-      setAreaColorFromPoint({ context, event, computed, scope }) {
+      setAreaColorFromPoint({ context, event, computed, scope, prop }) {
         const v = event.format ? context.get("value").toFormat(event.format) : computed("areaValue")
         const { xChannel, yChannel } = event.channel || context.get("activeChannel")
 
         const percent = dom.getAreaValueFromPoint(scope, event.point)
         if (!percent) return
-
+        if (prop("dir") === "rtl") {
+          percent.x = 1 - percent.x
+        }
         const xValue = v.getChannelPercentValue(xChannel, percent.x)
         const yValue = v.getChannelPercentValue(yChannel, 1 - percent.y)
 
         const color = v.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue)
         context.set("value", color)
       },
-      setChannelColorFromPoint({ context, event, computed, scope }) {
+      setChannelColorFromPoint({ context, event, scope, prop }) {
         const channel = event.channel || context.get("activeId")
-        const normalizedValue = event.format ? context.get("value").toFormat(event.format) : computed("areaValue")
+        const normalizedValue = event.format
+          ? context.get("value").toFormat(event.format)
+          : context.get("value").toFormat(context.get("format"))
 
         const percent = dom.getChannelSliderValueFromPoint(scope, event.point, channel)
         if (!percent) return
 
         const orientation = context.get("activeOrientation") || "horizontal"
-        const channelPercent = orientation === "horizontal" ? percent.x : percent.y
+        let channelPercent = orientation === "horizontal" ? percent.x : percent.y
 
+        if (prop("dir") === "rtl") {
+          channelPercent = 1 - channelPercent
+        }
         const value = normalizedValue.getChannelPercentValue(channel, channelPercent)
         const color = normalizedValue.withChannelValue(channel, value)
         context.set("value", color)
@@ -534,7 +548,7 @@ export const machine = createMachine<ColorPickerSchema>({
         } else if (isTextField) {
           //
           color = tryCatch(
-            () => parse(value).withChannelValue("alpha", currentAlpha),
+            () => parse(value).withChannelValue("alpha", currentAlpha).toFormat(context.get("format")),
             () => context.get("value"),
           )
           //
diff --git a/packages/machines/color-picker/src/utils/get-channel-display-color.ts b/packages/machines/color-picker/src/utils/get-channel-display-color.ts
index acba501d7f..5ea5047cf3 100644
--- a/packages/machines/color-picker/src/utils/get-channel-display-color.ts
+++ b/packages/machines/color-picker/src/utils/get-channel-display-color.ts
@@ -3,6 +3,7 @@ import { parseColor, type Color, type ColorChannel } from "@zag-js/color-utils"
 export function getChannelDisplayColor(color: Color, channel: ColorChannel) {
   switch (channel) {
     case "hue":
+      if (color.getFormat() === "oklch") return color
       return parseColor(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`)
     case "lightness":
     case "brightness":
@@ -11,9 +12,11 @@ export function getChannelDisplayColor(color: Color, channel: ColorChannel) {
     case "green":
     case "blue":
       return color.withChannelValue("alpha", 1)
-    case "alpha": {
+    case "alpha":
+    case "a":
+    case "b":
+    case "chroma":
       return color
-    }
     default:
       throw new Error("Unknown color channel: " + channel)
   }
diff --git a/packages/machines/color-picker/src/utils/get-slider-background.ts b/packages/machines/color-picker/src/utils/get-slider-background.ts
index 9b170b1c39..9171b6723f 100644
--- a/packages/machines/color-picker/src/utils/get-slider-background.ts
+++ b/packages/machines/color-picker/src/utils/get-slider-background.ts
@@ -25,11 +25,14 @@ export const getSliderBackground = (props: SliderBackgroundProps) => {
 
   switch (channel) {
     case "hue":
+      if (value.getFormat() === "oklch") {
+        return `linear-gradient(to ${bgDirection} in oklch increasing hue, ${value.withChannelValue(channel, minValue + 0.001).toString("css")}, ${value.withChannelValue(channel, maxValue).toString("css")})`
+      }
       return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`
     case "lightness": {
-      let start = value.withChannelValue(channel, minValue).toString("css")
-      let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css")
-      let end = value.withChannelValue(channel, maxValue).toString("css")
+      const start = value.withChannelValue(channel, minValue).toString("css")
+      const middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css")
+      const end = value.withChannelValue(channel, maxValue).toString("css")
       return `linear-gradient(to ${bgDirection}, ${start}, ${middle}, ${end})`
     }
     case "saturation":
@@ -38,10 +41,18 @@ export const getSliderBackground = (props: SliderBackgroundProps) => {
     case "green":
     case "blue":
     case "alpha": {
-      let start = value.withChannelValue(channel, minValue).toString("css")
-      let end = value.withChannelValue(channel, maxValue).toString("css")
+      const start = value.withChannelValue(channel, minValue).toString("css")
+      const end = value.withChannelValue(channel, maxValue).toString("css")
       return `linear-gradient(to ${bgDirection}, ${start}, ${end})`
     }
+    case "a":
+    case "b":
+    case "chroma": {
+      const interpolationMethod = `in ${value.getFormat()}`
+      let start = value.withChannelValue(channel, minValue + 0.0001).toString("css")
+      let end = value.withChannelValue(channel, maxValue).toString("css")
+      return `linear-gradient(to ${bgDirection} ${interpolationMethod}, ${start}, ${end})`
+    }
     default:
       throw new Error("Unknown color channel: " + channel)
   }
diff --git a/packages/utilities/color-utils/package.json b/packages/utilities/color-utils/package.json
index 4178fda648..0e91fbc0f0 100644
--- a/packages/utilities/color-utils/package.json
+++ b/packages/utilities/color-utils/package.json
@@ -31,9 +31,11 @@
   },
   "clean-package": "../../../clean-package.config.json",
   "dependencies": {
-    "@zag-js/utils": "workspace:*"
+    "@zag-js/utils": "workspace:*",
+    "culori": "^4.0.1"
   },
   "devDependencies": {
+    "@types/culori": "^4.0.0",
     "clean-package": "2.2.0"
   }
 }
diff --git a/packages/utilities/color-utils/src/area-gradient.ts b/packages/utilities/color-utils/src/area-gradient.ts
index 649966d97e..328e94b783 100644
--- a/packages/utilities/color-utils/src/area-gradient.ts
+++ b/packages/utilities/color-utils/src/area-gradient.ts
@@ -9,6 +9,12 @@ import {
   generateHSB_S,
   generateHSB_B,
   generateHSL_L,
+  generateOKLAB_L,
+  generateOKLCH_H,
+  generateOKLCH_L,
+  generateOKLCH_C,
+  generateOKLAB_A,
+  generateOKLAB_B,
 } from "./color-format-gradient"
 import type { ColorChannel } from "./types"
 
@@ -28,68 +34,63 @@ export function getColorAreaGradient(color: Color, options: GradientOptions): Gr
 
   const { zChannel } = color.getColorAxes({ xChannel, yChannel })
   const zValue = color.getChannelValue(zChannel)
-
   const { minValue: zMin, maxValue: zMax } = color.getChannelRange(zChannel)
   const orientation: [string, string] = ["top", dirProp === "rtl" ? "left" : "right"]
 
-  let dir = false
-
-  let background = { areaStyles: {}, areaGradientStyles: {} }
-
   let alphaValue = (zValue - zMin) / (zMax - zMin)
   let isHSL = color.getFormat() === "hsla"
 
   switch (zChannel) {
     case "red": {
-      dir = xChannel === "green"
-      background = generateRGB_R(orientation, dir, zValue)
-      break
+      return generateRGB_R(orientation, xChannel === "green", zValue)
     }
 
     case "green": {
-      dir = xChannel === "red"
-      background = generateRGB_G(orientation, dir, zValue)
-      break
+      return generateRGB_G(orientation, xChannel === "red", zValue)
     }
 
     case "blue": {
-      dir = xChannel === "red"
-      background = generateRGB_B(orientation, dir, zValue)
-      break
+      return generateRGB_B(orientation, xChannel === "red", zValue)
     }
 
     case "hue": {
-      dir = xChannel !== "saturation"
+      if (color.getFormat() === "oklch") {
+        return generateOKLCH_H(orientation, xChannel === "chroma", zValue)
+      }
+      const dir = xChannel !== "saturation"
       if (isHSL) {
-        background = generateHSL_H(orientation, dir, zValue)
-      } else {
-        background = generateHSB_H(orientation, dir, zValue)
+        return generateHSL_H(orientation, dir, zValue)
       }
-      break
+      return generateHSB_H(orientation, dir, zValue)
     }
 
     case "saturation": {
-      dir = xChannel === "hue"
+      const dir = xChannel === "hue"
       if (isHSL) {
-        background = generateHSL_S(orientation, dir, alphaValue)
-      } else {
-        background = generateHSB_S(orientation, dir, alphaValue)
+        return generateHSL_S(orientation, dir, alphaValue)
       }
-      break
+      return generateHSB_S(orientation, dir, alphaValue)
     }
 
-    case "brightness": {
-      dir = xChannel === "hue"
-      background = generateHSB_B(orientation, dir, alphaValue)
-      break
-    }
+    case "a":
+      return generateOKLAB_A(orientation, xChannel === "lightness", zValue)
+    case "b":
+      return generateOKLAB_B(orientation, xChannel === "lightness", zValue)
+    case "brightness":
+      return generateHSB_B(orientation, xChannel === "hue", alphaValue)
+    case "chroma":
+      return generateOKLCH_C(orientation, xChannel === "lightness", zValue)
 
     case "lightness": {
-      dir = xChannel === "hue"
-      background = generateHSL_L(orientation, dir, zValue)
-      break
+      if (color.getFormat() === "oklab") {
+        return generateOKLAB_L(orientation, xChannel === "a", zValue)
+      }
+      if (color.getFormat() === "oklch") {
+        return generateOKLCH_L(orientation, xChannel === "chroma", zValue)
+      }
+      return generateHSL_L(orientation, xChannel === "hue", zValue)
     }
+    default:
+      return { areaStyles: {}, areaGradientStyles: {} }
   }
-
-  return background
 }
diff --git a/packages/utilities/color-utils/src/color-format-gradient.ts b/packages/utilities/color-utils/src/color-format-gradient.ts
index 25974f3818..1a654f9f55 100644
--- a/packages/utilities/color-utils/src/color-format-gradient.ts
+++ b/packages/utilities/color-utils/src/color-format-gradient.ts
@@ -1,6 +1,6 @@
 export const generateRGB_R = (orientation: [string, string], dir: boolean, zValue: number) => {
   const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
-  const result = {
+  return {
     areaStyles: {
       backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`,
     },
@@ -10,12 +10,11 @@ export const generateRGB_R = (orientation: [string, string], dir: boolean, zValu
       maskImage,
     },
   }
-  return result
 }
 
 export const generateRGB_G = (orientation: [string, string], dir: boolean, zValue: number) => {
   const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
-  const result = {
+  return {
     areaStyles: {
       backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`,
     },
@@ -25,12 +24,11 @@ export const generateRGB_G = (orientation: [string, string], dir: boolean, zValu
       maskImage,
     },
   }
-  return result
 }
 
 export const generateRGB_B = (orientation: [string, string], dir: boolean, zValue: number) => {
   const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
-  const result = {
+  return {
     areaStyles: {
       backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`,
     },
@@ -40,11 +38,10 @@ export const generateRGB_B = (orientation: [string, string], dir: boolean, zValu
       maskImage,
     },
   }
-  return result
 }
 
 export const generateHSL_H = (orientation: [string, string], dir: boolean, zValue: number) => {
-  const result = {
+  return {
     areaStyles: {},
     areaGradientStyles: {
       background: [
@@ -56,11 +53,93 @@ export const generateHSL_H = (orientation: [string, string], dir: boolean, zValu
       ].join(","),
     },
   }
-  return result
+}
+
+export const generateOKLAB_L = (orientation: [string, string], isAX: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!isAX)]}, black, transparent)`
+  const l = zValue === 0 ? "none" : `${(zValue * 100).toFixed(2)}%`
+  return {
+    areaStyles: {
+      background: `linear-gradient(to ${orientation[Number(isAX)]} in oklab, oklab(${l} -100% 100%), oklab(${l} 100% 100%))`,
+    },
+    areaGradientStyles: {
+      background: `linear-gradient(to ${orientation[Number(isAX)]} in oklab, oklab(${l} -100% -100%), oklab(${l} 100% -100%))`,
+      maskImage,
+      WebkitMaskImage: maskImage,
+    },
+  }
+}
+export const generateOKLAB_A = (orientation: [string, string], isLightnessX: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(isLightnessX)]}, black, transparent)`
+  return {
+    areaStyles: {
+      background: `linear-gradient(to ${orientation[Number(!isLightnessX)]} in oklab, oklab(1 ${zValue} -100%), oklab(1 ${zValue} 100%))`,
+    },
+    areaGradientStyles: {
+      background: `linear-gradient(to ${orientation[Number(!isLightnessX)]} in oklab, oklab(0 ${zValue} -100%), oklab(0 ${zValue} 100%))`,
+      maskImage,
+      WebkitMaskImage: maskImage,
+    },
+  }
+}
+export const generateOKLAB_B = (orientation: [string, string], isLightnessX: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(isLightnessX)]}, black, transparent)`
+  return {
+    areaStyles: {
+      background: `linear-gradient(to ${orientation[Number(!isLightnessX)]} in oklab, oklab(1 -100% ${zValue}), oklab(1 100% ${zValue}))`,
+    },
+    areaGradientStyles: {
+      background: `linear-gradient(to ${orientation[Number(!isLightnessX)]} in oklab, oklab(0 -100% ${zValue}), oklab(0 100% ${zValue}))`,
+      maskImage,
+      WebkitMaskImage: maskImage,
+    },
+  }
+}
+
+export const generateOKLCH_H = (orientation: [string, string], isChromaX: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!isChromaX)]}, black, transparent)`
+  return {
+    areaStyles: {
+      background: `linear-gradient(to ${orientation[Number(isChromaX)]} in oklch, oklch(1 0.001 ${zValue}), oklch(1 0.5 ${zValue}))`,
+    },
+    areaGradientStyles: {
+      background: `linear-gradient(to ${orientation[Number(isChromaX)]} in oklch, oklch(0 0.001 ${zValue}), oklch(0 0.5 ${zValue}))`,
+      maskImage,
+      WebkitMaskImage: maskImage,
+    },
+  }
+}
+
+export const generateOKLCH_L = (orientation: [string, string], isChromaX: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(isChromaX)]}, transparent, black)`
+  return {
+    areaStyles: {
+      background: `linear-gradient(to ${orientation[Number(!isChromaX)]} in oklch increasing hue, oklch(${zValue} 0% 0deg), oklch(${zValue} 0% 359.9eg))`,
+    },
+    areaGradientStyles: {
+      background: `linear-gradient(to ${orientation[Number(!isChromaX)]} in oklch increasing hue, oklch(${zValue} 100% 0deg), oklch(${zValue} 100% 359.9deg))`,
+      maskImage,
+      WebkitMaskImage: maskImage,
+    },
+  }
+}
+
+export const generateOKLCH_C = (orientation: [string, string], isLightnessX: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(isLightnessX)]}, transparent, black)`
+  return {
+    areaStyles: {
+      background: `linear-gradient(to ${orientation[Number(!isLightnessX)]} in oklch increasing hue, oklch(0 ${zValue} 0deg), oklch(0 ${zValue} 359.9deg))`,
+    },
+    areaGradientStyles: {
+      background: `linear-gradient(to ${orientation[Number(!isLightnessX)]} in oklch increasing hue, oklch(1 ${zValue} 0deg), oklch(1 ${zValue} 359.9deg))`,
+      maskImage,
+      WebkitMaskImage: maskImage,
+    },
+  }
 }
 
 export const generateHSL_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {
-  const result = {
+  return {
     areaStyles: {},
     areaGradientStyles: {
       background: [
@@ -74,11 +153,10 @@ export const generateHSL_S = (orientation: [string, string], dir: boolean, alpha
       ].join(","),
     },
   }
-  return result
 }
 
 export const generateHSL_L = (orientation: [string, string], dir: boolean, zValue: number) => {
-  const result = {
+  return {
     areaStyles: {},
     areaGradientStyles: {
       backgroundImage: [
@@ -89,11 +167,10 @@ export const generateHSL_L = (orientation: [string, string], dir: boolean, zValu
       ].join(","),
     },
   }
-  return result
 }
 
 export const generateHSB_H = (orientation: [string, string], dir: boolean, zValue: number) => {
-  const result = {
+  return {
     areaStyles: {},
     areaGradientStyles: {
       background: [
@@ -103,11 +180,10 @@ export const generateHSB_H = (orientation: [string, string], dir: boolean, zValu
       ].join(","),
     },
   }
-  return result
 }
 
 export const generateHSB_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {
-  const result = {
+  return {
     areaStyles: {},
     areaGradientStyles: {
       background: [
@@ -119,11 +195,10 @@ export const generateHSB_S = (orientation: [string, string], dir: boolean, alpha
       ].join(","),
     },
   }
-  return result
 }
 
 export const generateHSB_B = (orientation: [string, string], dir: boolean, alphaValue: number) => {
-  const result = {
+  return {
     areaStyles: {},
     areaGradientStyles: {
       background: [
@@ -135,5 +210,4 @@ export const generateHSB_B = (orientation: [string, string], dir: boolean, alpha
       ].join(","),
     },
   }
-  return result
 }
diff --git a/packages/utilities/color-utils/src/color.ts b/packages/utilities/color-utils/src/color.ts
index 2710f79912..c1969f2343 100644
--- a/packages/utilities/color-utils/src/color.ts
+++ b/packages/utilities/color-utils/src/color.ts
@@ -18,7 +18,7 @@ const isEqualObject = (a: Record<string, number>, b: Record<string, number>): bo
 export abstract class Color implements ColorType {
   abstract toFormat(format: ColorFormat): ColorType
   abstract toJSON(): Record<string, number>
-  abstract toString(format: ColorStringFormat): string
+  abstract toString(format?: ColorStringFormat): string
   abstract clone(): ColorType
   abstract getChannelRange(channel: ColorChannel): ColorChannelRange
   abstract getFormat(): ColorFormat
@@ -87,3 +87,37 @@ export abstract class Color implements ColorType {
     return isSame && this.getChannelValue("alpha") === color.getChannelValue("alpha")
   }
 }
+
+export function parseOkl(v: string, mode: "oklab" | "oklch") {
+  if (!v.startsWith(`${mode}(`) || !v.endsWith(")")) return
+  let remainder = v.slice(mode.length + 1, -1).trim() // hopefully left  with {l} {a} {b}/{alpha} or {l} {c} {h}/{alpha}
+  const values = []
+  for (let i = 0; i < 2; i++) {
+    const [vStr] = remainder.split(/\s+/, 1)
+    const v = getValue(vStr)
+    if (!v) return
+    values.push(v)
+    remainder = remainder.slice(vStr.length).trimStart()
+  }
+  const remaining = remainder.split(/\s*\/\s*/)
+  if (remaining.length > 2) return
+  const [third, alpha] = remaining.map((s) => getValue(s?.trim()))
+  if (!third) return
+  values.push(third)
+  if (remaining.length === 1) return values
+  if (!alpha) return // invalid syntax passed to alpha;
+  values.push(alpha)
+  return values
+}
+
+export function getValue(v: string): { type: "number" | "percentage"; value: number } | undefined {
+  if (!v) return
+  if (v === "none") {
+    return { type: "number", value: 0 }
+  }
+  if (/^-?\d+(\.\d+)?$/.test(v)) {
+    return { type: "number", value: +v }
+  }
+  if (!/^-?\d+(\.\d+)?\%$/.test(v)) return // not none, number or percentage - invalid value
+  return { type: "percentage", value: +v.slice(0, -1) }
+}
diff --git a/packages/utilities/color-utils/src/hsb-color.ts b/packages/utilities/color-utils/src/hsb-color.ts
index bc89aaeda2..fb00997a43 100644
--- a/packages/utilities/color-utils/src/hsb-color.ts
+++ b/packages/utilities/color-utils/src/hsb-color.ts
@@ -25,24 +25,21 @@ export class HSBColor extends Color {
     }
   }
 
-  toString(format: ColorStringFormat) {
+  toString(format: ColorStringFormat = "hsba") {
     switch (format) {
       case "css":
-        return this.toHSL().toString("css")
-      case "hex":
-        return this.toRGB().toString("hex")
-      case "hexa":
-        return this.toRGB().toString("hexa")
+      case "hsl":
+        return this.toHSL().toString(format)
       case "hsb":
         return `hsb(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%)`
       case "hsba":
         return `hsba(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%, ${
           this.alpha
         })`
-      case "hsl":
-        return this.toHSL().toString("hsl")
+      case "hex":
+      case "hexa":
       case "rgb":
-        return this.toRGB().toString("rgb")
+        return this.toRGB().toString(format)
       default:
         return this.toFormat(format).toString(format)
     }
@@ -56,6 +53,9 @@ export class HSBColor extends Color {
         return this.toHSL()
       case "rgba":
         return this.toRGB()
+      case "oklab":
+      case "oklch":
+        return this.toRGB().toFormat(format)
       default:
         throw new Error("Unsupported color conversion: hsb -> " + format)
     }
diff --git a/packages/utilities/color-utils/src/hsl-color.ts b/packages/utilities/color-utils/src/hsl-color.ts
index 5d3ecfca97..bdaa1154d6 100644
--- a/packages/utilities/color-utils/src/hsl-color.ts
+++ b/packages/utilities/color-utils/src/hsl-color.ts
@@ -25,12 +25,8 @@ export class HSLColor extends Color {
     }
   }
 
-  toString(format: ColorStringFormat) {
+  toString(format: ColorStringFormat = "hsla") {
     switch (format) {
-      case "hex":
-        return this.toRGB().toString("hex")
-      case "hexa":
-        return this.toRGB().toString("hexa")
       case "hsl":
         return `hsl(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%)`
       case "css":
@@ -40,8 +36,10 @@ export class HSLColor extends Color {
         })`
       case "hsb":
         return this.toHSB().toString("hsb")
+      case "hex":
+      case "hexa":
       case "rgb":
-        return this.toRGB().toString("rgb")
+        return this.toRGB().toString(format)
       default:
         return this.toFormat(format).toString(format)
     }
@@ -55,6 +53,9 @@ export class HSLColor extends Color {
         return this.toHSB()
       case "rgba":
         return this.toRGB()
+      case "oklab":
+      case "oklch":
+        return this.toRGB().toFormat(format)
       default:
         throw new Error("Unsupported color conversion: hsl -> " + format)
     }
diff --git a/packages/utilities/color-utils/src/oklab-color.ts b/packages/utilities/color-utils/src/oklab-color.ts
new file mode 100644
index 0000000000..3dd100bd93
--- /dev/null
+++ b/packages/utilities/color-utils/src/oklab-color.ts
@@ -0,0 +1,133 @@
+import { toFixedNumber, roundValue, clampValue } from "@zag-js/utils"
+import { convertOklabToRgb, convertLabToLch } from "culori/fn"
+import { Color, parseOkl } from "./color"
+import { RGBColor } from "./rgb-color"
+import type { ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from "./types"
+import { OklchColor } from "./oklch-color"
+
+export class OklabColor extends Color {
+  constructor(
+    private lightness: number,
+    private a: number,
+    private b: number,
+    private alpha: number,
+  ) {
+    super()
+  }
+
+  static parse(value: string): OklabColor | void {
+    const parsed = parseOkl(value, "oklab")
+
+    if (!parsed) return
+    const [l, a, b, alpha] = parsed
+    const lValue = clampValue(l.type === "percentage" ? l.value * 0.01 : l.value, 0, 1)
+    const aValue = clampValue(a.type === "percentage" ? a.value * 0.004 : a.value, -0.4, 0.4)
+    const bValue = clampValue(b.type === "percentage" ? b.value * 0.004 : b.value, -0.4, 0.4)
+    const alphaValue = alpha
+      ? clampValue(alpha.type === "percentage" ? alpha.value * 0.01 : alpha.value, 0, 1)
+      : undefined
+    return new OklabColor(lValue, aValue, bValue, alphaValue ?? 1)
+  }
+
+  toString(format: ColorStringFormat = "oklab"): string {
+    switch (format) {
+      case "oklab":
+      case "css":
+        return `oklab(${this.lightness} ${this.a} ${this.b}${this.alpha < 1 ? ` / ${this.alpha}` : ""})`
+      case "oklch":
+        return this.toOklch().toString("oklch")
+      default:
+        return this.toRGB().toString(format)
+    }
+  }
+
+  toFormat(format: ColorFormat): ColorType {
+    switch (format) {
+      case "oklab":
+        return this
+      case "oklch":
+        return this.toOklch()
+      case "rgba":
+      case "hsla":
+      case "hsba":
+        return this.toRGB().toFormat(format)
+      default:
+        throw new Error("Unsupported color conversion: oklab -> " + format)
+    }
+  }
+
+  /**
+   * Converts a Oolab color to RGB.
+   * Conversion adjusts for values that couldn't be displayed in RGB
+   * @returns RGBColor
+   */
+  private toRGB(): RGBColor {
+    const inRGb = convertOklabToRgb({ l: this.lightness, a: this.a, b: this.b, alpha: this.alpha })
+    return new RGBColor(
+      clampValue(roundValue(inRGb.r * 255, 0, 1), 0, 255),
+      clampValue(roundValue(inRGb.g * 255, 0, 1), 0, 255),
+      clampValue(roundValue(inRGb.b * 255, 0, 1), 0, 255),
+      toFixedNumber(inRGb.alpha ?? 1, 2),
+    )
+  }
+
+  private toOklch(): OklchColor {
+    const { l, c, h, alpha } = convertLabToLch({ l: this.lightness, a: this.a, b: this.b, alpha: this.alpha })
+    return new OklchColor(
+      toFixedNumber(l, 2),
+      clampValue(toFixedNumber(c, 2), 0, 0.5),
+      toFixedNumber(h ?? 0, 2),
+      alpha ?? 1,
+    )
+  }
+
+  clone(): OklabColor {
+    return new OklabColor(this.lightness, this.a, this.b, this.alpha)
+  }
+
+  getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
+    switch (channel) {
+      case "lightness":
+      case "alpha":
+        return { style: "percent" }
+      case "a":
+      case "b":
+        return { style: "decimal" }
+      default:
+        throw new Error("Unknown color channel: " + channel)
+    }
+  }
+
+  formatChannelValue(channel: ColorChannel, locale: string) {
+    let options = this.getChannelFormatOptions(channel)
+    let value = this.getChannelValue(channel)
+    return new Intl.NumberFormat(locale, options).format(value)
+  }
+
+  getChannelRange(channel: ColorChannel): ColorChannelRange {
+    switch (channel) {
+      case "a":
+      case "b":
+        return { minValue: -0.4, maxValue: 0.4, step: 0.01, pageSize: 0.1 }
+      case "lightness":
+      case "alpha":
+        return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 }
+      default:
+        throw new Error("Unknown color channel: " + channel)
+    }
+  }
+
+  toJSON(): Record<"l" | "a" | "b" | "alpha", number> {
+    return { l: this.lightness, a: this.a, b: this.b, alpha: this.alpha }
+  }
+
+  getFormat(): ColorFormat {
+    return "oklab"
+  }
+
+  private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ["lightness", "a", "b"]
+
+  getChannels(): [ColorChannel, ColorChannel, ColorChannel] {
+    return OklabColor.colorChannels
+  }
+}
diff --git a/packages/utilities/color-utils/src/oklch-color.ts b/packages/utilities/color-utils/src/oklch-color.ts
new file mode 100644
index 0000000000..e602ac739c
--- /dev/null
+++ b/packages/utilities/color-utils/src/oklch-color.ts
@@ -0,0 +1,122 @@
+import { convertLchToLab } from "culori/fn"
+import { Color, parseOkl } from "./color"
+import type { ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from "./types"
+import { OklabColor } from "./oklab-color"
+import { clampValue, toFixedNumber } from "@zag-js/utils"
+
+export class OklchColor extends Color {
+  constructor(
+    private lightness: number,
+    private chroma: number,
+    private hue: number,
+    private alpha: number,
+  ) {
+    super()
+  }
+
+  static parse(value: string): OklchColor | void {
+    const parsed = parseOkl(value, "oklab")
+
+    if (!parsed) return
+    const [l, c, h, alpha] = parsed
+    const lValue = clampValue(l.type === "percentage" ? l.value * 0.01 : l.value, 0, 1)
+    const cValue = clampValue(c.type === "percentage" ? c.value * 0.005 : c.value, 0, 0.5)
+    const hValue = clampValue(h.type === "percentage" ? h.value * 3.6 : h.value, 0, 360)
+    const alphaValue = alpha
+      ? clampValue(alpha.type === "percentage" ? alpha.value * 0.01 : alpha.value, 0, 1)
+      : undefined
+    return new OklchColor(
+      toFixedNumber(lValue, 2),
+      toFixedNumber(cValue, 2),
+      toFixedNumber(hValue ?? 0, 2),
+      alphaValue ?? 1,
+    )
+  }
+
+  toString(format: ColorStringFormat = "oklch") {
+    switch (format) {
+      case "oklch":
+      case "css":
+        return `oklch(${this.lightness} ${this.chroma} ${this.hue}deg${this.alpha < 1 ? ` / ${this.alpha}` : ""})`
+      default:
+        return this.toOklab().toString(format)
+    }
+  }
+
+  toFormat(format: ColorFormat): ColorType {
+    switch (format) {
+      case "oklch":
+        return this
+      case "oklab":
+        return this.toOklab()
+      case "rgba":
+      case "hsla":
+      case "hsba":
+        return this.toOklab().toFormat(format)
+      default:
+        throw new Error("Unsupported color conversion: oklab -> " + format)
+    }
+  }
+
+  /**
+   * Converts a Oolab color to RGB.
+   * Conversion adjusts for values that couldn't be displayed in RGB
+   * @returns RGBColor
+   */
+  private toOklab(): OklabColor {
+    const { l, a, b, alpha } = convertLchToLab({ l: this.lightness, c: this.chroma, h: this.hue, alpha: this.alpha })
+    return new OklabColor(toFixedNumber(l, 2), toFixedNumber(a, 2), toFixedNumber(b, 2), alpha ?? 1)
+  }
+
+  clone(): OklchColor {
+    return new OklchColor(this.lightness, this.chroma, this.hue, this.alpha)
+  }
+
+  getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
+    switch (channel) {
+      case "lightness":
+      case "alpha":
+        return { style: "percent" }
+      case "hue":
+        return { style: "unit", unit: "deg" }
+      case "chroma":
+        return { style: "decimal" }
+      default:
+        throw new Error("Unknown color channel: " + channel)
+    }
+  }
+
+  formatChannelValue(channel: ColorChannel, locale: string) {
+    let options = this.getChannelFormatOptions(channel)
+    let value = this.getChannelValue(channel)
+    return new Intl.NumberFormat(locale, options).format(value)
+  }
+
+  getChannelRange(channel: ColorChannel): ColorChannelRange {
+    switch (channel) {
+      case "hue":
+        return { minValue: 0, maxValue: 360, step: 0.1, pageSize: 1 }
+      case "chroma":
+        return { minValue: 0, maxValue: 0.5, step: 0.01, pageSize: 0.1 }
+      case "lightness":
+      case "alpha":
+        return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 }
+      default:
+        throw new Error("Unknown color channel: " + channel)
+    }
+  }
+
+  toJSON(): Record<"l" | "c" | "h" | "a", number> {
+    return { l: this.lightness, c: this.chroma, h: this.hue, a: this.alpha }
+  }
+
+  getFormat(): ColorFormat {
+    return "oklch"
+  }
+
+  private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ["hue", "chroma", "lightness"]
+
+  getChannels(): [ColorChannel, ColorChannel, ColorChannel] {
+    return OklchColor.colorChannels
+  }
+}
diff --git a/packages/utilities/color-utils/src/parse-color.ts b/packages/utilities/color-utils/src/parse-color.ts
index 8fa5b49d4e..eec4ecb0e4 100644
--- a/packages/utilities/color-utils/src/parse-color.ts
+++ b/packages/utilities/color-utils/src/parse-color.ts
@@ -1,6 +1,8 @@
 import { HSBColor } from "./hsb-color"
 import { HSLColor } from "./hsl-color"
 import { nativeColorMap } from "./native-color"
+import { OklabColor } from "./oklab-color"
+import { OklchColor } from "./oklch-color"
 import { RGBColor } from "./rgb-color"
 import type { ColorType } from "./types"
 
@@ -9,7 +11,12 @@ export const parseColor = (value: string): ColorType => {
     return parseColor(nativeColorMap.get(value)!)
   }
 
-  const result = RGBColor.parse(value) || HSBColor.parse(value) || HSLColor.parse(value)
+  const result =
+    RGBColor.parse(value) ||
+    HSBColor.parse(value) ||
+    HSLColor.parse(value) ||
+    OklabColor.parse(value) ||
+    OklchColor.parse(value)
 
   if (!result) {
     const error = new Error("Invalid color value: " + value)
diff --git a/packages/utilities/color-utils/src/rgb-color.ts b/packages/utilities/color-utils/src/rgb-color.ts
index 4eca312f40..6cd3970434 100644
--- a/packages/utilities/color-utils/src/rgb-color.ts
+++ b/packages/utilities/color-utils/src/rgb-color.ts
@@ -1,8 +1,10 @@
 import { clampValue, toFixedNumber } from "@zag-js/utils"
+import { convertRgbToOklab } from "culori/fn"
 import { Color } from "./color"
 import { HSBColor } from "./hsb-color"
 import { HSLColor } from "./hsl-color"
 import type { ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from "./types"
+import { OklabColor } from "./oklab-color"
 
 export class RGBColor extends Color {
   constructor(
@@ -40,7 +42,7 @@ export class RGBColor extends Color {
     return colors.length < 3 ? undefined : new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1)
   }
 
-  toString(format: ColorStringFormat) {
+  toString(format: ColorStringFormat = "rgba") {
     switch (format) {
       case "hex":
         return (
@@ -85,6 +87,9 @@ export class RGBColor extends Color {
         return this.toHSB()
       case "hsla":
         return this.toHSL()
+      case "oklab":
+      case "oklch":
+        return this.toOklab().toFormat(format)
       default:
         throw new Error("Unsupported color conversion: rgb -> " + format)
     }
@@ -178,6 +183,21 @@ export class RGBColor extends Color {
     )
   }
 
+  private toOklab(): ColorType {
+    const inOklab = convertRgbToOklab({
+      r: this.red / 255,
+      g: this.green / 255,
+      b: this.blue / 255,
+      alpha: this.alpha,
+    })
+    return new OklabColor(
+      toFixedNumber(inOklab.l, 3),
+      toFixedNumber(inOklab.a, 3),
+      toFixedNumber(inOklab.b, 3),
+      inOklab.alpha ?? 1,
+    )
+  }
+
   clone(): ColorType {
     return new RGBColor(this.red, this.green, this.blue, this.alpha)
   }
diff --git a/packages/utilities/color-utils/src/types.ts b/packages/utilities/color-utils/src/types.ts
index 383e896f21..5845648a16 100644
--- a/packages/utilities/color-utils/src/types.ts
+++ b/packages/utilities/color-utils/src/types.ts
@@ -1,10 +1,21 @@
 export type ColorHexFormat = "hex" | "hexa"
 
-export type ColorFormat = "rgba" | "hsla" | "hsba"
+export type ColorFormat = "rgba" | "hsla" | "hsba" | "oklab" | "oklch"
 
 export type ColorStringFormat = ColorHexFormat | ColorFormat | "rgb" | "hsl" | "hsb" | "css"
 
-export type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"
+export type ColorChannel =
+  | "hue"
+  | "saturation"
+  | "brightness"
+  | "lightness"
+  | "red"
+  | "green"
+  | "blue"
+  | "alpha"
+  | "a"
+  | "b"
+  | "chroma"
 
 export interface Color2DAxes {
   xChannel: ColorChannel
@@ -32,7 +43,7 @@ export interface ColorType {
   /** Converts the color to a JSON object. */
   toJSON(): Record<string, number>
   /** Converts the color to a string in the given format. */
-  toString(format: ColorStringFormat): string
+  toString(format?: ColorStringFormat): string
   /** Converts the color to hex, and returns an integer representation. */
   toHexInt(): number
 
diff --git a/packages/utilities/color-utils/tests/color.test.ts b/packages/utilities/color-utils/tests/color.test.ts
index a31dd63013..d5e419ca48 100644
--- a/packages/utilities/color-utils/tests/color.test.ts
+++ b/packages/utilities/color-utils/tests/color.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, test } from "vitest"
 import { parseColor } from "../src"
+import { getValue, parseOkl } from "../src/color"
 
 describe("color.test.ts", () => {
   test("decrement", () => {
@@ -52,4 +53,36 @@ describe("color.test.ts", () => {
       }
     `)
   })
+  test("getValue helper works", () => {
+    expect(getValue("100%")).toEqual({ type: "percentage", value: 100 })
+    expect(getValue("-435.65%")).toEqual({ type: "percentage", value: -435.65 })
+    expect(getValue("100")).toEqual({ type: "number", value: 100 })
+    expect(getValue("-34")).toEqual({ type: "number", value: -34 })
+    expect(getValue("21.37")).toEqual({ type: "number", value: 21.37 })
+    expect(getValue("none")).toEqual({ type: "number", value: 0 })
+    expect(getValue("-34fff")).toEqual(undefined)
+    expect(getValue("-34fff%")).toEqual(undefined)
+    expect(getValue("-34.%")).toEqual(undefined)
+  })
+  test.for(["oklab", "oklch"] as const)("parsing %s works properly", (mode) => {
+    const validNoAlpha = ["0.5", "100%", "237%"] as const
+    const alpha = "0.5"
+    const expectedNoAlpha = validNoAlpha.map(getValue)
+    expect(parseOkl(createColorString(mode, validNoAlpha), mode)).toEqual(expectedNoAlpha)
+    expect(parseOkl(createColorString(mode, validNoAlpha, alpha), mode)).toEqual([...expectedNoAlpha, getValue(alpha)])
+    expect(parseOkl(createColorString(mode, validNoAlpha, `  ${alpha}`, "    "), mode)).toEqual([
+      ...expectedNoAlpha,
+      getValue(alpha),
+    ])
+    expect(parseOkl(createColorString("invalidMode", validNoAlpha), mode)).toEqual(undefined)
+    expect(parseOkl(createColorString(mode, ["0.3434", "100%", "343/200"], alpha), mode)).toEqual(undefined)
+    expect(parseOkl(createColorString(mode, ["0,3434", "100%", "100%"], alpha), mode)).toEqual(undefined)
+    expect(parseOkl(createColorString(mode, ["0.3434", "100%f", "40%"], alpha), mode)).toEqual(undefined)
+  })
 })
+const createColorString = (
+  mode: string,
+  values: readonly [string, string, string],
+  alpha?: string,
+  spaceBeforeAlpha = "",
+) => `${mode}(${values.join(" ")}${alpha ? `${spaceBeforeAlpha}/${alpha}` : ""})`
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 571d39fe2b..eb88337efc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3019,7 +3019,13 @@ importers:
       '@zag-js/utils':
         specifier: workspace:*
         version: link:../core
+      culori:
+        specifier: ^4.0.1
+        version: 4.0.1
     devDependencies:
+      '@types/culori':
+        specifier: ^4.0.0
+        version: 4.0.0
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
@@ -6278,6 +6284,9 @@ packages:
   '@types/conventional-commits-parser@5.0.1':
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
 
+  '@types/culori@4.0.0':
+    resolution: {integrity: sha512-aFljQwjb++sl6TAyEXeHTiK/fk9epZOQ+nMmadjnAvzZFIvNoQ0x8XQYfcOaRTBwmDUPUlghhZCJ66MTcqQAsg==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -7688,6 +7697,10 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  culori@4.0.1:
+    resolution: {integrity: sha512-LSnjA6HuIUOlkfKVbzi2OlToZE8OjFi667JWN9qNymXVXzGDmvuP60SSgC+e92sd7B7158f7Fy3Mb6rXS5EDPw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
@@ -16126,6 +16139,8 @@ snapshots:
     dependencies:
       '@types/node': 22.14.1
 
+  '@types/culori@4.0.0': {}
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
@@ -17827,6 +17842,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  culori@4.0.1: {}
+
   damerau-levenshtein@1.0.8: {}
 
   dargs@8.1.0: {}
@@ -18426,6 +18443,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+
   eslint-module-utils@2.12.0(@typescript-eslint/parser@8.30.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.24.0(jiti@2.4.2)):
     dependencies:
       debug: 3.2.7
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index 46fee46054..c5d5b778ad 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -216,6 +216,12 @@ export const colorPickerControls = defineControls({
   disabled: { type: "boolean", defaultValue: false },
   readOnly: { type: "boolean", defaultValue: false },
   dir: { type: "select", options: ["ltr", "rtl"] as const, defaultValue: "ltr" },
+  format: {
+    type: "select",
+    options: ["hsla", "hsba", "rgba", "oklab", "oklch"] as const,
+    defaultValue: "oklab",
+    forceValue: true,
+  },
 })
 
 export const fileUploadControls = defineControls({
diff --git a/shared/src/css/color-picker.css b/shared/src/css/color-picker.css
index e7c5b6a42c..30c0babd11 100644
--- a/shared/src/css/color-picker.css
+++ b/shared/src/css/color-picker.css
@@ -47,6 +47,9 @@
     black 0px 0px 0px 1px inset;
   width: 16px;
   height: 16px;
+  [dir="rtl"] & {
+    transform: translate(50%, -50%);
+  }
 }
 
 [data-scope="color-picker"][data-part="channel-slider-track"] {
diff --git a/shared/src/define-controls.ts b/shared/src/define-controls.ts
index 4ae9ba6dce..68a7aa4b73 100644
--- a/shared/src/define-controls.ts
+++ b/shared/src/define-controls.ts
@@ -3,8 +3,8 @@ import { deepExpand } from "./deep-get-set"
 export type ControlProp =
   | { type: "boolean"; label?: string; defaultValue?: boolean }
   | { type: "string"; label?: string; defaultValue?: string; placeholder?: string }
-  | { type: "select"; options: readonly string[]; defaultValue?: string; label?: string }
-  | { type: "multiselect"; options: readonly string[]; defaultValue?: string[]; label?: string }
+  | { type: "select"; options: readonly string[]; defaultValue?: string; label?: string; forceValue?: boolean }
+  | { type: "multiselect"; options: readonly string[]; defaultValue?: string[]; label?: string; forceValue?: boolean }
   | { type: "number"; label?: string; defaultValue?: number; min?: number; max?: number }
 
 export type ControlRecord = Record<string, ControlProp>
diff --git a/website/data/components/color-picker.mdx b/website/data/components/color-picker.mdx
index 291a19ef1a..164333f364 100644
--- a/website/data/components/color-picker.mdx
+++ b/website/data/components/color-picker.mdx
@@ -19,7 +19,7 @@ provides a more customizable and consistent user experience.
 **Features**
 
 - Support for custom color area
-- Support for RGBA, HSLA, HEX, and HSBA formats
+- Support for RGBA, HSLA, HEX, HSBA, OKLAB and OKLCH formats
 - Support for channel inputs and sliders
 - Support for mouse, touch, and keyboard interactions
 - Support for form submission and reset events
@@ -105,7 +105,7 @@ const [current, send] = useMachine(colorPicker.machine, {
 ### Using a custom color format
 
 By default, the color picker's output format is `rgba`. You can change this
-format to either `hsla` or `hsba` by using the `format` context property.
+format to `hsla`, `hsba`, `oklab` or `oklch` by using the `format` context property.
 
 When this property is set, the `value` and `valueAsString` properties of the
 `onValueChange` event will be updated to reflect the new format.
@@ -272,6 +272,18 @@ When a swatch's color value matches the color picker's value, the
 }
 ```
 
+#### Swatch thumb in relation to direction state
+
+As swatch's thumb position is dependent on direction, you might want to style it differently based on `dir` attribute of the swatch
+
+```css
+transform: translate(-50%, -50%);
+[dir="rtl"] & {
+  transform: translate(50%, -50%);
+}
+```
+
+
 ## Methods and Properties
 
 ### Machine Context