diff --git a/configurator/src/components/inputs/ColorInput.svelte b/configurator/src/components/inputs/ColorInput.svelte
new file mode 100644
index 00000000..87af50b3
--- /dev/null
+++ b/configurator/src/components/inputs/ColorInput.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { resolveColor, previewVersion } from '../../lib/previewResolver.svelte';
+
+  let {
+    token,
+    value,
+    placeholder,
+    isOverridden,
+    onSet,
+    onReset,
+  }: {
+    token: string;
+    value: string;
+    placeholder?: string;
+    isOverridden: boolean;
+    onSet: (v: string) => void;
+    onReset: () => void;
+  } = $props();
+
+  let editing = $state(false);
+  let cancelBlur = $state(false);
+
+  // Bare "--token" is a UI shorthand; normalize to "var(--token)" before resolving or storing.
+  function normalize(v: string): string {
+    const t = v.trim();
+    return t.startsWith("--") && !t.startsWith("var(") ? `var(${t})` : t;
+  }
+
+  function paint(expr: string): string {
+    void previewVersion.value;
+    const norm = normalize(expr);
+    return resolveColor(norm) || norm || "transparent";
+  }
+
+  let swatchColor = $derived(paint(value || `var(${token})`));
+
+  // Detect if the current value is a CSS variable reference (can't use native picker)
+  let isVar = $derived(value.trim().startsWith("var(") || value.trim().startsWith("--"));
+
+  // Convert a resolved rgb(...) or a raw hex string to a #RRGGBB seed for the native picker.
+  function toHex(color: string): string {
+    // Pass through hex colors directly (3- or 6-digit)
+    const hex6 = color.match(/^#([0-9a-fA-F]{6})$/);
+    if (hex6) return color.toLowerCase();
+    const hex3 = color.match(/^#([0-9a-fA-F]{3})$/);
+    if (hex3) return "#" + hex3[1].split("").map(c => c + c).join("");
+    // Parse computed rgb()/rgba() strings from resolveColor
+    const m = color.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+    if (m) return "#" + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, "0")).join("");
+    return "#6366f1";
+  }
+</script>
+
+<div class="flex items-center gap-2">
+  <!-- Swatch / native picker trigger -->
+  <div class="relative shrink-0 w-7 h-7 rounded border border-white/10 overflow-hidden cursor-pointer">
+    <div class="absolute inset-0" style={`background: ${swatchColor}`}></div>
+    {#if !isVar}
+      <input
+        type="color"
+        value={toHex(swatchColor)}
+        oninput={(e) => onSet((e.target as HTMLInputElement).value)}
+        class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+        tabindex="-1"
+      />
+    {/if}
+  </div>
+
+  <!-- Text display / editable input -->
+  {#if editing}
+    <input
+      value={value}
+      autofocus
+      onblur={(e) => {
+        if (cancelBlur) { cancelBlur = false; editing = false; return; }
+        const v = normalize((e.target as HTMLInputElement).value);
+        if (!v) onReset();
+        else onSet(v);
+        editing = false;
+      }}
+      onkeydown={(e) => {
+        if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur();
+        if (e.key === "Escape") { cancelBlur = true; editing = false; }
+      }}
+      placeholder={placeholder ?? "default"}
+      class="flex-1 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none"
+    />
+  {:else}
+    <button
+      onclick={() => { editing = true; }}
+      class="flex-1 text-left text-[9px] font-mono text-slate-500 hover:text-slate-200 truncate cursor-pointer transition-colors"
+    >
+      {#if isOverridden}
+        <span class="text-indigo-300">{value}</span>
+      {:else}
+        {placeholder ?? "default"}
+      {/if}
+    </button>
+  {/if}
+
+  {#if isOverridden}
+    <button onclick={onReset} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+  {/if}
+</div>
diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte
index a198012b..fb90767d 100644
--- a/configurator/src/components/inputs/TokenRow.svelte
+++ b/configurator/src/components/inputs/TokenRow.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SlashedToken } from '../../types';
+  import { resolveColor, previewVersion } from '../../lib/previewResolver.svelte';
 
   let { token, overrideValue, onSet, onReset }: {
     token: SlashedToken;
@@ -23,6 +24,13 @@
   let isOverridden = $derived(overrideValue !== undefined);
   let type = $derived(guessType(token));
   let shortName = $derived(token.name.replace("--sf-", ""));
+
+  function paintSwatch(expr: string): string {
+    void previewVersion.value;
+    return resolveColor(expr) || resolveColor(`var(${token.name})`) || expr;
+  }
+  // Only subscribe to previewVersion for color tokens to avoid unnecessary recomputation.
+  let swatchColor = $derived(type === "color" ? paintSwatch(displayValue) : "");
 </script>
 
 <div class={`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${isOverridden ? "bg-indigo-500/8 border border-indigo-500/15" : "hover:bg-white/4"}`}>
@@ -31,7 +39,7 @@
   {#if type === "color"}
     <div
       class="w-4 h-4 rounded-sm border border-white/10 shrink-0"
-      style={`background: ${displayValue}`}
+      style={`background: ${swatchColor}`}
     ></div>
   {:else}
     <div class="w-4 h-4 shrink-0"></div>
diff --git a/configurator/src/components/panels/BordersPanel.svelte b/configurator/src/components/panels/BordersPanel.svelte
index 750cacf6..b4adda51 100644
--- a/configurator/src/components/panels/BordersPanel.svelte
+++ b/configurator/src/components/panels/BordersPanel.svelte
@@ -4,6 +4,7 @@
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import StylePresetCards from '../inputs/StylePresetCards.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
 
   let { overrides, onSet, onReset, onBulkChange }: {
     overrides: Record<string, string>;
@@ -103,18 +104,14 @@
       <span class="text-[10px] text-slate-500">{showBorderColor ? "▲" : "▼"}</span>
     </button>
     {#if showBorderColor}
-      <div class="flex items-center gap-2">
-        <input
-          type="color"
-          value={borderColor || "#e2e8f0"}
-          oninput={(e) => onSet("--sf-color-border", (e.target as HTMLInputElement).value)}
-          class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-        />
-        <span class="text-[9px] font-mono text-slate-400 flex-1">{borderColor || "auto-derived"}</span>
-        {#if "--sf-color-border" in overrides}
-          <button onclick={() => onReset("--sf-color-border")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-        {/if}
-      </div>
+      <ColorInput
+        token="--sf-color-border"
+        value={borderColor}
+        placeholder="auto-derived"
+        isOverridden={"--sf-color-border" in overrides}
+        onSet={(v) => onSet("--sf-color-border", v)}
+        onReset={() => onReset("--sf-color-border")}
+      />
       <p class="text-[9px] text-slate-600">
         Drives --sf-color-border--strong, --subtle, --translucent automatically.
       </p>
@@ -242,16 +239,14 @@
     {#if showDividers}
       <div class="flex items-center gap-2">
         <div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Color</div>
-        <input
-          type="color"
-          value={dividerColor || "#e2e8f0"}
-          oninput={(e) => onSet("--sf-divider-color", (e.target as HTMLInputElement).value)}
-          class="w-7 h-7 rounded border border-white/10 bg-transparent cursor-pointer"
+        <ColorInput
+          token="--sf-divider-color"
+          value={dividerColor}
+          placeholder="inherits border"
+          isOverridden={"--sf-divider-color" in overrides}
+          onSet={(v) => onSet("--sf-divider-color", v)}
+          onReset={() => onReset("--sf-divider-color")}
         />
-        <span class="text-[9px] font-mono text-slate-500 flex-1 truncate">{dividerColor || "inherits border"}</span>
-        {#if "--sf-divider-color" in overrides}
-          <button onclick={() => onReset("--sf-divider-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-        {/if}
       </div>
       <SliderRow
         label="Width" value={dividerWidth} min={0.5} max={4} step={0.5} unit="px"
@@ -299,16 +294,14 @@
       />
       <div class="flex items-center gap-2">
         <div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Ring color</div>
-        <input
-          type="color"
-          value={focusRingColor || "#6366f1"}
-          oninput={(e) => onSet("--sf-focus-ring-color", (e.target as HTMLInputElement).value)}
-          class="w-7 h-7 rounded border border-white/10 bg-transparent cursor-pointer"
+        <ColorInput
+          token="--sf-focus-ring-color"
+          value={focusRingColor}
+          placeholder="default (action)"
+          isOverridden={"--sf-focus-ring-color" in overrides}
+          onSet={(v) => onSet("--sf-focus-ring-color", v)}
+          onReset={() => onReset("--sf-focus-ring-color")}
         />
-        <span class="text-[9px] font-mono text-slate-500 flex-1 truncate">{focusRingColor || "default (action)"}</span>
-        {#if "--sf-focus-ring-color" in overrides}
-          <button onclick={() => onReset("--sf-focus-ring-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-        {/if}
       </div>
       <!-- Focus ring preview -->
       <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center">
diff --git a/configurator/src/components/panels/ColorsPanel.svelte b/configurator/src/components/panels/ColorsPanel.svelte
index 6cffc7c0..b473d2bd 100644
--- a/configurator/src/components/panels/ColorsPanel.svelte
+++ b/configurator/src/components/panels/ColorsPanel.svelte
@@ -7,6 +7,7 @@
   import OklchColorDesk from '../inputs/OklchColorDesk.svelte';
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
 
   let { tokens, overrides, onSet, onReset, onBulkChange, onSelectDomain }: {
     tokens: SlashedToken[];
@@ -956,23 +957,14 @@
           {@const resolved = paint(`var(${s.name})`, "")}
           <div>
             <div class="text-[10px] font-semibold text-slate-400 mb-1">{s.label}</div>
-            <div class="flex items-center gap-2">
-              <span class="relative w-7 h-7 rounded border border-white/10 shrink-0 overflow-hidden" style={`background:${(s.name in overrides ? "" : resolved) || "transparent"}`}>
-                <input
-                  type="color"
-                  value={overrides[s.name] ?? "#6366f1"}
-                  oninput={(e) => onSet(s.name, (e.target as HTMLInputElement).value)}
-                  class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                />
-                {#if s.name in overrides}
-                  <span class="absolute inset-0" style={`background:${overrides[s.name]}`}></span>
-                {/if}
-              </span>
-              <span class="text-[9px] font-mono text-slate-500 flex-1 truncate">{overrides[s.name] ?? (resolved ? `auto-derived · ${resolved}` : "auto-derived")}</span>
-              {#if s.name in overrides}
-                <button onclick={() => onReset(s.name)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-              {/if}
-            </div>
+            <ColorInput
+              token={s.name}
+              value={overrides[s.name] ?? ""}
+              placeholder={resolved ? `auto-derived · ${resolved}` : "auto-derived"}
+              isOverridden={s.name in overrides}
+              onSet={(v) => onSet(s.name, v)}
+              onReset={() => onReset(s.name)}
+            />
           </div>
         {/each}
       </div>
diff --git a/configurator/src/components/panels/EffectsPanel.svelte b/configurator/src/components/panels/EffectsPanel.svelte
index aa56fc59..41e0e12f 100644
--- a/configurator/src/components/panels/EffectsPanel.svelte
+++ b/configurator/src/components/panels/EffectsPanel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
 
   let { overrides, onSet, onReset }: {
     overrides: Record<string, string>;
@@ -152,16 +153,14 @@
       <!-- Scrim color -->
       <div class="flex items-center gap-2">
         <div class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Color</div>
-        <input
-          type="color"
-          value={scrimColor || "#000000"}
-          oninput={(e) => onSet("--sf-scrim-color", (e.target as HTMLInputElement).value)}
-          class="w-7 h-7 rounded border border-white/10 bg-transparent cursor-pointer"
+        <ColorInput
+          token="--sf-scrim-color"
+          value={scrimColor}
+          placeholder="default (base color)"
+          isOverridden={"--sf-scrim-color" in overrides}
+          onSet={(v) => onSet("--sf-scrim-color", v)}
+          onReset={() => onReset("--sf-scrim-color")}
         />
-        <span class="text-[9px] font-mono text-slate-500 flex-1 truncate">{scrimColor || "default (base color)"}</span>
-        {#if "--sf-scrim-color" in overrides}
-          <button onclick={() => onReset("--sf-scrim-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-        {/if}
       </div>
 
       <div>
@@ -212,21 +211,19 @@
     </button>
     {#if showScrollbar}
       {#each [
-        { label: "Thumb color", token: "--sf-scrollbar-thumb", val: scrollbarThumb, default: "#6366f1" },
-        { label: "Track color", token: "--sf-scrollbar-track", val: scrollbarTrack, default: "transparent" },
+        { label: "Thumb color", token: "--sf-scrollbar-thumb", val: scrollbarThumb },
+        { label: "Track color", token: "--sf-scrollbar-track", val: scrollbarTrack },
       ] as row (row.token)}
         <div class="flex items-center gap-2">
           <div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">{row.label}</div>
-          <input
-            type="color"
-            value={row.val || (row.default === "transparent" ? "#000000" : row.default)}
-            oninput={(e) => onSet(row.token, (e.target as HTMLInputElement).value)}
-            class="w-7 h-7 rounded border border-white/10 bg-transparent cursor-pointer"
+          <ColorInput
+            token={row.token}
+            value={row.val}
+            placeholder="default"
+            isOverridden={row.token in overrides}
+            onSet={(v) => onSet(row.token, v)}
+            onReset={() => onReset(row.token)}
           />
-          <span class="text-[9px] font-mono text-slate-500 flex-1 truncate">{row.val || "default"}</span>
-          {#if row.token in overrides}
-            <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-          {/if}
         </div>
       {/each}
       <!-- Scrollbar strip preview -->
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index fa889263..00adbf1b 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
 
   let { overrides, onSet, onReset, onBulkChange }: {
     overrides: Record<string, string>;
@@ -180,33 +181,25 @@
       <div class="space-y-2">
         <div>
           <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection background</div>
-          <div class="flex items-center gap-2">
-            <input
-              type="color"
-              value={overrides["--sf-color-selection-bg"] ?? "#6366f1"}
-              oninput={(e) => onSet("--sf-color-selection-bg", (e.target as HTMLInputElement).value)}
-              class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-            />
-            <span class="text-[9px] font-mono text-slate-400 flex-1">{overrides["--sf-color-selection-bg"] ?? "default"}</span>
-            {#if "--sf-color-selection-bg" in overrides}
-              <button onclick={() => onReset("--sf-color-selection-bg")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-            {/if}
-          </div>
+          <ColorInput
+            token="--sf-color-selection-bg"
+            value={overrides["--sf-color-selection-bg"] ?? ""}
+            placeholder="default"
+            isOverridden={"--sf-color-selection-bg" in overrides}
+            onSet={(v) => onSet("--sf-color-selection-bg", v)}
+            onReset={() => onReset("--sf-color-selection-bg")}
+          />
         </div>
         <div>
           <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection text color</div>
-          <div class="flex items-center gap-2">
-            <input
-              type="color"
-              value={overrides["--sf-color-selection-text"] ?? "#ffffff"}
-              oninput={(e) => onSet("--sf-color-selection-text", (e.target as HTMLInputElement).value)}
-              class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-            />
-            <span class="text-[9px] font-mono text-slate-400 flex-1">{overrides["--sf-color-selection-text"] ?? "default"}</span>
-            {#if "--sf-color-selection-text" in overrides}
-              <button onclick={() => onReset("--sf-color-selection-text")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-            {/if}
-          </div>
+          <ColorInput
+            token="--sf-color-selection-text"
+            value={overrides["--sf-color-selection-text"] ?? ""}
+            placeholder="default"
+            isOverridden={"--sf-color-selection-text" in overrides}
+            onSet={(v) => onSet("--sf-color-selection-text", v)}
+            onReset={() => onReset("--sf-color-selection-text")}
+          />
         </div>
         <!-- Selection preview -->
         <div class="bg-white/4 rounded-xl border border-white/8 p-3">
@@ -320,18 +313,14 @@
     {#if showCaretLinks}
       <div>
         <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Caret color</div>
-        <div class="flex items-center gap-2">
-          <input
-            type="color"
-            value={caretColor || "#6366f1"}
-            oninput={(e) => onSet("--sf-caret-color", (e.target as HTMLInputElement).value)}
-            class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-          />
-          <span class="text-[9px] font-mono text-slate-400 flex-1">{caretColor || "default (action color)"}</span>
-          {#if "--sf-caret-color" in overrides}
-            <button onclick={() => onReset("--sf-caret-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-          {/if}
-        </div>
+        <ColorInput
+          token="--sf-caret-color"
+          value={caretColor}
+          placeholder="default (action color)"
+          isOverridden={"--sf-caret-color" in overrides}
+          onSet={(v) => onSet("--sf-caret-color", v)}
+          onReset={() => onReset("--sf-caret-color")}
+        />
       </div>
       <SliderRow
         label="Underline offset" value={underlineOffset} min={0} max={0.5} step={0.01} unit="em"
diff --git a/configurator/src/components/panels/ShadowsPanel.svelte b/configurator/src/components/panels/ShadowsPanel.svelte
index d1586073..0300475e 100644
--- a/configurator/src/components/panels/ShadowsPanel.svelte
+++ b/configurator/src/components/panels/ShadowsPanel.svelte
@@ -4,6 +4,7 @@
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import StylePresetCards from '../inputs/StylePresetCards.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
 
   let { overrides, onSet, onReset, onBulkChange }: {
     overrides: Record<string, string>;
@@ -85,18 +86,14 @@
     {#if showShadowColor}
       <div>
         <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Shadow color</div>
-        <div class="flex items-center gap-2">
-          <input
-            type="color"
-            value={shadowColor || "#1a1a2e"}
-            oninput={(e) => onSet("--sf-shadow-color", (e.target as HTMLInputElement).value)}
-            class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-          />
-          <span class="text-[9px] font-mono text-slate-400 flex-1">{shadowColor || "auto (neutral hue)"}</span>
-          {#if "--sf-shadow-color" in overrides}
-            <button onclick={() => onReset("--sf-shadow-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-          {/if}
-        </div>
+        <ColorInput
+          token="--sf-shadow-color"
+          value={shadowColor}
+          placeholder="auto (neutral hue)"
+          isOverridden={"--sf-shadow-color" in overrides}
+          onSet={(v) => onSet("--sf-shadow-color", v)}
+          onReset={() => onReset("--sf-shadow-color")}
+        />
         <p class="text-[9px] text-slate-600 mt-1">Warm, cool or brand-tinted shadows. Default uses neutral hue.</p>
       </div>
     {/if}
@@ -139,18 +136,14 @@
       {#if !glowDisabled}
         <div>
           <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Glow color</div>
-          <div class="flex items-center gap-2">
-            <input
-              type="color"
-              value={shadowGlowColor || "#6366f1"}
-              oninput={(e) => onSet("--sf-shadow-glow-color", (e.target as HTMLInputElement).value)}
-              class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-            />
-            <span class="text-[9px] font-mono text-slate-400 flex-1">{shadowGlowColor || "default (primary color)"}</span>
-            {#if "--sf-shadow-glow-color" in overrides}
-              <button onclick={() => onReset("--sf-shadow-glow-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-            {/if}
-          </div>
+          <ColorInput
+            token="--sf-shadow-glow-color"
+            value={shadowGlowColor}
+            placeholder="default (primary color)"
+            isOverridden={"--sf-shadow-glow-color" in overrides}
+            onSet={(v) => onSet("--sf-shadow-glow-color", v)}
+            onReset={() => onReset("--sf-shadow-glow-color")}
+          />
           <p class="text-[9px] text-slate-600 mt-1">Which brand color radiates the glow. Defaults to primary.</p>
         </div>
       {/if}