Color Sort
Reads any whitespace- or newline-separated list of hex colors (with or without leading #, 3- or 6-digit), dedupes them, and sorts the result by your chosen criterion. Near-greyscale entries (saturation under 5%) are pulled out of the hue ordering and grouped at the start, sorted by lightness, so they don't scatter randomly across the rainbow. Each row shows the swatch, the hex value, and the underlying HSL.
- #ef4444h 0° · s 84% · l 60%
- #f97316h 25° · s 95% · l 53%
- #eab308h 45° · s 93% · l 47%
- #22c55eh 142° · s 71% · l 45%
- #14b8a6h 173° · s 80% · l 40%
- #f8fafch 210° · s 40% · l 98%
- #64748bh 215° · s 16% · l 47%
- #3b82f6h 217° · s 91% · l 60%
- #0f172ah 222° · s 47% · l 11%
- #8b5cf6h 258° · s 90% · l 66%
- #ec4899h 330° · s 81% · l 60%
Duplicates are dropped. Near-greys (S < 5%) bubble to the front of a hue sort, ordered by lightness.
How to use
- Paste hex colors — one per line, comma-separated, or any mix.
- Pick which axis to sort along and ascending vs descending.
- Copy the sorted list back out.
Frequently asked questions
- Why does grey sit at the front when sorting by hue?
- Hue is undefined for pure greys (saturation = 0) and unstable for near-greys. Grouping low-saturation colours up front and sorting them by lightness gives a more predictable result than letting them land at an arbitrary hue.
- Hue vs luma sort — which should I use?
- Hue groups colours by their family (all reds, then oranges, then yellows…). Luma sorts by how bright the eye perceives them using Rec. 709 weights — better for stacking colours on a dark/light background by contrast.
Related tools
Tailwind Color Palette
The full Tailwind CSS default palette — 22 hues × 11 shades, 50 through 950 — with click-to-copy as Tailwind class, HEX, or rgb().
Color Palette Generator
Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.
Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
CSS Named Colors
All 147 CSS / X11 named colors with HEX, RGB, and a live swatch — searchable and grouped by hue.
Wavelength to Color Converter (nm → sRGB)
Convert a light wavelength in nanometres (380–780 nm — the visible spectrum) to an approximate sRGB color, with a clickable rainbow gradient bar and reference Fraunhofer absorption lines from real solar spectroscopy.
Random Color Generator
Generate a grid of random colors in HEX, RGB or HSL — pick how many, copy any value with one click, and regenerate instantly for design inspiration.