Color Picker
Color Picker is a trigger that shows the current color and opens a popover (native Popover API + CSS anchor positioning) with a grid of predefined colors, a native input type="color", and a hex text field. Use it in forms to choose a color with a manual hex-entry fallback. It is agent-native: it reflects state in stable attributes on the host (data-value, data-open, data-disabled), exposes the grid as role="listbox" with aria-selected and roving tabindex, and registers each live instance in window.__puraColorPickers, letting agents read and manipulate the value programmatically.
Preview
<div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
<label style="font:inherit">Brand color</label>
<pura-color-picker id="cp" value="#2563eb" label="Choose brand color"></pura-color-picker>
<span id="saida" style="font-family:monospace">#2563eb</span>
</div>
<script type="module">
import "/pura/lib/color-picker.js";
const cp = document.getElementById("cp");
const saida = document.getElementById("saida");
cp.addEventListener("change", (e) => { saida.textContent = e.detail.value; });
cp.addEventListener("input", (e) => { saida.textContent = e.detail.value; });
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | #000000 | Current color in hex (e.g. "#2563eb"). Accepts #rgb or #rrggbb forms and is normalized to lowercase #rrggbb; invalid values fall back to #000000. Reflected back to the attribute on change. |
disabled | boolean | false | Disables the trigger and blocks interaction (pointer-events none, reduced opacity). |
label | string | Choose color | Accessible name (aria-label) for the swatch button. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/color-picker.js"></script>import "./pura/lib/color-picker.js";