Overview
Introduction
This tool sorts a list of hex colors into a meaningful order, entirely in your browser, with no image required.
It's useful whenever you have a jumbled palette and want it organized by hue, brightness, or saturation for a cleaner presentation.
What Is Color Sorter?
A pure color-math tool: it parses each hex code you provide into RGB, computes its hue, saturation, lightness, or luminance, and sorts the list by that value.
It works entirely on the color codes themselves — there's no pixel data or image file involved.
How Color Sorter Works
Each hex color is converted to RGB, then to HSL (for hue, saturation, and lightness) or evaluated with weighted luminance coefficients (for the luminance option). The full list is sorted by whichever value you chose, ascending by default or descending if requested.
Because sorting only reorders the input list, every original color is returned exactly as entered — no color values are altered.
When To Use Color Sorter
Use it to arrange a design system's color tokens by lightness for a clean visual ramp, to sort a rainbow of tags or categories by hue, or to organize colors extracted from an image into a readable order.
It pairs naturally with the Palette Extractor: extract an image's top colors, then sort them for a cleaner presentation.
Often used alongside Color Mixer, PNG Color Palette Extractor and Color Blender.
Features
Advantages
- Works on plain hex codes, so no image upload is needed at all.
- Four different sort criteria cover the most common ways designers organize color.
- Runs entirely client-side; nothing you enter is sent anywhere.
Limitations
- It only reorders colors; it doesn't merge duplicates or remove near-identical entries.
- Sorting by hue alone can group very different colors (a dark navy and a bright sky blue) next to each other since hue ignores lightness and saturation.
Examples
Best Practices & Notes
Best Practices
- Sort by luminance rather than lightness when the visual result needs to match perceived brightness closely (for example accessibility-related ordering).
- Sort by hue when arranging a palette for a rainbow-style visual spectrum.
Developer Notes
The RGB-to-HSL conversion and luminance calculation are pure functions with no DOM dependency, and the sort itself uses a plain numeric comparator over a precomputed key per color so it runs in O(n log n) regardless of which criterion is chosen.
Color Sorter Use Cases
- Arranging a design system's color tokens into a visual light-to-dark ramp
- Sorting colors extracted from an image into a clean, readable order
- Organizing category or tag colors by hue for a rainbow-style legend
Common Mistakes
- Expecting hue-sorted colors to also be grouped by brightness — hue sorting ignores lightness and saturation entirely.
- Pasting shorthand 3-digit hex codes; only full 6-digit hex codes are accepted.
Tips
- Combine with the Color Palette Extractor: extract an image's colors, then sort the result for a presentable, ordered swatch list.
- Try both lightness and luminance sorting on the same list — they often produce noticeably different orders for saturated colors.