Hue Ring

<div class="nuda-huering">
  <div class="nuda-huering__ring">
    <span class="nuda-huering__thumb"
          style="transform: rotate(135deg) translateY(-32px)"></span>
  </div>
  <div class="nuda-huering__core" style="background:#62b6ff"></div>
</div>

.nuda-huering {
  position: relative;
  width: 90px;
  height: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nuda-huering__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#ff5e7a,#ffb45e,#e4ff54,#6ee7b7,#62b6ff,#9d6dff,#ff6dd4,#ff5e7a);
  mask: radial-gradient(circle,transparent 0,transparent 28px,#000 30px);
  -webkit-mask: radial-gradient(circle,transparent 0,transparent 28px,#000 30px);
  cursor: pointer;
  animation: _huerSpin 20s linear infinite;
}

.nuda-huering__thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fafafa;
  border: 2px solid #0c0c10;
  transform-origin: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
  margin: -6px;
}

.nuda-huering__core {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1);
  transition: background .25s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

@keyframes _huerSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-huering__ring {
    animation: none;
  }
}