Build a RGB & HEX Color Code Finder From ColorPicker Web App in Browser Using JavaScript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Code Finder</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .color-preview {
            width: 100%;
            height: 200px;
            border: 2px solid #ccc;
        }
    </style>
</head>
<body class="bg-gray-100 p-6">

    <div class="max-w-lg mx-auto bg-white p-6 rounded-md shadow-md">
        <h1 class="text-2xl font-bold mb-4 text-center">Color Code Finder</h1>
        
        <input type="color" id="color-picker" class="border border-gray-300 mb-4 p-2 rounded" value="#000000">
        
        <div id="color-preview" class="color-preview mb-4" style="background-color: #000000;"></div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">HEX Value:</label>
            <textarea id="hex-value" class="border border-gray-300 p-2 rounded w-full" readonly>#000000</textarea>
            <button onclick="copyToClipboard('hex-value')" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">
                Copy HEX
            </button>
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">RGB Value:</label>
            <textarea id="rgb-value" class="border border-gray-300 p-2 rounded w-full" readonly>rgb(0, 0, 0)</textarea>
            <button onclick="copyToClipboard('rgb-value')" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">
                Copy RGB
            </button>
        </div>
    </div>

    <script>
        const colorPicker = document.getElementById('color-picker');
        const colorPreview = document.getElementById('color-preview');
        const hexValue = document.getElementById('hex-value');
        const rgbValue = document.getElementById('rgb-value');

        function updateColor() {
            const color = colorPicker.value;
            colorPreview.style.backgroundColor = color;
            hexValue.value = color;
            rgbValue.value = hexToRgb(color);
        }

        function hexToRgb(hex) {
            let r = 0, g = 0, b = 0;
            // 3 digits
            if (hex.length === 4) {
                r = parseInt(hex[1] + hex[1], 16);
                g = parseInt(hex[2] + hex[2], 16);
                b = parseInt(hex[3] + hex[3], 16);
            }
            // 6 digits
            else if (hex.length === 7) {
                r = parseInt(hex[1] + hex[2], 16);
                g = parseInt(hex[3] + hex[4], 16);
                b = parseInt(hex[5] + hex[6], 16);
            }
            return `rgb(${r}, ${g}, ${b})`;
        }

        function copyToClipboard(id) {
            const textarea = document.getElementById(id);
            textarea.select();
            document.execCommand('copy');
            alert(`${textarea.value} copied to clipboard!`);
        }

        colorPicker.addEventListener('input', updateColor);
        updateColor(); // Initialize with default color
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Color Code Finder</title>

<style>

.color-preview {

width: 100%;

height: 200px;

border: 2px solid #ccc;

}

</style>

</head>

<h1 class="text-2xl font-bold mb-4 text-center">Color Code Finder</h1>

<label class="block text-gray-700 font-bold mb-2">HEX Value:</label>

Copy HEX

</button>

</div>

<label class="block text-gray-700 font-bold mb-2">RGB Value:</label>

Copy RGB

</button>

</div>

const colorPicker = document.getElementById('color-picker');

const colorPreview = document.getElementById('color-preview');

const hexValue = document.getElementById('hex-value');

const rgbValue = document.getElementById('rgb-value');

function updateColor() {

const color = colorPicker.value;

colorPreview.style.backgroundColor = color;

hexValue.value = color;

rgbValue.value = hexToRgb(color);

}

function hexToRgb(hex) {

let r = 0, g = 0, b = 0;

// 3 digits

if (hex.length === 4) {

r = parseInt(hex[1] + hex[1], 16);

g = parseInt(hex[2] + hex[2], 16);

b = parseInt(hex[3] + hex[3], 16);

}

// 6 digits

else if (hex.length === 7) {

r = parseInt(hex[1] + hex[2], 16);

g = parseInt(hex[3] + hex[4], 16);

b = parseInt(hex[5] + hex[6], 16);

}

return `rgb(${r}, ${g}, ${b})`;

}

function copyToClipboard(id) {

const textarea = document.getElementById(id);

textarea.select();

document.execCommand('copy');

alert(`${textarea.value} copied to clipboard!`);

}

colorPicker.addEventListener('input', updateColor);

updateColor(); // Initialize with default color

</script>

</body>

</html>

Build a RGB & HEX Color Code Finder From ColorPicker Web App in Browser Using JavaScript

Comments

Leave a Reply Cancel reply

Archives