JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="700" height="800"></canvas>

JavaScript

// Parameters
        var saturation = 100;
        var lightness = 50;
        var radius = 180;
        var canvas = 850;
        var centerx = 300;
        var centery = 300;
        var redstart = 90 * 0.017453292519943;
        // Render
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');
        for(i=0;i<=360;i++) {
            var diffr = i;
            var diffg = Math.abs(i - 120);
            var diffb = Math.abs(i - 240);
            var red = Math.round((Math.abs(180 - diffr) * 4.25) - 255);
            var green = Math.round((Math.abs(180 - diffg) * 4.25) - 255);
            var blue = Math.round((Math.abs(180 - diffb) * 4.25) - 255);
            var startAngle = ((i+1) * Math.PI/180) - redstart;
            var endAngle = ((i-1) * Math.PI/180) - redstart;
//            console.log(startAngle+ ','+endAngle);

        ctx.beginPath();
            ctx.lineWidth = 100;
            ctx.strokeStyle = 'rgb('+red+', '+green+', '+blue+')';
            ctx.arc(centerx,centery,radius,startAngle,endAngle,true);
            ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
            ctx.strokeStyle = 'rgb('+red+', 0, 0)';
            ctx.lineWidth = 25;
            ctx.arc(centerx,centery,115,startAngle,endAngle,true);
            ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
            ctx.lineWidth = 25;
            ctx.strokeStyle = 'rgb(0, '+green+', 0)';
            ctx.arc(centerx,centery,87,startAngle,endAngle,true);
            ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
            ctx.lineWidth = 25;
            ctx.strokeStyle = 'rgb(0, 0, '+blue+')';
            ctx.arc(centerx,centery,59,startAngle,endAngle,true);
            ctx.stroke();
            ctx.closePath();
        }