<input type="checkbox" id="red" />
<label for="red">red</label>

<input type="checkbox" id="green" />
<label for="green">green</label>

<input type="checkbox" id="blue" />
<label for="blue">blue</label>

<div class="box"></div>
.box {
  background: rgb(var(--r, 0), var(--g, 0), var(--b, 0));
  border: 1px solid #000;
  height: 200px;
  transition: all 0.3s linear;
}

#red:checked ~ .box {
  --r: 255;
}

#green:checked ~ .box {
  --g: 255;
}

#blue:checked ~ .box {
  --b: 255;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.