About

Arranging colors in a visually coherent order is a non-trivial computational problem. A naive alphabetical sort of hex codes produces chaotic sequences because hexadecimal notation encodes R, G, B channels sequentially, not perceptually. Human vision perceives color difference non-linearly. Two colors with a Euclidean RGB distance of 50 may look identical, while another pair at the same distance looks jarringly different. This tool converts colors into perceptually uniform spaces (HSL, CIE LAB) before sorting. The LAB-based perceptual sort uses a nearest-neighbor heuristic on ΔE^* distances, approximating the traveling salesman problem to produce the smoothest possible gradient from an arbitrary set of colors.

Incorrect color ordering in UI design causes visual noise, reduces scannability, and breaks aesthetic coherence in design systems. This is especially critical when building theme palettes with 20+ tokens. The step-sort algorithm groups colors into 8 hue bands and sorts within each band by luminance, mimicking how physical paint swatches are organized. Note: perceptual sorting assumes a D65 illuminant and a 2° standard observer. Results may not match appearance under non-standard lighting conditions.

Formulas

Relative luminance per WCAG 2.1 (used for luminance sort):

Y = 0.2126R_lin + 0.7152G_lin + 0.0722B_lin

where each linearized channel is computed as:

C_lin =

{

C_sRGB12.92 if C_sRGB ≤ 0.04045(C_sRGB + 0.0551.055)^2.4 otherwise

CIE LAB perceptual distance between two colors:

ΔE^* = √(L₁ − L₂)² + (a₁ − a₂)² + (b₁ − b₂)²

where L^* is perceptual lightness (0 - 100), a^* is the green - red axis, and b^* is the blue - yellow axis. RGB → LAB conversion goes through CIE XYZ with D65 reference white X_n = 95.047, Y_n = 100.0, Z_n = 108.883.

HSL hue extraction from RGB:

H = 60° ×

{

G − BΔ mod 6 if max = RB − RΔ + 2 if max = GR − GΔ + 4 if max = B

where Δ = max(R,G,B) − min(R,G,B). Step sort quantizes H into 8 bands of 45° each, then sorts by L within each band.

Reference Data

Sort Method	Color Space	Primary Key	Secondary Key	Best For	Time Complexity
Hue	HSL	H (0 - 360°)	L	Rainbow gradients	O(n log n)
Saturation	HSL	S (0 - 100%)	H	Vivid → muted ordering	O(n log n)
Lightness	HSL	L (0 - 100%)	H	Dark → light ramps	O(n log n)
Luminance	RGB (linear)	Y (0 - 1)	-	Accessibility contrast	O(n log n)
Red Channel	RGB	R (0 - 255)	G, B	Warm tone isolation	O(n log n)
Green Channel	RGB	G (0 - 255)	R, B	Natural/organic tones	O(n log n)
Blue Channel	RGB	B (0 - 255)	R, G	Cool tone isolation	O(n log n)
Step Sort	HSL	Hue band (8 groups)	L within band	Paint swatch layout	O(n log n)
Perceptual (ΔE*)	CIE LAB	Nearest ΔE* neighbor	-	Smoothest visual gradient	O(n²)
Reverse	Any	Current index (desc)	-	Flip current order	O(n)
Shuffle	-	Fisher-Yates random	-	Randomization	O(n)

Frequently Asked Questions

Hex notation encodes colors as concatenated R, G, B channel bytes. Lexicographic sorting treats this as a single base-16 number, meaning #0000FF (pure blue) sorts before #00FF00 (pure green) and #FF0000 (pure red). The result interleaves hues chaotically because the encoding does not map to any perceptual color axis. Sorting by HSL hue or CIE LAB distance produces visually meaningful sequences.

Hue sort arranges colors along the color wheel (0-360°) and works well for rainbow-like palettes with varied hues. It fails with near-neutral colors (grays, whites, blacks) because their hue values are arbitrary. Perceptual sort using CIE LAB ΔE* minimizes the visual jump between adjacent colors regardless of saturation or lightness. Use it when your palette contains a mix of chromatic and achromatic colors, or when you need the smoothest possible gradient for data visualization.

Step sort divides the 360° hue wheel into 8 equal bands of 45° each: red (0-45°), orange-yellow (45-90°), yellow-green (90-135°), green (135-180°), cyan (180-225°), blue (225-270°), purple (270-315°), and magenta (315-360°). Within each band, colors are sorted by lightness (dark to light). Colors with saturation below 10% are classified as neutral and placed in a separate group sorted by lightness only. This mimics physical paint swatch organization found in hardware stores.

The tool caps input at 500 colors to maintain responsive drag-and-drop interaction. Sorting algorithms run in O(n log n) time for most methods, but perceptual ΔE* sort uses an O(n²) nearest-neighbor heuristic. At 500 colors this means up to 250,000 distance calculations. For sets above 100 colors, sorting is offloaded to a Web Worker to prevent UI thread blocking. If you need to sort thousands of colors, export the sorted result as JSON and process programmatically.

Achromatic colors (where R = G = B) have undefined hue in HSL space. Most implementations assign H = 0° by default, which places all grays in the red band. This tool detects colors with saturation below 2% and assigns them a synthetic hue of -1, forcing them to the beginning or end of the sorted array. For best results with gray-heavy palettes, use luminance sort or step sort, which handles neutrals explicitly.

Yes. Input hex colors are assumed to be in sRGB color space. The tool applies inverse sRGB companding (gamma decoding) before converting to linear RGB, then transforms to CIE XYZ using the sRGB matrix with D65 illuminant reference white (X = 95.047, Y = 100.0, Z = 108.883). The XYZ values are then converted to LAB using the standard cube-root transfer function with a linear segment below ε = 0.008856. This ensures ΔE* values are perceptually meaningful.