Color List Sorter
Sort a list of hex colors by hue, lightness or saturation.
Overview
The Color List Sorter takes a freeform list of hex colours and reorders them by hue, lightness, saturation, luminance or perceptual lightness in OKLCH. It accepts comma-separated, newline-separated or whitespace-separated input and outputs a sorted swatch grid plus the rearranged hex string ready to paste back into your code.
Designers reach for it when consolidating brand palettes that grew organically, auditing a CSS custom-property file, or arranging swatches for a styleguide. Sorting by hue turns a messy bag of colours into a rainbow gradient that is far easier to scan and deduplicate by eye.
How it works
Each hex is parsed into sRGB, then converted into the working space for the chosen sort key. Hue sorting uses the HSL or OKLCH hue angle, lightness sorts on either HSL L or OKLCH L, saturation sorts on HSL S or OKLCH C, and the WCAG luminance key uses the relative luminance formula used by the contrast ratio.
Stable sorting is used throughout, so colours with identical primary keys preserve their original order. Achromatic greys (saturation zero) are grouped together at one end of hue sorts because their hue angle is mathematically undefined.
Examples
input : #cc3333, #33cc33, #3333cc, #cccc33
hue → #cc3333, #cccc33, #33cc33, #3333cc
light → #3333cc, #cc3333, #33cc33, #cccc33
oklch L → #3333cc, #cc3333, #cccc33, #33cc33
FAQ
Why are my greys all jumbled at the top?
Pure greys have no defined hue, so any hue-based sort places them arbitrarily. Sort by lightness instead, or pre-filter the achromatic entries.
Should I sort by HSL or OKLCH?
OKLCH gives a more visually even progression — colours of equal OKLCH lightness genuinely look equally bright. HSL is faster to compute and matches the way CSS hsl() reads, which is sometimes what you want when grouping CSS variables.
Does the tool deduplicate identical colours?
The sort is stable and preserves duplicates so you can see them. Run the output through a duplicate-line filter afterwards if you want a unique list.
What formats can I paste in?
Three-, four-, six- or eight-digit hex codes with or without leading #, separated by commas, semicolons, whitespace or newlines. Mixed separators are fine.
Can I sort named colours or rgb() strings?
Yes — the parser normalises common CSS forms to hex before sorting.