Curated Palette

The curated palette module generates a consistent picker grid from anchor rows. It is designed for product workflows where a stable set of swatches is more useful than arbitrary free-form color space sampling.

Lightness columns

5 columns, 65 total swatches

Neutral

Cool Grey

Sage

Taupe

Sand

Gold

Green

Teal

Blue

Purple

Pink

Red

Orange

import {
  ANCHOR_ROWS,
  buildCuratedPalette,
  CURATED_GRID_COLUMNS,
  CURATED_PALETTE,
} from "colorscope/palette";

Functions

buildCuratedPalette

function buildCuratedPalette(columns: number): PaletteColor[]

Interpolate each anchor row in OKLab space across the requested number of lightness columns.

const compact = buildCuratedPalette(3);
const defaultPalette = buildCuratedPalette(5);
const expanded = buildCuratedPalette(7);

Constants

CURATED_PALETTE

const CURATED_PALETTE: PaletteColor[]

Prebuilt default palette using CURATED_GRID_COLUMNS.

CURATED_GRID_COLUMNS

const CURATED_GRID_COLUMNS = 5

CURATED_HUE_COUNT

const CURATED_HUE_COUNT = 13

ANCHOR_ROWS

const ANCHOR_ROWS: Array<{
  family: string;
  hexes: [string, string, string, string, string];
}>

Each row defines a family such as "Neutral", "Sage", or "Blue" and five tonal anchors from light to dark.

Type

PaletteColor

interface PaletteColor {
  colorName: string | null;
  hex: string | null;
  hue: number;
  saturation: number;
  lightness: number;
  oklabL: number | null;
  oklabA: number | null;
  oklabB: number | null;
}

Use PaletteColor for picker UIs, curated grids, and sorted browse palettes. Unlike extracted colors, it does not carry proportion.