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.

Color Sort

Color

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.

—

Hex colors

Sort by

Direction

Colors: 11

#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.