ColorPicker
MoleculeColor selection control with a 32-swatch preset palette plus optional hex input and native browser color picker for unlimited colors. M1 adds a HEX / RGBA / HSLA / HWB / OKLCH format-switcher with per-format input + copy. Pixel-identical EJS sibling at modules/ui/ColorPicker/ColorPicker.ejs. Used by RichTextEditor for text + highlight colors.
const [c, setC] = useState<string | null>('#3b82f6');
<ColorPicker label="Brand color" value={c} onChange={setC} showNoColor /><ColorPicker
value={c}
onChange={setC}
showHexInput={false}
showNativePicker={false}
/><ColorPicker
label="Background"
value={c}
onChange={setC}
swatches={[]}
showHexInput
showNativePicker
showNoColor
/><ColorPicker
label="Theme color"
value={c}
onChange={setC}
showFormatSwitcher
defaultFormat="hex"
showHexInput={false}
showNativePicker
/>
// onChange receives the value formatted in the active format:
// '#3b82f6' (HEX)
// 'rgb(59, 130, 246)' (RGBA)
// 'hsl(217.2, 91.2%, 59.8%)' (HSLA)
// 'hwb(217.2 23.1% 3.5%)' (HWB)
// 'oklch(0.6228 0.1808 257.84)' (OKLCH)
//
// Each tab has its own validated text input + a Copy button (faCopy → faCheck).