Info

Hex값 입력시 RGB 컬러 보여주는 기능. #Hex to RGB Converter

#Hex to RGB Converter.

개인적인 호기심으로 만들어본 기능이다.

6자리 로 이루어진 #hex 값을 입력하면 해당 HEX 값을 나타내주고, 우측에는 HEX값과 동일한 컬러의 RGB 컬러를 표시해주는 기능이다. 조금만 구글링 해보면, 이보다 우수한 기능들이 많이 있기에 따로 풀이는 하지 않는다. 그냥 개인적으로 원하던 몇 가지 기능들을 구현하다가 아이디어가 옆으로 세면서 만들어본 기능이다. 그저 이런 기능도 가능하구나, 하면서 참고하시길 바란다.

Hex to RGB Converter Code

위의 기능을 적용하려면 하단의 기능을 베이스로 하고, 스타일을 개인의 취향에 맞춰 적용하면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hex to RGB Color Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        .container {
            display: flex;
            justify-content: space-between;
            width: 300px;
        }
        .block {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
        }
        .color-box {
            background-color: #ffffff;
        }
    </style>
</head>
<body>

    <h1>Hex to RGB Converter</h1>
    <input type="text" id="hexInput" placeholder="Enter Hex Value" maxlength="7">

    <div class="container">
        <div id="colorDisplay" class="block color-box"></div>
        <div id="rgbOutput" class="block">RGB</div>
    </div>

    <script>
        function hexToRgb(hex) {
            let r = parseInt(hex.slice(1, 3), 16);
            let g = parseInt(hex.slice(3, 5), 16);
            let b = parseInt(hex.slice(5, 7), 16);
            return { r, g, b };
        }

        document.getElementById('hexInput').addEventListener('input', function () {
            const hex = this.value;
            if (hex.length === 7 && hex[0] === '#') {
                // Update the color display
                document.getElementById('colorDisplay').style.backgroundColor = hex;

                // Convert to RGB and display the values
                const rgb = hexToRgb(hex);
                document.getElementById('rgbOutput').textContent = `R: ${rgb.r}, G: ${rgb.g}, B: ${rgb.b}`;
            }
        });
    </script>

</body>
</html>