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('#', '');
+    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);
-  }, [color, router, addColor]);
+      }
+    }, 1000); // Wait 1 second before adding to history
+
+    return () => clearTimeout(timer);
+  }, [color, addColor]);
 
   // Share color via URL
   const handleShare = () => {

components/pastel/color/ColorInfo.tsx

@@ -32,7 +32,11 @@ export function ColorInfo({ info, className }: ColorInfoProps) {
   };
 
   const formatLab = (lab: { l: number; a: number; b: number }) => {
-    return `lab(${lab.l.toFixed(1)}, ${lab.a.toFixed(1)}, ${lab.b.toFixed(1)})`;
+    return `lab(${lab.l.toFixed(1)} ${lab.a.toFixed(1)} ${lab.b.toFixed(1)})`;
+  };
+
+  const formatOkLab = (oklab: { l: number; a: number; b: number }) => {
+    return `oklab(${(oklab.l * 100).toFixed(1)}% ${oklab.a.toFixed(3)} ${oklab.b.toFixed(3)})`;
   };
 
   const formats = [
@@ -40,7 +44,7 @@ export function ColorInfo({ info, className }: ColorInfoProps) {
     { label: 'RGB', value: formatRgb(info.rgb) },
     { label: 'HSL', value: formatHsl(info.hsl) },
     { label: 'Lab', value: formatLab(info.lab) },
-    { label: 'OkLab', value: formatLab(info.oklab) },
+    { label: 'OkLab', value: formatOkLab(info.oklab) },
   ];
 
   return (