Как можно менять насыщенность hsl в цикле js?

Если цикл, который перебирает массив игроков. У каждого игрока есть свой цветной столбик. Нужно чтобы почти у каждого игрока насыщенность столбика была разного цвета. Но я не знаю можно ли эту насыщенность как нибудь поменять. Нужно изменять у hsl(240, 100%, 30%) проценты. Пытался писать так: hsl(240, i * 25%, 30%), но столбики просто становились чёрными. Не знаю как быть

for (var i = 0; i < players.length; i++) {
    var barHeight = MAX_BAR_HEIGHT * times[i] / maxTime;
    var timeLeft = MAX_BAR_HEIGHT - (MAX_BAR_HEIGHT * times[i]) / maxTime;
    var leftColumnGap = CLOUD_X + BAR_WIDTH + (BAR_WIDTH + COLUMT_GAP) * i;

    if (players[i] === 'Вы') {
       ctx.fillStyle = 'rgba(255, 0, 0, 1)';
     } else {
      ctx.fillStyle = 'hsl(240, 100%, 30%)';
    }

    ctx.fillRect(leftColumnGap, CLOUD_Y + TIME_GAP + timeLeft + FONT_GAP + GAP, BAR_WIDTH, barHeight);

    ctx.fillStyle = '#000';

    ctx.fillText(players[i], leftColumnGap, CLOUD_Y + FONT_GAP * 2 + GAP + TIME_GAP + MAX_BAR_HEIGHT);
    ctx.fillText(Math.round(times[i]), leftColumnGap, CLOUD_Y + timeLeft + FONT_GAP + TIME_GAP);
  }