Как получать значение из массива по кругу?

Чисто формальность - обычно next это следующая, а prev это предыдущая, но хозяин барин в моем варианте будет работать не зависимо от длинны массива и в ту и в другую сторону.

$('.arrow-prev').on('click', function () {
  if(currentColor < arrColors.length-1){
    currentColor ++;
  } else  {
    currentColor = 0;
  }
  currentColorValue = arrColors[currentColor];
});
$('.arrow-next').on('click', function () {
  if(currentColor === 0){
    currentColor = arrColors.length-1;
  } else {
     currentColor--;
  }
  currentColorValue = arrColors[currentColor];
});

Если я правильно понял вашу задачу, то достаточно просто проверять крайние позиции указателя, перед входом в функцию и перемещать его в начала или конец, в зависимости от нажатой клавиши, код ниже.

$('.arrow-prev').on('click', function () {
    if(currentColor === 0){
        currentColor = 2;
    } else {
       currentColor--;
    }
    currentColorValue = arrColors[currentColor];
});
$('.arrow-next').on('click', function () {
    if(currentColor === 2){
        currentColor = 0;
    } else {
       currentColor++;
    }
    currentColorValue = arrColors[currentColor];
});