Add oklch and all new tailwind colors

src/components/ColorPicker.tsx

@@ -1,6 +1,9 @@
 import { useState, useEffect } from 'react'
 import { HexColorPicker } from 'react-colorful'
-import { hexToRgb, rgbToHex, rgbToHsl, hslToRgb, rgbToHsb, hsbToRgb, findClosestTailwindColor } from '../utils/colors'
+import { 
+  hexToRgb, rgbToHex, rgbToHsl, hslToRgb, rgbToHsb, hsbToRgb,
+  findClosestTailwindColor, rgbToOklch, oklchToRgb, parseOklch, oklchToString
+} from '../utils/colors'
 import { TailwindColors } from './TailwindColors'
 
 type RGB = {
@@ -21,13 +24,23 @@ type HSB = {
   b: number
 }
 
-type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsb' | 'tailwind'
+type OKLCH = {
+  l: number
+  c: number
+  h: number
+}
+
+type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsb' | 'oklch' | 'tailwind'
 
 export function ColorPicker() {
   const [color, setColor] = useState('#6366F1') // Default to indigo-500
   const [format, setFormat] = useState<ColorFormat>('hex')
   const [displayValue, setDisplayValue] = useState(color)
-  const [closestTailwind, setClosestTailwind] = useState<{ name: string; hex: string }>({ name: 'indigo-500', hex: '#6366F1' })
+  const [closestTailwind, setClosestTailwind] = useState<{ name: string; hex: string; oklch: string }>({ 
+    name: 'indigo-500', 
+    hex: '#6366F1',
+    oklch: 'oklch(0.585 0.233 277.117)'
+  })
 
   useEffect(() => {
     const rgb = hexToRgb(color)
@@ -54,6 +67,11 @@ export function ColorPicker() {
         setDisplayValue(`hsb(${hsb.h}, ${hsb.s}%, ${hsb.b}%)`)
         break
       }
+      case 'oklch': {
+        const oklch = rgbToOklch(rgb.r, rgb.g, rgb.b)
+        setDisplayValue(oklchToString(oklch.l, oklch.c, oklch.h))
+        break
+      }
       case 'tailwind':
         setDisplayValue(closest.name)
         break
@@ -91,6 +109,12 @@ export function ColorPicker() {
           newHex = rgbToHex(rgb.r, rgb.g, rgb.b)
         }
       }
+    } else if (format === 'oklch') {
+      const oklch = parseOklch(value)
+      if (oklch) {
+        const rgb = oklchToRgb(oklch.l, oklch.c, oklch.h)
+        newHex = rgbToHex(rgb.r, rgb.g, rgb.b)
+      }
     }
 
     setColor(newHex)
@@ -111,8 +135,11 @@ export function ColorPicker() {
               style={{ backgroundColor: color }}
             />
             
-            <div className="text-sm text-zinc-600">
-              Closest Tailwind: <span className="font-medium">{closestTailwind.name}</span>
+            <div className="text-sm text-zinc-600 text-center">
+              <div>Closest Tailwind: <span className="font-medium">{closestTailwind.name}</span></div>
+              <div className="text-xs mt-1 text-zinc-400">
+                {format === 'oklch' ? closestTailwind.oklch : closestTailwind.hex}
+              </div>
             </div>
 
             {/* Color Picker */}
@@ -122,7 +149,7 @@ export function ColorPicker() {
 
             {/* Format Buttons */}
             <div className="flex flex-wrap gap-2 justify-center w-full">
-              {(['hex', 'rgb', 'hsl', 'hsb', 'tailwind'] as const).map((f) => (
+              {(['hex', 'rgb', 'hsl', 'hsb', 'oklch', 'tailwind'] as const).map((f) => (
                 <button
                   key={f}
                   onClick={() => setFormat(f)}
@@ -152,7 +179,7 @@ export function ColorPicker() {
 
         {/* Right Column: Tailwind Colors */}
         <div className="bg-white rounded-xl shadow-sm p-4">
-          <TailwindColors onColorSelect={setColor} selectedColor={color} />
+          <TailwindColors onColorSelect={setColor} selectedColor={color} format={format} />
         </div>
       </div>
     </div>