Colour Picker

Colour selection control.

html

<div class="cp">
  <label class="cp__label" for="cp-1">Accent colour</label>
  <div class="cp__row">
    <input class="cp__swatch cp__swatch--medium" id="cp-1" type="color" value="#A8E6C1">
    <span class="cp__hex">#A8E6C1</span>
  </div>
</div>
<style>
.cp { font: 14px system-ui, sans-serif; color: #241430; max-width: 240px; }
.cp__label { display: block; margin-bottom: 6px; font-weight: 500; }
.cp__req { color: #241430; }
.cp__row { display: flex; align-items: center; gap: 10px; }
.cp__swatch { padding: 0; border: 1.5px solid #24143040; border-radius: 8px; background: none; cursor: pointer; }
.cp__swatch--small { width: 28px; height: 28px; }
.cp__swatch--medium { width: 40px; height: 40px; }
.cp__swatch--large { width: 56px; height: 56px; }
.cp__swatch:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.cp__hex { font-variant-numeric: tabular-nums; text-transform: uppercase; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] max-w-[240px]">
  <label class="block mb-1.5 font-medium" for="cp-tw-1">Accent colour</label>
  <div class="flex items-center gap-2.5">
    <input id="cp-tw-1" type="color" value="#A8E6C1" class="cp-tw cp-tw--medium p-0 border-[1.5px] border-[#24143040] rounded-lg bg-transparent cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430] focus-visible:outline-offset-2">
    <span class="tabular-nums uppercase">#A8E6C1</span>
  </div>
</div>
<style>
.cp-tw--small { width: 28px; height: 28px; }
.cp-tw--medium { width: 40px; height: 40px; }
.cp-tw--large { width: 56px; height: 56px; }
</style>

react

export function ColourPicker({
  label = "Accent colour",
  value = "#A8E6C1",
  showValue = true,
  size = "medium",
  required = false,
}) {
  const dims = { small: 28, medium: 40, large: 56 }[size] ?? 40;
  return (
    <div style={{ font: "14px system-ui, sans-serif", color: "#241430", maxWidth: 240 }}>
      <label htmlFor="cp-react-1" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>
        {label}{required && " *"}
      </label>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <input id="cp-react-1" type="color" defaultValue={value} required={required} style={{
          width: dims, height: dims, padding: 0, border: "1.5px solid #24143040", borderRadius: 8,
          background: "none", cursor: "pointer",
        }} />
        {showValue && <span style={{ fontVariantNumeric: "tabular-nums", textTransform: "uppercase" }}>{value}</span>}
      </div>
    </div>
  );
}