fix: oklab string format and debounced color history

app/(app)/pastel/page.tsx

@@ -31,12 +31,26 @@ function PlaygroundContent() {
   const { history, addColor, removeColor, clearHistory, getRecent } = useColorHistory();
   const recentColors = getRecent(10);
 
-  // Update URL and history when color changes
+  // Update URL when color changes
   useEffect(() => {
     const hex = color.replace('#', '');
-    router.push(`/pastel?color=${hex}`, { scroll: false });
-    addColor(color);
-  }, [color, router, addColor]);
+    if (hex.length === 6 || hex.length === 3) {
+      router.push(`/pastel?color=${hex}`, { scroll: false });
+    }
+  }, [color, router]);
+
+  // Debounced history update
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const hex = color.replace('#', '');
+      // Only add valid hex colors to history
+      if (hex.length === 6 || hex.length === 3) {
+        addColor(color);
+      }
+    }, 1000); // Wait 1 second before adding to history
+
+    return () => clearTimeout(timer);
+  }, [color, addColor]);
 
   // Share color via URL
   const handleShare = () => {