<notatio-color-slider>

#rrggbb -> [r, g, b] in 0..1. */ export function rgbOf(hex: string): [number, number, number] | undefined { const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim()); if (!m) return undefined; const n = Number.parseInt(m[1], 16); return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; }

/** [r, g, b] in 0..1 -> #rrggbb. */ export function hexOf(rgb: readonly [number, number, number]): string { const c = (v: number): string => Math.round(Math.max(0, Math.min(1, v)) * 255) .toString(16) .padStart(2, "0"); return #${c(rgb[0])}${c(rgb[1])}${c(rgb[2])}; }

/** <notatio-color-slider name="c" value="#3451b2"> -- a swatch that opens the colour picker, Wolfram's ColorSlider. The binding _c is RGBColor(r, g, b) with the parts in 0..1, which is what a plot's colour attribute or a template can read.

Stories in the playground·packages/notatio-lit/src/notatio-color-slider.ts· in Vue: <ColorSlider>

Attributes

Attribute	Type	Default	Notes
name	string	""	The binding this swatch drives: name="c" fills the wildcard _c.reflects
value	string	"#3451b2"	The starting colour, #rrggbb.