JSFiddle - React, Tailwind, and code Playground

HTML

<div class="color-wheel">
  <div class="dcw" style="background-color:blue;">

  </div>
  <div class="dcw" style="background-color:green;">

  </div>
</div>

CSS

.color-wheel {
  width: 600px;
  height: 600px;
  position: relative;
  perspective: 3000px;
  display: block;
}

.dcw {
  top: 0;
  bottom:0;
  height: 100%;
  width: 50%;
  position: absolute;
  transform-style: preserve-3d;
  overflow:hidden;
}
.dcw:first-child {
  right:50%;
  left:0;
}
.dcw:last-child {  
  right:0;
  left:50%;
}

.dcw:first-child .circle2 {
  left: calc(100% - 94px);
}
.dcw:last-child .circle2 {
  left: calc(0% - 94px);
}

.circle2 {
  top: calc(50% - 94px);
  margin: auto;
  position: absolute;
  cursor: pointer;
  transform-style: preserve-3d;
  width: 188px;
  height: 188px;
  border-radius:50%;
  border:1px solid black;
}
.circle {
  top: calc(50% - 94px);
  margin: auto;
  position: absolute;
  cursor: pointer;
  transform-style: preserve-3d;
  width: 188px;
  height: 188px;
  border-radius:50%;
  border:1px solid black;
}
.circle div {
  left:0;
  right:0;
  position: absolute;
  transform-style: preserve-3d;
  width: 100%;
  height: 50%;
}
.circle div:first-child {
  
  border-top-left-radius:1000px;
  border-top-right-radius:1000px;
  top: 0;
  bottom:50%
}
.circle div:last-child {
  border-bottom-left-radius:1000px;
  border-bottom-right-radius:1000px;
  bottom: 0;
  top:50%;
}

JavaScript

$dcw = $(".dcw"); 
var newElement;
var center = 300;
var distance = 200,
  color;
for (var i = 0; i < 360; i = i + 10) {
  color = 20 + Math.round((128 / 360) * i);
  color2 = 220 - Math.round((128 / 360) * i);
  
  $(drawCircle2(color,color2,i,distance)).appendTo($dcw);
}

function drawCircle2(color,color2,rotation,distance) {
	return '<div class="circle" style="transform: translate3d(0,0,0) rotateZ( ' + rotation + 'deg ) translateX('+distance+'px) rotateX(10deg );">' +
  '<div style="background-color: rgba(' + color + ',0,0,1);"></div>' +
  '<div style="background-color: rgba(' + color + ',0,0,1);"></div>' +
 '</div>';
}

function drawCircle2(color,color2,rotation,distance) {
	return '<div class="circle2" style="background-color: rgba(' + color + ',0,0,1);transform: translate3d(0,0,0) rotateZ( ' + rotation + 'deg ) translateX('+distance+'px) rotateX(10deg );">' +
 '</div>';
}