diff --git a/app/(app)/pastel/names/page.tsx b/app/(app)/pastel/names/page.tsx
index 1006621..1465e68 100644
--- a/app/(app)/pastel/names/page.tsx
+++ b/app/(app)/pastel/names/page.tsx
@@ -6,6 +6,7 @@ import { Input } from '@/components/ui/Input';
 import { Select } from '@/components/ui/Select';
 import { useNamedColors } from '@/lib/pastel/api/queries';
 import { Loader2 } from 'lucide-react';
+import { parse_color } from '@valknarthing/pastel-wasm';
 
 export default function NamedColorsPage() {
   const [search, setSearch] = useState('');
@@ -24,9 +25,13 @@ export default function NamedColorsPage() {
 
     if (sortBy === 'name') {
       colors.sort((a, b) => a.name.localeCompare(b.name));
+    } else if (sortBy === 'hue') {
+      colors.sort((a, b) => {
+        const infoA = parse_color(a.hex);
+        const infoB = parse_color(b.hex);
+        return infoA.hsl[0] - infoB.hsl[0];
+      });
     }
-    // For hue sorting, we'd need to convert to HSL which requires the API
-    // For now, just keep alphabetical as default
 
     return colors;
   }, [data, search, sortBy]);