Briolette

A spinnable geodesic color sphere. At rest it shows the whole color universe; each selection repaints the facets with similar but distinct OKLab neighbors of your color.

Drag or use arrow keys to spin. Select a facet to refine the colors around it. Select the pinned facet again to clear.

Color

#d69e8a

—

Cut

Seams

Install

npm install @patternmode/briolette

import { BriolettePicker } from "@patternmode/briolette";
import "@patternmode/briolette/styles.css";

export function AccentColorField() {
  const [color, setColor] = useState<string | null>(null);

  return (
    <BriolettePicker
      aria-label="Accent color"
      value={color}
      onChange={setColor}
    />
  );
}

Core API

`BriolettePicker`

Controlled hex picker rendered as a spinnable geodesic sphere. Selecting a facet glides it to the center and repaints the sphere with similar but distinct OKLab neighbors — hue rotates around the anchor, lightness shifts into its headroom, chroma swings with distance, and neutral anchors bloom into tints. Selecting the pinned facet again unsets the value.

value: string | nullControlled hex color value, or null when nothing is selected. Supplying a hex from outside re-anchors the sphere around the nearest facet and glides it to center.
onChange: (value: string | null) => voidCalled with the facet's hex color on selection, or null when unset.
density: "coarse" | "base" | "fine" | "brilliant""base"Facet density of the sphere — coarse is 20 facets, base is 80, fine is 180, brilliant is 320. Changing the cut animates: the finer geometry grows out of the coarser one. Seam width scales with the cut.
seamOpacity: number1Seam visibility from 0 (a seamless gem) to 1 (full seams). Strokes blend toward each facet's own fill, so edges stay crack-free at every opacity.
seamColor: stringSeam color between facets. Defaults to the canvas white.
label: string"Color"Accessible name for the sphere stage.
showValue: booleantrueShows the selected hex output beneath the sphere.
size: number280Rendered sphere size in pixels.

`Utilities`

Pure geometry and palette helpers, computed with @instruments/colorscope, for custom renderers.

buildBrioletteFaces: () => BrioletteFace[]Builds the 80 facets of the frequency-2 geodesic icosahedron.
projectBrioletteFaces: (faces, orientation) => BrioletteProjectedFace[]Rotates, culls, and projects facets into SVG polygon points.
buildBriolettePalette: (faces, view) => string[]Computes every facet's hex for the universe or a refinement view.
brioletteUniverseColor: (direction) => stringMaps a facet direction to the at-rest color universe.