Skip to content
AZ Tools

Color Sort

Paste a list of hex colors and sort them by hue, saturation, lightness, or perceived brightness — useful for tidying a design-token palette.

Sort by
Direction
Colors: 11
  • #ef4444
  • #f97316
  • #eab308
  • #22c55e
  • #14b8a6
  • #f8fafc
  • #64748b
  • #3b82f6
  • #0f172a
  • #8b5cf6
  • #ec4899

Duplicates are dropped. Near-greys (S < 5%) bubble to the front of a hue sort, ordered by lightness.

How to use

  1. Paste hex colors — one per line, comma-separated, or any mix.
  2. Pick which axis to sort along and ascending vs descending.
  3. Copy the sorted list back out.

About this tool

Show

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.

The greyscale rule exists because hue is undefined when there is no colour to speak of. A pure grey has no angle on the wheel, and the value a converter reports for it is an artefact of which channel happened to round highest, so sorting greys by hue interleaves them arbitrarily with the saturated colours. Pulling anything under 5% saturation into its own group at the front is a convention rather than a law, and a palette full of muted, barely-tinted colours will have entries that sit just either side of that line.

Sorting by hue puts red at both ends, because hue is an angle and the list is not. A set of reds spanning the wrap point splits into two clumps, one at each end of the output, which looks like a bug and is the flat projection of a circle. There is no ordering that avoids this; the only fix is to know where your palette starts.

Deduplication is exact and works on the parsed value, so #FFF, #ffffff and #FFFFFF collapse to one entry. Colours that merely look identical do not: two hex values a single step apart are different entries even though no screen will show a difference between them. If you are trying to find visually redundant colours in a palette, a perceptual distance measure is the right instrument.

The sort is on sRGB values as written, with no colour management. A palette authored in a wider gamut will sort by the numbers it was written with rather than by how it renders.

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.

Two colours look equally bright to me but sort far apart. Why?

HSL lightness is arithmetic on the RGB numbers rather than a measure of how bright a colour appears. A saturated yellow and a saturated blue can carry the same lightness value while one is obviously the brighter of the two, because the eye is far more sensitive to green than to blue. Sort by perceived brightness whenever the order has to match what you see.

Can I sort a list that mixes hex with rgb() or colour names?

Convert the other notations to hex first — the input here is hex only. That conversion is worth doing anyway, because it exposes duplicates hiding behind different spellings: #ff0000, rgb(255, 0, 0) and red are one colour written three ways, and only the hex form is recognised as a repeat and removed.

Related tools