JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div></div><br>
<canvas width="200" height="200">
</canvas>

CSS

canvas, div {
  display: inline-block;
  width: 200px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  outline: 1px solid black;
}
           

div {
  --conic1: radial-gradient(circle at center, #808080 20px, transparent 20px),
            conic-gradient(from 90deg in hsl longer hue, red, red);
  --radial: radial-gradient(circle closest-side at center, hsl(0 0% 50%) 20px, hsl(0 100% 50%));
}
div:nth-child(1) {
  background: var(--conic1);
              
}
div:nth-child(2) {
  background: var(--radial);
}
div:nth-child(3) {
  background: var(--radial), var(--conic1);
  background-blend-mode: saturation, normal;
}

JavaScript

const can = document.querySelector("canvas");
const ctx = can.getContext("2d");

for (let i=100; i>0; i-=2) {
  ctx.beginPath();
  ctx.fillStyle = makeGradient(i);
  ctx.arc(100,100,i*0.8+20,0,360);
  ctx.fill();
}
ctx.beginPath();
ctx.fillStyle = "#808080";
ctx.arc(100,100,20,0,360);
ctx.fill();

function makeGradient(sat) {
  const cg = ctx.createConicGradient(0, 100, 100);
  cg.addColorStop(0/6, `hsl(  0 ${sat}% 50%)`);
  cg.addColorStop(1/6, `hsl( 60 ${sat}% 50%)`);
  cg.addColorStop(2/6, `hsl(120 ${sat}% 50%)`);
  cg.addColorStop(3/6, `hsl(180 ${sat}% 50%)`);
  cg.addColorStop(4/6, `hsl(240 ${sat}% 50%)`);
  cg.addColorStop(5/6, `hsl(300 ${sat}% 50%)`);
  cg.addColorStop(6/6, `hsl(360 ${sat}% 50%)`);
  return cg;
}