tools/.hta_slug/color-code-from-image.php

<section class="diZContainer diZmxAuto diZmy8">
    <h1 class="diZBorderBottom">Color Hex/RGB Code From Image</h1>
    <p>The Color Code Extractor from Image is a simple and efficient web-based tool that allows users to upload an image and click on any part of it to get the RGB and HEX color codes of the pixel they clicked on. This tool is particularly useful for designers, developers, and anyone who needs to identify and use specific colors from images.</p>
    <div class="diZMaxW600 diZmxAuto toolsSection">
        <label class="diZFlexColumn " for="imageInput">Choose Image</label><br>
        <input class="diZPadding10px" type="file" id="imageInput" accept="image/*" /><br><br>
        <canvas class="diZDisplayNone diZw100" id="canvas"></canvas><br>
        <div class="diZFlexBetween">
            <div id="result">Click on the image to get the color code.</div>
            <button class="diZDisplayNone" id="copyButton" ><span>Copy</span></button>
        </div>
    </div>
    <div>
        <h2>Usage:</h2>
        <ul>
            <li><strong>Upload an Image:</strong> Click on the file input field and select an image file from your device.</li>
            <li><strong>Display the Image:</strong> Once the image is uploaded, it will be displayed on a hidden canvas element.</li>
            <li><strong>Extract Color Code:</strong> Click on any part of the displayed image. The tool will capture the color of the clicked pixel and display both the RGB and HEX color codes.</li>
            <li><strong>Copy Color Code:</strong> Click the "Copy Color Code" button to copy the displayed color code to your clipboard for easy use in your projects.</li>
        </ul>

        <h2>Features:</h2>
        <ul>
            <li><strong>Easy Image Upload:</strong> Supports uploading images directly from your device.</li>
            <li><strong>Accurate Color Extraction:</strong> Retrieves the exact RGB and HEX color codes from any pixel of the image.</li>
            <li><strong>Clipboard Copy Functionality:</strong> Allows you to easily copy the extracted color codes to your clipboard.</li>
            <li><strong>Fallback for Compatibility:</strong> Provides a fallback method for copying color codes on browsers that do not support the Clipboard API.</li>
            <li><strong>User-Friendly Interface:</strong> Simple and intuitive design for ease of use.</li>
        </ul>

        <h2>Use Case:</h2>
        <ul>
            <li><strong>Web Designers and Developers:</strong> Quickly extract color codes from images for use in web design and development projects.</li>
            <li><strong>Graphic Designers:</strong> Identify and use specific colors from images in design software.</li>
            <li><strong>Digital Artists:</strong> Match colors from reference images to create cohesive artworks.</li>
            <li><strong>Marketing Professionals:</strong> Ensure brand consistency by extracting and using exact colors from marketing materials and logos.</li>
            <li><strong>DIY Enthusiasts:</strong> Use color codes to match paint colors, fabrics, or other materials in home decoration projects.</li>
        </ul>
    </div>
</section>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const imageInput = document.getElementById('imageInput');
        const copyButton = document.getElementById('copyButton');

        imageInput.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        const canvas = document.getElementById('canvas');
                        const ctx = canvas.getContext('2d');
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0);
                        canvas.style.display = 'block';

                        canvas.addEventListener('click', function(event) {
                            const rect = canvas.getBoundingClientRect();
                            const x = event.clientX - rect.left;
                            const y = event.clientY - rect.top;
                            console.log(`Clicked at (x, y): (${x}, ${y})`);

                            try {
                                const imageData = ctx.getImageData(x, y, 1, 1).data;
                                const rgb = `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})`;
                                const hex = `#${((1 << 24) + (imageData[0] << 16) + (imageData[1] << 8) + imageData[2]).toString(16).slice(1).toUpperCase()}`;
                                const colorCode = `RGB: ${rgb}, HEX: ${hex}`;
                                console.log('Color code:', colorCode);
                                document.getElementById('result').innerText = colorCode;
                                copyButton.style.display = 'block';
                                copyButton.setAttribute('data-color-code', colorCode);
                            } catch (err) {
                                console.error('Error getting image data:', err);
                            }
                        });
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        copyButton.addEventListener('click', function() {
            const colorCode = copyButton.getAttribute('data-color-code');
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(colorCode).then(() => {
                    console.log('Color code copied to clipboard');
                }).catch(err => {
                    console.error('Could not copy text: ', err);
                });
            } else {
                const textarea = document.createElement('textarea');
                textarea.value = colorCode;
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    document.execCommand('copy');
                    console.log('Color code copied to clipboard');
                    copyButton.innerHTML = '<span>Copied!</span>';
                    setTimeout(() => {
                        copyButton.innerHTML = '<span>Copy</span>';
                    }, 2000);
                } catch (err) {
                    console.error('Could not copy text: ', err);
                }
                document.body.removeChild(textarea);
            }
        });
    });
</script>