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.
- #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.
About this tool
ShowHide
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
Tailwind Color Palette
The full Tailwind CSS v4 default palette — 22 hues × 11 shades, 50 through 950 — with click-to-copy as Tailwind class, HEX, or rgb().
Color & CSS
Color Palette Generator
Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.
Color & CSS
Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
Color & CSS
CSS Named Colors
All 147 CSS / X11 named colors with HEX, RGB, and a live swatch — searchable and grouped by hue.
Color & CSS
Wavelength to Color Converter (nm → sRGB)
Convert a light wavelength in nanometres (380–780 nm) to an approximate sRGB color, with a clickable rainbow bar and Fraunhofer reference lines.
Color & CSS
Random Color Generator
Generate a grid of random colors in HEX, RGB or HSL — pick how many, copy any value with one click, and regenerate instantly for design inspiration.
Random