Colour palette sorter — order colours by hue, lightness, luminance or chroma

How to use the colour sorter

1. Paste your colours into Colours, one per line or separated by commas.
2. Choose Sort by: Hue, Saturation, Lightness (HSL), Luminance (WCAG), Perceived lightness (OKLCH L), Chroma (OKLCH C), Hue (OKLCH) or Step sort (smooth rows).
3. Pick Ascending or Descending.
4. Keep Remove duplicates ticked unless you need repeats.
5. Copy the sorted HEX list under Sorted, or use the swatch row.

What it does and when to use it

Colour lists grow messy: tokens added over years, colours pulled from a stylesheet, a client’s brand sheet in random order. Sorting them makes duplicates, gaps and near-twins easy to spot. A sorted list also reads better in documentation and in swatch panels.

The best order depends on the question you are asking. To build a light-to-dark ramp, sort by perceived lightness. To see which colours are vivid and which are muted, sort by chroma. To lay out a swatch library, sort by hue. When two colours look almost the same after sorting, measure them with the colour distance calculator. To find which pairs of the sorted set work as text and background, paste it into the contrast grid. If you need names for the colours, the colour name finder gives the closest CSS keyword.

How it works

Each colour is read and converted to HSL, OKLCH and WCAG relative luminance.

• Hue sorts by HSL hue, greys first, ties broken by lightness. Hue (OKLCH) does the same with OKLCH hue.
• Saturation and Lightness (HSL) sort by those HSL values, ties broken by hue.
• Luminance (WCAG) uses 0.2126 R + 0.7152 G + 0.0722 B on linear-light values.
• Perceived lightness and Chroma use OKLCH L and C.
• Step sort follows Alan Zucconi’s method: eight 45° hue buckets, then brightness, with every other bucket reversed so rows flow smoothly.

Entries that tie on every key keep their original order.

Worked examples

These are the sorter’s own outputs.

Yellow, blue and grey by two kinds of lightness. With Lightness (HSL) the order is #ffff00, #0000ff, #808080: yellow and blue tie at 50%. With Luminance (WCAG) it becomes #0000ff, #808080, #ffff00, which matches what you see.

Duplicates in different notations. “red, #f00, rgb(255 0 0), navy” sorted by hue gives Sorted (2): #ff0000 and #000080.

The default eight colours by hue. #ef4444, #f97316, #eab308, #22c55e, #f8fafc, #3b82f6, #0f172a, #a855f7. The two slate neutrals sit among the blues because they carry a slight blue hue.

Limits and tips

• Transparency is ignored in the sort keys.
• Text that is not a colour is skipped silently, but ordinary words that are CSS names, such as tan or linen, are read as colours. Check the count in the Sorted label.
• Sorting runs in your browser.