How to smooth spectrum cycling in CSS when skipping dull colors

Question

I need to cycle through bright colors using CSS just like how your RGB mouse and keyboards are and so far I have a solution sort of working using HSL. It does however include some really dark colors that I'm trying to skip. But obviously when you skip some, the transitions won't be smooth.

var hue = 0;

$(document).ready(function() {
  setInterval(function() {
    // Reset the hue if we reach the end
    if(hue >= 360) {
      hue = 0;
    }
    
    // Skip some dull colors (hue 210 to 270)
    if(hue >= 210 && hue <= 270) {
      hue = 271;
    }
    
    // Set the background
    $('body').css('background-color', 'hsl(' + hue + ', 100%, 60%)');
    
    // Increase the hue
    hue++;
  }, 50);
});

body {
  background-color: hsl(0, 100%, 60%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

What do I need to do to get just bright colors but also ensuring that the transitions are smooth?

Answer 1

I think that using CSS animations will easen your life, you won't have to care about smoothness. The only rule to ensure smoothness here is to put the same color for the start and the end (0 and 100%)

Below you can just plug in any colors you want

*{
  background-color:red;
  animation: 10s ease-in-out 0s infinite rainbow;
}

@keyframes rainbow{
    0%    { background-color: red;}
    12.5% { background-color: #ff00a8;}
    25%   { background-color: #c400ff;}
    37.5% { background-color: #00d3ff;}
    50%   { background-color: #00ffaf;}
    62.5% { background-color: #1aff00;}
    75%   { background-color: #dbff00;}
    87.5% { background-color: #ffc000;}
    100%  { background-color: red;}
}