Color Converter

Color Converter

No(1) မိမိ blog site ကို account အရင်ဝင်ပါ

No(2) dashboard ထဲက Pages(or)Posts ကိုနှိပ်

No(3) + အိုင်ကွန်ကိုနှိပ်

No(4) 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ

No(5) အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ

No(6) save ကိုနှိပ်ပြီးပါပြီ

 <style>
.tool_container {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.input-label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.text-input{
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#colorPreview {
    height: 190px;
    max-width: 300px;
    margin: 22px auto;
    border-radius: 4px;
    border: 2px solid #ccc;
}

.select-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.convert-button {
    background-color: #0066ff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.convert-button:hover {
    background-color: #f8f;
}

#result {
    margin-top: 16px;
    width:280px;
}

    </style>



    <div class="tool_container">
        <label for="colorInput">Color Code:</label>
        <input id="colorInput" oninput="updateColorPreview()" placeholder="Enter color code" type="text" />

        <div id="colorPreview"></div>

        <label for="outputFormat">Output Format:</label>
        <select id="outputFormat">
            <!-- Dynamically generate options based on detected input format -->
        </select>

        <button  class="convert-button" onclick="handleConvert()">Convert</button>

      <div class="cResult"> <textarea id="result"></textarea></div>

  </div>
    <script>
          function handleConvert() {
            const colorInput = document.getElementById('colorInput').value;
            const detectedFormat = detectColorFormat(colorInput);
            const outputFormatDropdown = document.getElementById('outputFormat');
            const outputFormat = outputFormatDropdown.value;

            if (colorInput && detectedFormat && outputFormat) {
                // Check if the detected format matches the selected output format
                if (detectedFormat !== outputFormat) {
                    const resultColor = convertColor(colorInput, detectedFormat, outputFormat);

                    const resultElement = document.getElementById('result');
                    resultElement.textContent = `Converted Color: ${resultColor}`;
                } else {
                    alert('Please choose a different output format.');
                }
            } else {
                alert('Please provide valid input values.');
            }
        }

         function detectColorFormat(color) {
            if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(color)) {
                return 'hex';
            } else if (/^rgb\(\s?\d+\s?,\s?\d+\s?,\s?\d+\s?\)$/.test(color)) {
                return 'rgb';
            } else if (/^hsl\(\s?\d+\s?,\s?\d+%?\s?,\s?\d+%?\s?\)$/.test(color)) {
                return 'hsl';
            }

            return 'hex'; // Default to hex if no format is detected
        }
      
      // Update the output format dropdown based on the detected format
        function updateOutputFormatDropdown() {
            const detectedFormat = detectColorFormat(document.getElementById('colorInput').value);
            const outputFormatDropdown = document.getElementById('outputFormat');

            // Clear existing options
            outputFormatDropdown.innerHTML = '';

            // Generate options excluding the detected format
            ['hex', 'rgb', 'hsl'].forEach(format => {
                if (format !== detectedFormat) {
                    const option = document.createElement('option');
                    option.value = format;
                    option.textContent = format.toUpperCase();
                    outputFormatDropdown.appendChild(option);
                }
            });
        }


        function convertColor(inputColor, inputFormat, outputFormat) {
            let outputColor;

            if (inputFormat === 'hex') {
                if (outputFormat === 'rgb') {
                    const rgbColor = hexToRgb(inputColor);
                    outputColor = `rgb(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]})`;
                } else if (outputFormat === 'hsl') {
                    const hslColor = hexToHsl(inputColor);
                    outputColor = `hsl(${hslColor[0]}, ${hslColor[1]}%, ${hslColor[2]}%)`;
                }
            } else if (inputFormat === 'rgb') {
                if (outputFormat === 'hex') {
                    outputColor = rgbToHex(inputColor);
                } else if (outputFormat === 'hsl') {
                    const hslColor = rgbToHsl(inputColor);
                    outputColor = `hsl(${hslColor[0]}, ${hslColor[1]}%, ${hslColor[2]}%)`;
                }
            } else if (inputFormat === 'hsl') {
                if (outputFormat === 'hex') {
                    const rgbColor = hslToRgb(inputColor);
                    outputColor = rgbToHex(rgbColor[0], rgbColor[1], rgbColor[2]);
                } else if (outputFormat === 'rgb') {
                    const rgbColor = hslToRgb(inputColor);
                    outputColor = `rgb(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]})`;
                }
            }

            return outputColor;
        }

        function hexToRgb(hex) {
            hex = hex.replace(/^#/, '');
            const bigint = parseInt(hex, 16);
            const r = (bigint >> 16) & 255;
            const g = (bigint >> 8) & 255;
            const b = bigint & 255;
            return [r, g, b];
        }

        function rgbToHex(r, g, b) {
            return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
        }

        function rgbToHsl(r, g, b) {
            r /= 255;
            g /= 255;
            b /= 255;
            const max = Math.max(r, g, b);
            const min = Math.min(r, g, b);
            let h, s, l = (max + min) / 2;

            if (max === min) {
                h = s = 0;
            } else {
                const d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

                switch (max) {
                    case r:
                        h = (g - b) / d + (g < b ? 6 : 0);
                        break;
                    case g:
                        h = (b - r) / d + 2;
                        break;
                    case b:
                        h = (r - g) / d + 4;
                        break;
                }

                h /= 6;
            }

            return [h * 360, s * 100, l * 100];
        }

        function hslToRgb(h, s, l) {
            h /= 360;
            s /= 100;
            l /= 100;
            let r, g, b;

            if (s === 0) {
                r = g = b = l;
            } else {
                const hue2rgb = (p, q, t) => {
                    if (t < 0) t += 1;
                    if (t > 1) t -= 1;
                    if (t < 1 / 6) return p + (q - p) * 6 * t;
                    if (t < 1 / 2) return q;
                    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                    return p;
                };

                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                const p = 2 * l - q;

                r = hue2rgb(p, q, h + 1 / 3);
                g = hue2rgb(p, q, h);
                b = hue2rgb(p, q, h - 1 / 3);
            }

            return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
        }

        function hexToHsl(hex) {
            const rgbColor = hexToRgb(hex);
            return rgbToHsl(rgbColor[0], rgbColor[1], rgbColor[2]);
        }

        function updateColorPreview() {
            const colorInput = document.getElementById('colorInput').value;
            const colorPreview = document.getElementById('colorPreview');

            if (/^#([0-9A-Fa-f]{3}){1,2}$/i.test(colorInput)) {
                colorPreview.style.backgroundColor = colorInput;
            } else {
                colorPreview.style.backgroundColor = '';
            }

            // Update the output format dropdown whenever the input color changes
            updateOutputFormatDropdown();
        }
    </script>