Color wells
A color well lets people adjust the color of text, shapes, guides, and other onscreen elements. It wraps a native <input type="color">, so activating it opens the platform color picker.
Preview
The first well has no color yet: it shows the spectrum disc. Click it, pick a color, and it flips to the swatch state. The second well starts pre-set.
Capsule well
The capsule well always shows a color, so it has no empty state. It is a 2:1 capsule filled at rgba(0,0,0,0.08) (rgba(255,255,255,0.07) in dark mode) with the color inset 3px all round, and a 1px hairline at rgba(0,0,0,0.10) just inside the swatch edge so light colors still hold their shape.
Five sizes: 32×16, 40×20, 48×24 (the default), 56×28, and 72×36, via .p-colorwell-mini, .p-colorwell-small, the default, .p-colorwell-large, and .p-colorwell-xlarge. While the color picker is open the capsule body turns solid accent around the swatch (.p-active, which colorwells.js sets while the picker is up). Disabled dims the swatch to 50% and leaves the body alone.
Anatomy
The well is a 28px circle with two states. Empty: the whole disc fills with the rainbow (a conic gradient running red, magenta, blue, green, yellow, back to red at 72 degree stops) under a white radial highlight that fades from full white at the center to transparent at the edge. Set: the disc collapses to a 3px rainbow ring, a 2px gap, and an 18px dot showing the chosen color.
| Class | Role |
|---|---|
.p-colorwell | The well. A <label> wrapping <input type="color">, 28×28. Spectrum disc until a color is chosen. |
.p-colorwell-capsule | The capsule well. Add to .p-colorwell; sizes -mini, -small, -large, -xlarge. |
.p-active | Capsule only: the picker-open look. |
.p-colorwell-set | The swatch state. colorwells.js adds it on selection; add it yourself for wells with a known starting color. |
--p-colorwell-color | The dot or swatch color. colorwells.js keeps it synced to the input. |
Behavior
Include colorwells.js: picking a color flips the well to the swatch state and keeps the dot synced from then on. Capsule wells stay synced from load, and wear .p-active from the click that opens the picker until the change or blur that closes it. For a well that should start with a color, add .p-colorwell-set in the markup (with --p-colorwell-color matching the input value for the no-JS case).
States
Focus shows the focus band color, a 3.5px ring at rgba(0,136,255,0.5) with a 1px offset, following the circle. The capsule uses the full focus band, 3.5px outside plus 1px inside. A disabled input (or .p-dimmed) drops the well to 50% opacity and ignores the pointer. There is no hover state; the native control does not have one either.
Dark mode
The circular well does not change: the rainbow and the chosen color are absolute values in both appearance modes. The capsule body moves to rgba(255,255,255,0.07); its swatch hairline stays at 10% black.
Code
<!-- No color yet: spectrum disc, flips on first pick -->
<label class="p-colorwell">
<input type="color" value="#FF0000" aria-label="Pick a color" />
</label>
<!-- Starts with a chosen color -->
<label class="p-colorwell p-colorwell-set" style="--p-colorwell-color: #0088FF;">
<input type="color" value="#0088FF" aria-label="Highlight color" />
</label>
<!-- Capsule well -->
<label class="p-colorwell p-colorwell-capsule" style="--p-colorwell-color: #34C759;">
<input type="color" value="#34C759" aria-label="Fill color" />
</label>The label wrapper keeps the whole circle clickable and the input focusable. Always give the input an aria-label; the control has no visible text.