Halo

A round saturation/lightness picker with the little hue smile arc from Materia.

Color

#d69e8a

Current

Hex: #d69e8a
HSL: 16 48 69

Install

npm install @patternmode/halo

import { HaloPicker, type HaloColor } from "@patternmode/halo";
import "@patternmode/halo/styles.css";

export function AccentColorField() {
  const [color, setColor] = useState<HaloColor>({ h: 16, s: 48, l: 69 });

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

Core API

`HaloPicker`

Controlled HSL picker with a circular saturation/lightness pad and hue arc.

value: { h: number; s: number; l: number }Controlled HSL value.
onChange: (value: HaloColor) => voidCalled with the next HSL value after pad or arc pointer input.
showValue: booleantrueShows the computed hex output beneath the picker.
label: string"Color"Hidden legend used when no aria-label is supplied.

`Utilities`

Pure helpers for custom readouts and non-standard renderers.

hslToHex: (h, s, l) => stringConverts HSL values to a clamped hex color.
getHaloPadHandlePosition: (s, l) => { x, y }Maps saturation/lightness values to pad handle coordinates.
getHaloHueHandlePosition: (h) => { x, y }Maps hue to the smile arc handle coordinates.