#2 hsl background gradient

#2 rainbow with css gradients : finding color-stops RVB, CMY, RYB...

HTML

<div id="rainbox" class="rgb"></div>
<div id="rainbox" class="rgb2"></div>
<div id="rainbox" class="ryb"></div>
<div id="rainbox" class="cmy"></div>
<div id="rainbox" class="colorstar"></div>
<div id="rainbox" class="cercle-01"></div>
<div id="rainbox" class="cercle-chromatique"></div><!-- test avec celui-ci -->
<div id="rainbox" class="ryb"></div>

CSS

body {
    padding: 50px;
}
#rainbox {
    margin-top: 10px;
    width: 100%;
    height: 20px;  
}
.rgb {
    background: -moz-linear-gradient(left, 
        hsl(0,100%,50%), 
        hsl(60,100%,50%),
        hsl(120,100%,50%),
        hsl(180,100%,50%),
        hsl(240,100%,50%),
        hsl(300,100%,50%),
        hsl(360,100%,50%)
    );
}
.rgb2 {
    background: -moz-linear-gradient(left, 
        red, 
        yellow,
        lime,
        cyan,
        blue,
        magenta,
        red
    );
}
.ryb {
    background: -moz-linear-gradient(left, 
        hsl(0,100%,50%), 
        hsl(60,100%,50%) 33%,
        hsl(120,100%,50%),
        hsl(180,100%,50%),
        hsl(240,100%,50%) 66%,
        hsl(300,100%,50%),
        hsl(360,100%,50%)
    );
}
.cmy {
    background: -moz-linear-gradient(left, 
        hsl(180,100%,50%),
        hsl(240,100%,50%),
        hsl(300,100%,50%),
        hsl(360,100%,50%),
        hsl(60,100%,50%),
        hsl(120,100%,50%),
        hsl(180,100%,50%)        
    );
}
.colorstar {
    background: -moz-linear-gradient(left, 
        hsl(5,93%,50%), /* rouge */
        hsl(18,97%,50%),
        hsl(36,99%,49%),  /* orange */
        hsl(45,99%,49%),
        hsl(60,80%,50%), /* jaune */
        hsl(68,82%,46%),
        hsl(95,72%,35%),  /* vert */
        hsl(198,99%,40%),
        hsl(224,99%,50%),  /* bleu */ 
        hsl(262,99%,32%),
        hsl(285,99%,34%),  /* violet */
        hsl(339,85%,33%),
        hsl(5,93%,50%)
    );
}

.cercle-01 {
    background: -moz-linear-gradient(left, 
        hsl(357,79%,52%), /* rouge */
        hsl(16,81%,54%),
        hsl(35,90%,55%),  /* orange */
        hsl(48,100%,54%),
        hsl(57,100%,47%), /* jaune */
        hsl(79,78%,41%),
        hsl(90,59%,44%),  /* vert */
        hsl(190,58%,64%),
        hsl(221,50%,43%), /* bleu */
        hsl(235,40%,42%), 
        hsl(272,35%,42%), /* violet */
        hsl(328,63%,55%),
        hsl(357,79%,52%)
    );
}

.cercle-chromatique {
   ...