HueOrder is a modern color palette organizer and palette-maker for colors, built with React, TypeScript, and Vite. It helps designers, crafters, and color enthusiasts explore and organize palettes with perceptual sorting, image-based sampling, and thread matching.
- Loads color data from
Data/Colors.json - Displays a responsive, scrollable color grid
- Sorts palettes by hue, lightness, saturation, and perceptual color similarity
- Lets users copy colors in
HSL,RGB, orHEX - Supports exporting palette order as CSV and generating PDF-ready output
- Includes tools to build palettes from images and match image pixels to thread colors
- Load thread color palettes from JSON data
- Sort colors using multiple perceptual orders:
HueColor WheelLightnessLightness + HueSaturationSort by Color(advanced perceptual sorting)Original Order
- Search colors by number or HSL value
- Hover to preview and click to copy values
- Export order as CSV for production workflows
- Open a print-ready PDF export modal
- Upload an image and sample colors directly from it
- Adjust the sampling area for more accurate color extraction
- Enter colors manually using
HEX,RGB, orHSL - Edit and renumber palette items
- Export user-created palettes as JSON
- Upload a reference image
- Hover to preview pixel color on the canvas
- Click to pick a pixel and match it against thread colors
- Find the top nearest thread colors using perceptual
deltaEmatching - Copy matched thread color values instantly
HueOrder is ideal for anyone who needs precise color organization and matching:
- embroidery and thread-based design
- textile and craft planning
- digital palette creation and moodboard work
- print, packaging, and branding color exploration
- creative teams looking for visual color order and palette consistency
npm installnpm run devOpen http://localhost:5173 after starting the development server.
Palette data lives in Data/Colors.json as an array of thread colors with number and hsl values.
Made with ❤️ to serve humanity