Color Converter
- မိမိ blog site ကို account အရင်ဝင်ပါ
- dashboard ထဲက Pages(or)Posts ကိုနှိပ်
- + အိုင်ကွန်ကိုနှိပ်
- 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
- အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
- 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>
