Color Swatches

Big circular colour swatch radios — for theme pickers and palette selectors. The selected swatch shows a contrasting inner ring.

Pure CSS MIT licensed

Color Swatches the 8th of 18 designs in the 18 CSS Radio Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<fieldset class="crb-swatch">
  <legend class="crb-sr">Colour</legend>
  <label style="--c: #7c6cff"><input type="radio" name="crb-swatch" /><span></span></label>
  <label style="--c: #ff6c8a"><input type="radio" name="crb-swatch" checked /><span></span></label>
  <label style="--c: #2ecc8a"><input type="radio" name="crb-swatch" /><span></span></label>
  <label style="--c: #f5a623"><input type="radio" name="crb-swatch" /><span></span></label>
  <label style="--c: #06b6d4"><input type="radio" name="crb-swatch" /><span></span></label>
</fieldset>

.crb-swatch { display: flex; gap: 10px; border: 0; padding: 0; }
.crb-swatch input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-swatch label { cursor: pointer; }
.crb-swatch span {
  display: block;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 0 #15151d, 0 0 0 0 var(--c);
  transition: box-shadow 0.3s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.crb-swatch label:hover span { transform: scale(1.08); }
.crb-swatch input:checked + span {
  box-shadow: inset 0 0 0 4px #15151d, 0 0 0 2px var(--c), 0 0 16px var(--c);
  transform: scale(1.12);
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

More from 18 CSS Radio Button Designs

3D Push Glow Pulse Concentric Pulse Pill Slider Magnetic Orb Ink Drop Star Burst Tilt Card Minimal Tick Segmented Bar Neon Ring Pricing Tier

View the full collection →