<div class="diZContainer diZmxAuto">
<h1 class="diZBorderBottom">HEX to RGB Converter</h1>
    <div class="diZMaxW600 diZmxAuto toolsSection diZmy20 diZPadding15px">
        <label for="hex">HEX Color:</label><br><br>
        <input style="width: 96%;" onchange="visibleColor();" type="text" id="hex" value="#" pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$" required ><br>
        <br>
        <div id="result"></div><br>
        <div class="diZFlexRow">
            <button id="convert-button" onclick="convertHexToRgb()"><span>Convert</span></button>
            <button id="copyButton" onclick="copyToClipboard()"><span>Copy</span></button>
        </div>
        <div>
        </div>
    </div>
</div>

<script>
    function hexToRgb(hex) {
        hex = hex.replace(/^#/, '');
        if (hex.length === 3) {
            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        }
        var bigint = parseInt(hex, 16);
        var r = (bigint >> 16) & 255;
        var g = (bigint >> 8) & 255;
        var b = bigint & 255;
        return [r, g, b];
    }
    function visibleColor(){
        var hexColorCode = document.getElementById('hex').value;
        document.getElementById('convert-button').style.backgroundColor = hexColorCode;
    }
    function convertHexToRgb() {
        var hexColor = document.getElementById('hex').value;
        var rgbArray = hexToRgb(hexColor);
        var red = rgbArray[0];
        var green = rgbArray[1];
        var blue = rgbArray[2];

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

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

    function copyToClipboard() {
        var rgbText = document.getElementById('result').textContent.split('equivalent to ')[1];
        var textarea = document.createElement('textarea');
        textarea.value = rgbText;
        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 = 'RGB values copied successfully';
    }
</script>
