JavaScript DomEvent Passing multiple checkbox values

I have a form with multiple checkbox values. A user may select one or more than one options

html code

    <div id="container">
        <h1 id="title">RGB Color</h1>
        <div id="color">#000</div>
        <div id="checkColor">
            <!--red-->
            <input type="checkbox" id="red">Red
            <!--green-->
            <input type="checkbox" id="green">Green
            <!--blue-->
            <input type="checkbox" id="blue">Blue
        </div>
    </div>

JavaScript code

//red box
function red_box(event) {
    var redbox = document.getElementById("red")
    //red
    if (redbox.checked) {
        console.log('red')
        document.getElementById("title").style.color = "#f00";
        document.getElementById("color").innerHTML = "#f00"
        document.getElementById("color").style.color = "#f00";
        document.getElementById("color").style.backgroundColor = "#f00";
    }
    else {
        console.log('red e')
        document.getElementById("title").style.color = "#000";
        document.getElementById("color").style.color = "#000";
        document.getElementById("color").innerHTML = "#000";
        document.getElementById("color").style.backgroundColor = "#000";
    }
}

//green box
function green_box(event) {
    var greenbox = document.getElementById("green")
    //green
    if (greenbox.checked) {
        console.log('gree')
        document.getElementById("title").style.color = "#090";
        document.getElementById("color").innerHTML = "#090"
        document.getElementById("color").style.color = "#090";
        document.getElementById("color").style.backgroundColor = "#090";
    }
    else {
        console.log('gree e')
        document.getElementById("title").style.color = "#000";
        document.getElementById("color").style.color = "#000";
        document.getElementById("color").innerHTML = "#000";
        document.getElementById("color").style.backgroundColor = "#000";
    }
}

//blue box
function blue_box(event) {
    var bluebox = document.getElementById("blue")
    //blue
    if (bluebox.checked) {
        console.log('blue')
        document.getElementById("title").style.color = "#00f";
        document.getElementById("color").innerHTML = "#00f"
        document.getElementById("color").style.color = "#00f";
        document.getElementById("color").style.backgroundColor = "#00f";
    }
    else {
        console.log('blue e')
        document.getElementById("title").style.color = "#000";
        document.getElementById("color").style.color = "#000";
        document.getElementById("color").innerHTML = "#000";
        document.getElementById("color").style.backgroundColor = "#000";
    }
}

//0ff blue green
function off() {
    
    var bluebox = document.getElementById("blue")
    var greenbox = document.getElementById("green")
    if ((bluebox.checked) && (greenbox.checked)) {
        console.log('off')
        document.getElementById("title").style.color = "#0ff";
        document.getElementById("color").innerHTML = "#0ff"
        document.getElementById("color").style.color = "#0ff";
        document.getElementById("color").style.backgroundColor = "#0ff";
    }
    else {
        document.getElementById("title").style.color = "#000";
        document.getElementById("color").style.color = "#000";
        document.getElementById("color").innerHTML = "#000";
        document.getElementById("color").style.backgroundColor = "#000";
    }
}

//red green = ff0
function ffo() {
    var redbox = document.getElementById("red")
    var greenbox = document.getElementById("green")
    if ((redbox.checked) && (greenbox.checked)) {
        console.log('ffo')
        document.getElementById("title").style.color = "#ff0";
        document.getElementById("color").innerHTML = "#ff0"
        document.getElementById("color").style.color = "#ff0";
        document.getElementById("color").style.backgroundColor = "#ff0";
    }
    else {
        document.getElementById("title").style.color = "#000";
        document.getElementById("color").style.color = "#000";
        document.getElementById("color").innerHTML = "#000";
        document.getElementById("color").style.backgroundColor = "#000";
    }
}

//red blue = f0f
function fof() {
    var redbox = document.getElementById("red")
    var bluebox = document.getElementById("blue")
    if ((redbox.checked) && (bluebox.checked)) {
        console.log('fof')
        document.getElementById("title").style.color = "#f0f";
        document.getElementById("color").innerHTML = "#f0f"
        document.getElementById("color").style.color = "#f0f";
        document.getElementById("color").style.backgroundColor = "#f0f";
    }
    else {
        document.getElementById("title").style.color = "#000";
        document.getElementById("color").style.color = "#000";
        document.getElementById("color").innerHTML = "#000";
        document.getElementById("color").style.backgroundColor = "#000";
    }
}

//all
function allbox(event) {
    var redbox = document.getElementById("red")
    var bluebox = document.getElementById("blue")
    var greenbox = document.getElementById("green")
    if ((redbox.checked) && (bluebox.checked) && (greenbox.checked)) {
        console.log('all')
        document.getElementById("title").style.color = "#fff";
        document.getElementById("color").innerHTML = "#fff";
        document.getElementById("color").style.color = "#000";
        document.getElementById("color").style.backgroundColor = "#fff";
    }
    else {
        document.getElementById("title").style.color = "#000";
        document.getElementById("color").style.color = "#000";
        document.getElementById("color").innerHTML = "#000";
        document.getElementById("color").style.backgroundColor = "#000";
    }
};


//funtion start
document.getElementById('red').onclick = red_box;
document.getElementById('green').onclick = green_box;
document.getElementById('blue').onclick = blue_box;

// document.getElementById("checkColor").onclick = ffo;
// document.getElementById("checkColor").onclick = off;
// document.getElementById("checkColor").onclick = fof;

I want to change the color when two or more checkboxes are selected.
Ex :When you check red & blue, you want to change the color to #f0f.
Is it possible to run javascript without editing html?
I’m spending a lot of time with this issue. Help.