Sorting

Sorting helps picker and browse UIs present palettes in a predictable order. It works particularly well with PaletteColor[] from colorscope/palette.

Columns5

import {
  getColorDisplay,
  getOklab,
  sortPalette,
  SORT_MODES,
} from "colorscope/sorting";

Functions

sortPalette

function sortPalette(
  colors: readonly PaletteColor[],
  mode: SortMode
): PaletteColor[]

Supported modes:

"hue": ascending hue angle
"oklab": brightest first using perceptual lightness
"darkness": darkest first

const byHue = sortPalette(CURATED_PALETTE, "hue");
const byLightness = sortPalette(CURATED_PALETTE, "oklab");
const byDarkness = sortPalette(CURATED_PALETTE, "darkness");

getOklab

function getOklab(color: PaletteColor): { L: number; a: number; b: number }

Read precomputed OKLab values when present, falling back to hex conversion when needed.

getColorDisplay

function getColorDisplay(color: PaletteColor): string

Resolve a reliable display string for rendering, preferring OKLab-derived hex when those channels are present.

Types

SortMode

type SortMode = "oklab" | "hue" | "darkness"

SORT_MODES

const SORT_MODES: Array<{ value: SortMode; label: string }>