Palette Sorter

Sort the colors in your palette by hue, brightness, or saturation. Organize your swatches for cleaner presentation and easier design workflow.

Enter Colors

Or load a preset:

What the Palette Sorter Does

Organize any color palette by sorting colors along a specific attribute: hue (color wheel position), brightness (perceived lightness), saturation (color intensity), or lightness (HSL L value). Choose ascending or descending order to arrange colors logically.

How Color Sorting Works

Each color is converted to HSL (Hue, Saturation, Lightness) and RGB values. Depending on your sort choice, the tool extracts the relevant value and arranges colors from low to high (ascending) or high to low (descending). For brightness, it uses the standard luminance formula: 0.299R + 0.587G + 0.114B.

Sort attribute breakdown

Hue (0-360°): Arranges colors around the color wheel — reds, oranges, yellows, greens, blues, purples, back to reds
Brightness (0-255): Perceived lightness using human vision weights. Green contributes most, blue least.
Saturation (0-100%): From gray/muted to vivid/intense. Low saturation = pastel or gray, high = vibrant.
Lightness (0-100%): HSL lightness value. 0% = black, 100% = white, 50% = pure color.

When Sorted Palettes Matter

Design System Documentation

A team is documenting their color tokens. Instead of listing colors in random order, they sort by lightness — creating a clear progression from lightest to darkest. Documentation readers can quickly find the shade they need.

Style Guide Creation

Someone is building a brand style guide. They sort their palette by hue to show the full spectrum of brand colors in rainbow order. The sorted display looks professional and helps stakeholders understand the color system.

Data Visualization Legends

A data viz designer needs to arrange categorical colors in a legend. Sorting by hue ensures adjacent legend items have distinctly different colors, making the legend easier to scan.

Gradient Creation

Someone wants to create a smooth gradient from their palette. They sort by lightness, and the resulting order reveals the natural progression — perfect for creating gradient stops or sequential color scales.

Accessibility Audits

Sorting by brightness reveals which colors might be problematic. If multiple colors cluster at similar brightness values, they may not have enough contrast for distinguishable UI elements.

Palette Analysis

A designer wants to understand their palette's characteristics. Sorting by saturation shows whether they're working with mostly muted or vibrant colors. Sorting by hue reveals gaps in their color coverage.

Choosing the Right Sort Attribute

Sort by Hue when...

You want rainbow order or need to group similar colors together. Great for showing color variety or organizing categorical palettes.

Sort by Brightness when...

You need colors arranged by perceived lightness. Best for creating visual hierarchies or ensuring readable text/background combinations.

Sort by Saturation when...

You want to separate muted/neutral colors from vibrant ones. Useful for identifying which colors are safe for backgrounds vs. accents.

Sort by Lightness when...

You need a clean light-to-dark progression. Ideal for creating shade scales, elevation systems, or sequential data visualization palettes.

Understanding the Output

Each sorted color displays its full HSL values plus brightness. This lets you verify the sort order and understand why colors ended up where they did.

Reading the color cards

#3b82f6
H: 217°  S: 91%  L: 55%  B: 130

H (Hue): Position on color wheel (0-360°)
S (Saturation): Color intensity (0-100%)
L (Lightness): HSL lightness (0-100%)
B (Brightness): Perceived luminance (0-255)

Export Options

CSS Variables

:root {
  --color-1: #ef4444;
  --color-2: #f59e0b;
  --color-3: #22c55e;
}

Sorted colors as CSS custom properties. Drop into your stylesheet.

JavaScript Array

["#ef4444", "#f59e0b", "#22c55e"]

Ready to import into React, Vue, or any JS project.

Frequently Asked Questions

Why do red and purple end up next to each other when sorting by hue?

Hue is circular — it wraps around at 360° back to 0°. Red is at 0°/360°, and purple/magenta is around 300-330°. In a circular sort, they're neighbors. The linear sort shows this as reds at the start and purples at the end.

What's the difference between brightness and lightness?

Lightness is the L in HSL — a simple average of max and min RGB values. Brightness uses weighted coefficients (0.299R + 0.587G + 0.114B) that match human vision sensitivity. Brightness better represents how light/dark a color appears to humans.

Can I sort by multiple attributes?

This tool sorts by one attribute at a time. For multi-level sorting (like hue first, then lightness within each hue), you'd need to sort in passes or use a more advanced tool.

Why did my sort order change when I switched from ascending to descending?

Ascending goes from low values to high (dark to light, unsaturated to saturated). Descending reverses this. Both are valid — choose based on whether you want to start with the "minimum" or "maximum" value.

How do I reset to the original order?

Click the Reset button to return to the original input order. Or reload your original colors — the tool doesn't modify your input, just displays a sorted version.

Can I save my sorted palette?

Use the Copy All button or export as CSS/JS. For persistent storage, use the Favorite Colors Manager or save the exported code in your project files.

What if two colors have the same sort value?

Colors with identical values for the sort attribute maintain their relative order from the input. This is called a "stable sort" — useful when you want predictable results.

When to Use This vs. Other Tools

Use this Palette Sorter when you need to organize an existing palette by a specific color attribute for documentation, analysis, or visual clarity.

Use the Color Scale Generator when you want to generate a new sorted scale from a single base color, not sort an existing multi-color palette.

Use the Palette Duplicate Finder when you want to identify and remove similar colors before sorting your palette.

Use the Gradient Palette Generator when you want to extract evenly-spaced colors from a gradient — the output is naturally sorted by the gradient progression.

Other Free Color Tools

Search tools