palette-shader demo

A dependency-free WebGL2 shader that visualizes a color palette by mapping a color space onto a plane, polar wheel, or interactive 3D solid, then snapping each pixel to the nearest palette color. Toggle the 3D view to explore the full color space as a rotatable cube or cylinder — drag to orbit and use the position slider to slice into the volume. Supports 30+ color models and eleven distance metrics, all running entirely on the GPU.

What is this for?

It shows you how a color palette distributes across "all possible colors." Each region of the wheel or grid represents a color — and whichever palette color is closest to it claims that region.

So if one of your palette colors only claims a tiny sliver, it lives very close to another color already in your palette — it's almost redundant. If it claims a large region, it's doing a lot of unique work.

How distinct each color is from the others
How balanced the palette is overall — even regions mean even coverage
Whether a new color is worth adding — if it doesn't carve out its own space, it's probably not pulling its weight

Common questions → click a row to apply settings
I want to know…	Color model	Distance metric
How my hue distribution looks	OKHsl Polar	OKLab
Which two colors are most similar	OKHsl	ΔE2000
Whether a new color is worth adding	OKHsl Polar	OKLab
How my palette reads on print	CIELab D50	CIELab D50
How close the colors look to a human eye	OKLch Polar	ΔE2000
What the palette looks like to a computer	HSL Polar	RGB

Install

npm install palette-shader

Usage

Minimal example — pass a container or append the canvas yourself.

import { PaletteViz } from 'palette-shader';
import { converter } from 'culori';

// colors must be [r, g, b] arrays with values in 0–1 (sRGB)
const toRGB = converter('rgb');
const c = (hex) => { const { r, g, b } = toRGB(hex); return [r, g, b]; };

// option A: pass a container, canvas is appended automatically
const viz = new PaletteViz({
  palette: ['#f2f0e5', '#4b80ca', '#b45252', '#a2dcc7'].map(c),
  container: document.querySelector('#app'),
  observeResize: true,
  colorModel: 'okhslPolar', // 'okhslPolar' | 'oklchPolar' | 'cielchPolar' | 'okhsl' | …
  distanceMetric: 'oklab',  // 'oklab' | 'oklrab' | 'deltaE2000' | 'cielabD50' | …
  axis: 'y',                // which axis the position slider controls
  position: 0,              // 0–1 slice position (0 = one extreme, 1 = other side)
  invertAxes: ['z'],        // invert one or more model axes
  outlineWidth: 0,          // transparent outline between regions (physical px). 0 = off
});

// option B: no container — place the canvas yourself
const viz = new PaletteViz({ palette, observeResize: true });
document.querySelector('#app').appendChild(viz.canvas);

// update live
viz.palette = [[1, 0, 0], [0, 1, 0], [0, 0, 1]];
viz.position = 0.3;
viz.outlineWidth = 2; // change at any time — no recompile while value stays > 0

// clean up
viz.destroy();

3D Usage

PaletteViz3D renders the full color space as an interactive 3D cube (or cylinder for polar models). Drag to orbit, use the position slider to slice.

import { PaletteViz3D, mat4RotateX, mat4RotateY, mat4Multiply } from 'palette-shader';

const viz3d = new PaletteViz3D({
  palette: ['#f2f0e5', '#4b80ca', '#b45252', '#a2dcc7'].map(c),
  container: document.querySelector('#app'),
  observeResize: true,
  colorModel: 'okhsv',
  distanceMetric: 'oklab',
  position: 1.0,       // 1 = full volume, 0 = fully sliced
  outlineWidth: 2,
});

// trackball rotation (wire up your own pointer events)
viz3d.rotate(0.01, 0.02); // dx, dy in radians

// or set the model matrix directly
viz3d.modelMatrix = mat4Multiply(mat4RotateX(0.4), mat4RotateY(0.6));

viz3d.destroy();

Notes

No runtime dependencies — uses raw WebGL 2. Colors are passed as [r, g, b] arrays (0–1 sRGB); use culori or any color library to convert from CSS strings. Color models and distance metrics are orthogonal — the model controls how the color space is rendered, the metric controls which palette color each pixel snaps to.

The outline width slider draws a transparent gap where regions meet, revealing whatever is behind the canvas. It uses a two-pass render: the first pass is identical in cost to no outline; the second pass is a tiny edge-detection shader with four texture reads per pixel — no extra color-space math.

The typeface is the open-source Iosevka. Created by David Aerne.