У меня есть кнопка, которая меняет цвета при нажатии, но мне нужно, чтобы она включала оттенки зеленого

Как только вы выберете «зеленый», вы можете увеличить белый тон, увеличив красный и синий цвета в равной степени. Подумайте об этом, имея 256 * 2 оттенков: 256 оттенков от черного до зеленого и 256 оттенков от зеленого до белого:

var div = document.querySelector('#myDiv')
div.dataset.color = 0;
div.addEventListener('click',() => {

  div.dataset.color = parseInt(div.dataset.color) + 10;

  var c = div.dataset.color % 512;
  var rb = c - 256 > 0 ? c - 256 : 0; // gets 'overage' of values past 256;

  div.style.background = `rgb(${rb},${c},${rb})`;
});

#myDiv {
width: 200px;
height: 200px;
background: #000000;
}

<div id="myDiv"></div>

В этом примере мы увеличиваем зеленые значения на десять каждый клик, а затем за каждый клик по 256 добавляем десять красных и синих, которые должны поддерживать одинаковый прирост между цветовыми оттенками.

Поскольку мы должны в основном считать 256 в два раза, мы можем по модулю div.dataset.color(зеленый) на 512. Это означает, что зеленое значение может превышать 256; мы могли бы сделать некоторую логику, чтобы исправить это, но браузеры все равно будут использовать максимальное значение цвета 256, если будет добавлено что-то большее. Не нужно его исправлять.

Этот пример также автоматически переключится обратно на черный после достижения белого. Чтобы предотвратить возврат к черному, вы можете сделать некоторую логику, чтобы остановить подсчет после 512.

note: Я видел, что вы использовали жирные стрелки ES6, поэтому я обновил строку rgb до строкового литерала синтаксиса :)