colorPicker.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Random</title>
    <style>
        html,
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 95%;
            height: 95%;
            min-width: 810px;
            min-height: 410px;
            align-items: center;
            margin: 8px 15px;
        }

        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 50px;
        }
        #main {
            width: 100%;
            height: 50%;
            flex-direction: column;
        }
        #rgbContainer {
            width: 100%;
            height: 50%;
            background-color: grey;
            border: 2px solid black;
        }
        .colorBlock {
            width: 30%;
            height: 95%;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 4px solid white;
        }
        #red {
            background-color: red;
        }
        #green {
            background-color: green;
        }
        #blue {
            background-color: blue;
        }
        .changeButtons {
            margin: 10px;
            width: 12%;
            color: white;
            font-size: 15px;
            font-weight: bold;
            background-color: inherit;
        }
    </style>
</head>
<body>
    <div id="main" class="centered">
        <div id="rgbContainer" class="centered" tabindex="1">
            <div id="red" class="colorBlock">
                <button id="pRed" class="changeButtons">+</button>
                <input id="inRed" type="number" min="0" max="255" step="1">
                <button id="mRed" class="changeButtons">-</button>
            </div>
            <div id="green" class="colorBlock">
                <button id="pGreen" class="changeButtons">+</button>
                <input id="inGreen" type="number" min="0" max="255" step="1">
                <button id="mGreen" class="changeButtons">-</button>
            </div>
            <div id="blue" class="colorBlock">
                <button id="pBlue" class="changeButtons">+</button>
                <input id="inBlue" type="number" min="0" max="255" step="1">
                <button id="mBlue" class="changeButtons">-</button>
            </div>
        </div>
    </div>

    <script src="./colorPicker.js"></script>
</body>

</html>