CMYK ↔ RGB ↔ HEX Color Converter
About Palette Sorter
The Color Palette Sorter & Harmony Reorganizer reorders color swatches by Hue (color wheel angle), Saturation (vibrancy), Perceptual Lightness (WCAG luminance), CIELAB Chroma, or Warmth/Coolness temperature.
How to Use Palette Sorter
Step 1
Paste a list of hex colors (comma-separated, newline-separated, or JSON array).
Step 2
Select sorting metric (e.g. Perceptual Lightness, Hue, or Saturation).
Step 3
Choose sort order (Ascending or Descending).
Step 4
Click "Copy Sorted Palette".
Practical Use Cases for Palette Sorter
Organizing Design Tokens from Darkest to Lightest
Sort an unordered list of brand colors by perceptual luminance to construct clean, accessible UI background and surface hierarchies.
Arranging Swatches into a Rainbow Hue Progression
Reorder messy color swatch sets by 0-360° hue angle for clean visual presentation in style guides and UI component libraries.
Input & Output Examples
Sorting Colors by Perceptual Luminance
`["#3b82f6", "#ffffff", "#000000", "#10b981", "#ef4444"]`
Sorted (Dark $\\rightarrow$ Light): `#000000` (0.00), `#ef4444` (0.21), `#3b82f6` (0.23), `#10b981` (0.39), `#ffffff` (1.00)
Key Features & Performance
- ✓Sorting criteria: Hue (0-360°), Saturation, Perceptual Lightness ($L^*$), Relative Luminance (WCAG), Chroma, and Warm-to-Cool temperature.
- ✓Drag-and-drop manual swatch reordering with live preview.
- ✓Exports sorted array in Hex, RGB, HSL, or CSS Custom Properties.
- ✓100% Client-Side memory execution.
- ✓1-Click Copy sorted palette.
Key Terminology & Definitions
Relative Luminance ($Y$)
The relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white according to ITU-R BT.709.
Hue Ordering
Arranging colors sequentially along the 360-degree spectral color wheel starting from Red (0°) through Green (120°) and Blue (240°).