Color input

The native <input type="color">, restyled — no JavaScript. Add .re-color and the swatch gets a framed, rounded footprint sized from the control-height scale; clicking it opens the browser’s own colour picker, which owns the value.

Basic

Live example

<div class="row">
  <input type="color" class="re-color" value="#2563eb" aria-label="Accent colour" />
  <input type="color" class="re-color" value="#16a34a" aria-label="Success colour" />
  <input type="color" class="re-color" value="#dc2626" aria-label="Danger colour" />
  <input type="color" class="re-color" value="#0f172a" aria-label="Text colour" />
</div>

With a label

Brand colour

Live example

<label class="re-field">
  <span class="re-field__label">Brand colour</span>
  <input type="color" class="re-color" value="#7c3aed" name="brand" />
</label>

Sizes

Live example

<div class="row">
  <input type="color" class="re-color" data-size="sm" value="#2563eb" aria-label="Small" />
  <input type="color" class="re-color" value="#2563eb" aria-label="Medium" />
  <input type="color" class="re-color" data-size="lg" value="#2563eb" aria-label="Large" />
  <input type="color" class="re-color" value="#94a3b8" aria-label="Disabled" disabled />
</div>

Accessibility

• Keyboard — fully native. Tab moves focus to the swatch; Space / Enter opens the OS colour picker, whose own controls are keyboard-operable.
• Focus — a visible :focus-visible ring (--re-shadow-focus) frames the swatch, replacing the default outline.
• Semantics — it stays a real <input type="color">, so the value is a hex colour, the picker is native, and form submission works unchanged. It has no intrinsic text, so always give it a name — a wrapping <label class="re-field"> or an aria-label — otherwise assistive tech announces only “colour picker” with no purpose.
• Notes — only the swatch chrome is styled (the vendor ::-webkit-color-swatch / ::-moz-color-swatch borders are removed so just the .re-color border frames the colour); the colour itself is the input’s value. Because the value is a colour, pair it with a visible text label rather than relying on the swatch alone to convey meaning. :disabled dims the control and shows a not-allowed cursor. See the accessibility guide.