Sort any list of colors by hue, lightness, chroma or WCAG luminance. Sorting runs in OKLCH so "lightness" means perceived lightness, hue sorting produces a clean rainbow with grays grouped at the end, and the before/after strips make the effect obvious at a glance.
Settings
Generated locally in your browser — your settings and results never leave this page.
Order reveals structure
An unsorted palette is a bag of values; sorted, it becomes legible. Lightness order exposes the ramp structure (and its gaps); hue order lays colors on the wheel (and exposes near-duplicates as neighbors); chroma order separates the quiet workhorses from the loud accents. Sorting is the cheapest analysis a color list can receive, which is why it belongs early in every palette audit.
Sorting that matches eyes, not bytes
Most color sorters order by channel arithmetic and produce “light to dark” sequences with visible stumbles — because channel math is not appearance. This sorter keys on OKLCH: lightness sorts by perceived lightness, chroma by perceived strength, hue by wheel angle. Grays get special handling in hue mode — having no meaningful angle, they collect at the end ordered by lightness instead of scattering pseudo-randomly through the rainbow (the classic sorter glitch).
The dedup workflow
Design systems accumulate near-duplicate tokens the way drawers accumulate pens. Sorted by hue or lightness, duplicates become adjacent — visually obvious in the after-strip. Confirm suspicions with the Color Difference Calculator: ΔE under 2 between two tokens means users cannot tell them apart and one should retire. A sort-scan-measure pass over a tokens file routinely shrinks it by a fifth.
In-pipeline behavior
The sorter reorders and nothing else: values pass through exactly as parsed, with the JSON export preserving original spellings beside normalized hex. Paste from a tokens file, sort, paste back — or chain onward: sorted output feeds the Contrast Matrix in readable order, and the CSS Color Format Converter normalizes notation after the order is settled. Small tool, load-bearing position.
One list, four orderings
The same six colors under each sort key, showing how differently the orderings read:
| Sort key | Resulting order |
|---|---|
| Hue | #daa520 → #6b8e23 → #3cb371 → #4682b4 → #9370db → #dc143c |
| Lightness | #dc143c → #4682b4 → #6b8e23 → #9370db → #3cb371 → #daa520 |
| Chroma | #4682b4 → #6b8e23 → #3cb371 → #daa520 → #9370db → #dc143c |
| Luminance | #dc143c → #4682b4 → #6b8e23 → #9370db → #3cb371 → #daa520 |
Hue order tells the wheel story, lightness order the ramp story, chroma order the loudness story — and luminance order nearly matches lightness while diverging exactly where WCAG’s green-heavy weighting disagrees with perception. Choosing a sort key is choosing which of these four stories your audit needs told.
How to use the Palette Sorter
- Paste your colors in any CSS notation, comma or newline separated.
- Choose the sort key – hue, lightness, chroma or WCAG luminance – and direction.
- Compare before/after strips; copy the sorted list.
Frequently asked questions
Why would I sort a palette at all?
Order is information: sorted by lightness, a palette becomes a ramp with obvious role assignments; by hue, a rainbow that exposes gaps and near-duplicates; by chroma, a quiet-to-loud spectrum separating neutrals from accents. Unsorted palettes hide all three stories.
What does sorting by hue do with grays?
Grays have no meaningful hue, so instead of scattering them pseudo-randomly (the classic sorter bug), they collect at the end ordered by lightness. Chromatic colors first in wheel order, then the neutral tail.
Which sort key equals "dark to light as humans see it"?
OKLCH lightness – the default and the honest one. WCAG luminance is close but weighted for the contrast formula (green-heavy); channel-average tricks are what other tools do and why their "light to dark" sometimes looks shuffled.
Does sorting change any of the colors?
Never – pure reordering. Input values are echoed exactly as parsed (the JSON export preserves your original strings alongside normalized hex), so the sorter is safe in the middle of any pipeline.
How many colors can I sort at once?
Up to 100 per run – enough for a full design-token dump. Beyond that, split by category first; a 300-color sort is usually a symptom that dedup (or a hard conversation about the design system) should come first.
Can sorting help find duplicate-ish colors?
Very effectively: after a hue or lightness sort, near-duplicates sit adjacent where they are obvious. Verify suspicions with the Color Difference Calculator – ΔE under 2 between two tokens means one of them is redundant.
What notations can I paste in?
Anything the site parses: hex, rgb(), hsl(), named colors, oklch() and friends, freely mixed. One color per line or comma-separated both work – paste straight from your tokens file.
Pull a palette out of an image
An ordered palette taken from a photograph or screenshot, with its contrast checked.
- Color Palette From ImageExtract the dominant colours from the image.
- Palette Sorter you are hereOrder them so the palette reads as a scale rather than a jumble.
- Palette Contrast MatrixCheck which of the extracted colours can safely sit on each other.
