Edit in JSFiddle

var red = 0;
var green = 0;
var blue = 0;

function updateBackground(red, green, blue) {
  const body = document.querySelector('body');
  const text = document.querySelector('div#text');

  body.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
  text.textContent = "Color: rgb(" + red + ", " + green + ", " + blue + ")";
}

function redder() {
  this.red = this.red <= 250 ? this.red + 10 : 0;

  this.updateBackground(this.red, this.green, this.blue);
}

function greener() {
  this.green = this.green <= 250 ? this.green + 10 : 0;

  this.updateBackground(this.red, this.green, this.blue);
}

function bluer() {
  this.blue = this.blue <= 250 ? this.blue + 10 : 0;

  this.updateBackground(this.red, this.green, this.blue);
}

function reset() {
  this.red = 0;
  this.green = 0;
  this.blue = 0;

  this.updateBackground(this.red, this.green, this.blue);
}

reset();
<section>
  <nav>
    <button id="red" onclick="redder()">
    More Red
    </button>

    <button id="green" onclick="greener()">
    More Green
    </button>

    <button id="blue" onclick="bluer()">
    More Blue
    </button>

    <button id="reset" type="reset" onclick="reset()">
    Reset
    </button>
  </nav>
  <div id="text"></div>
</section>
section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

nav {
  /* display: flex; */
  flex-flow: row nowrap;
  padding: 1rem;
}

#text {
  /* display: flex; */
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
  color: rgb(250, 250, 250);
  font: "neue helvetica", helvetica, "sans-serif";
  font-size: 18px;
  padding: 2rem;
}