<div>
    <input id="red" type="checkbox">
    <label class="l-rgb" for="red">赤</label>

    <input id="green" type="checkbox">
    <label class="l-rgb" for="green">緑</label>

    <input id="blue" type="checkbox">
    <label class="l-rgb" for="blue">青</label>

    <div class="contents"></div>
</div>

:root {
    --r: 0;
    --g: 0;
    --b: 0;
}

.l-rgb {
    padding-right: 15px;
}

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

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

#blue:checked ~ .contents {
    --b: 255;
}

.contents {
    height: 300px;
    width: 300px;
    border: 1px solid;
    background-color: rgb(var(--r), var(--g), var(--b));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.