Color sorter
Paste your colors one per line, pick what to sort by and the direction. Your original text of each color is kept.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Paste one color per line.
- Choose Hue, Lightness, Saturation or Luminance.
- Choose ascending or descending, and copy the sorted list.
Example
#0000ff, #ff0000, #00ff00 sorted by hue gives red (0°), green (120°), blue (240°). Sorted by lightness, ascending, #ffffff, #000000, #808080 becomes black, grey, white.
Tips
- To lay out a palette as a rainbow, sort by hue; for a light-to-dark ramp, sort by lightness.
- Sort by luminance before checking contrast: neighbours then have the most similar luminance.
- Blank lines are ignored.
Frequently asked questions
What does each sort key mean?
Hue is the HSL hue angle (red 0°, green 120°, blue 240°). Lightness is OKLab L, a perceptual lightness. Saturation is HSL saturation. Luminance is the WCAG relative luminance used for contrast ratios.
Where do greys go when sorting by hue?
Greys have no hue, so they come first in ascending order, ordered from dark to light. Reverse the order to put them last.
Why does lightness differ from luminance?
Luminance is linear light, so mid greys already have low values: #808080 is about 0.22. OKLab lightness is spaced to look even to the eye, where the same grey is about 0.6.
What happens to ties?
Colors with an equal key stay in the order you entered them, except that hue ties are ordered by lightness.
Which formats can I paste?
3 or 6 digit HEX, rgb(), hsl(), oklch(), oklab(), lch(), lab() and CSS color names. Each line is returned exactly as you typed it.