<section class="diZContainer diZmxAuto diZmt8">
    <h1 class="diZBorderBottom">RGB to HEX Converter</h1>
    <div class="diZmxAuto toolsSection diZMaxW600 diZmy20" >
        <div class="diZFlexColumn"><br>
            <label for="red">Red:</label>
            <input style="width: 97%;" type="number" id="red" min="0" max="255" required>
        </div>
        <div class="diZFlexColumn"><br>
            <label for="green">Green:</label>
            <input style="width: 97%;" type="number" id="green" min="0" max="255" required>
        </div>
        <div class="diZFlexColumn"><br>
            <label for="blue">Blue:</label>
            <input style="width: 97%;" type="number" id="blue" min="0" max="255" required>
        </div>
        <div id="result"></div>
        <div class="diZFlexBetween">
            <button class="" onclick="convert()"><span>Convert</span></button>
            <button id="copyButton" onclick="copyToClipboard()"><span>Copy</span></button>
        </div>
        <span class="diZDisplayNone" id="copied-notice"></span>
    </div>
</section>
<!-- diZJustifyCenter diZItemsCenter -->
<script>
    function rgbToHex(r, g, b) {
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));
        
        var hex = "#" + ("0" + r.toString(16)).slice(-2) + ("0" + g.toString(16)).slice(-2) + ("0" + b.toString(16)).slice(-2);
        
        return hex.toUpperCase();
    }

    function convert() {
        var red = parseInt(document.getElementById('red').value);
        var green = parseInt(document.getElementById('green').value);
        var blue = parseInt(document.getElementById('blue').value);

        var hexColor = rgbToHex(red, green, blue);
        document.getElementById('result').textContent = "RGB(" + red + ", " + green + ", " + blue + ") is equivalent to " + hexColor;

        document.getElementById('copyButton').style.display = 'inline-block';
    }

    function copyToClipboard() {
        var hexColor = document.getElementById('result').textContent.split('equivalent to ')[1];
        var textarea = document.createElement('textarea');
        textarea.value = hexColor;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        document.getElementById('copied-notice').style.display = 'block';
        document.getElementById('copied-notice').innerHTML = 'HEX color code copied Successfully';
    }
</script>

<style>
    .container-dzx {
        background-color: #3d3d3d;
        border-radius: 5px;
        box-shadow: 0px 0px 10px 0px #FFFFFF80;
        padding: 20px;
        max-width: 500px;
        width: 100%;
        text-align: center;
        transform: translate(-50%, -70%);
        position: absolute;
        top: 50%;
        left: 50%;
    }

    form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    input[type="number"] {
        width: 100px;
        padding: 8px;
        border-radius: 5px;
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    .button-style{
        padding: 10px 20px;
        background-color: #7d7d7d;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .button-style:hover {
        background-color: #9d9d9d;
    }

    #result {
        color: #007bff;
    }
</style>