Improving my Background Color Changer

<div class="code-block">
            
            <div id="main-img">
                <p>Current color: <span id="color-label">#999999</span></p>
            </div>
            <h4>Alter the image's background color</h4>
            <p id="requirements-message">All values must be <a href="https://en.wikipedia.org/wiki/Hexadecimal">hexadecimal</a> numbers.</p>
            <ul>
                <li><label for="red-color-input">Red:</label> <input id="red-color-input" type="text" maxlength="2"></li>
                <li><label for="green-color-input">Green:</label> <input id="green-color-input" type="text" maxlength="2"></li>
                <li><label for="blue-color-input">Blue:</label> <input id="blue-color-input" type="text" maxlength="2"></li>
                <li><label for="opacity-input">Opacity:</label> <input id="opacity-input" type="text" maxlength="2"></li>
            </ul>
            <button id="update-color-button">Update Color</button>
        
        </div>
        <script>

            /* Variables */

            const redColor = document.getElementById('red-color-input');
            const blueColor = document.getElementById('blue-color-input');
            const greenColor = document.getElementById('green-color-input');
            const opacityColor = document.getElementById('opacity-input');
            const targetIMG = document.getElementById('main-img');
            const updateButton = document.getElementById('update-color-button');
            let colorLabel = document.getElementById('color-label');
            const reqMsg = document.getElementById('requirements-message');

            /* Function */

            function checkColorValue(e) {
                let eColorTest = /^[a-fA-F0-9]/.test(e.value);
                console.log(eColorTest);
                if(eColorTest === false) {
                    e.style.borderColor = "red";
                    e.style.borderWidth = "3px";
                    reqMsg.style.backgroundColor = "red";
                } else {
                    e.style.borderColor = "initial";
                    e.style.borderWidth = "initial";
                    reqMsg.style.backgroundColor = "initial";
                }
            }

            function updateColor() {
                
                checkColorValue(redColor);
                checkColorValue(blueColor);
                checkColorValue(greenColor);
                checkColorValue(opacityColor);

                let colorValue = `#${redColor.value}${blueColor.value}${greenColor.value}${opacityColor.value}`;
                colorLabel.innerText = colorValue;
                targetIMG.style.backgroundColor = colorValue;
            }



            /* Events */

            updateButton.addEventListener('click', updateColor);    


        </script>

.code-block {
                display: block;
                padding: 1rem;
                margin: 3rem auto;
                text-align: center;
                background-color: rgb(90, 90, 90);
                border-radius: 1rem;
                font-family: Helvetica, Arial, sans-serif;
                color: white;
                width: clamp(16em, 90vw, 60em);
                font-size: 18px;
            }

            .code-block button {
                display: block;
                margin: 1rem auto;
                height: 44px;
                border-radius: .5rem;
                border: solid 1px #eee;
                background: white;
                padding: 0 1rem;
                text-transform: uppercase;
            }

            .code-block input {
                font-size: inherit;
            }

            .code-block ul {
                padding: 0;
                list-style: none;
                text-align: left;
            }

            .code-block ul li {
                padding: .5em 0;
            }
            
            .code-block ul li input{
                width: 5ch;
            }

            #main-img {
                background-image: url('https://www.jeremycaudle.com/floorshotJC.jpeg');
                background-clip: border-box;
                background-size: contain;
                height: 300px;
                width: 300px;
                background-blend-mode: lighten;
                background-color: #999999;
                display: block;
            }
            
            #requirements-message {
                    display: inline-block;
                    margin: 0 auto;
                    padding: 1rem;
                    border-radius: .5rem;
                    transition: padding .5s ease-out, background-color .5s ease-out, border-radius .5s ease-out, font-weight .5s ease-out;
                }

                #requirements-message a {
                    color: white;
                }

            @supports (display: flex) {

                #main-img {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-content: center;
                    margin: 0 auto;
                }

                .code-block ul {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-evenly;
                }

                .code-block ul li {
                    display: flex;
                    flex-grow: 1;
                    flex-direction: column;
                    justify-items: center;
                    align-items: center;
                    text-align: center;
                }

                .code-block ul li label {
                    margin-bottom: .5em;
                }



            }