Fydler UtilityBelt - Color Converter

Color Converter

Text & Development Tool

#6366f1

Pick a Color

Use the picker to select a color visually

HEX Code

RGB

HSL

Color Formats

HEX: Hexadecimal representation (e.g., #FFFFFF).
RGB: Red, Green, Blue intensity (0-255).
HSL: Hue (0-360), Saturation (0-100%), Lightness (0-100%).

Copied to clipboard!

lucide.createIcons(); const picker = document.getElementById('picker'); const hexInput = document.getElementById('hex-input'); const rgbInput = document.getElementById('rgb-input'); const hslInput = document.getElementById('hsl-input'); const preview = document.getElementById('color-preview'); const previewText = document.getElementById('preview-text'); function updateAll(hex) { hex = hex.toUpperCase(); if (!/^#[0-9A-F]{6}$/i.test(hex)) return; picker.value = hex; hexInput.value = hex; preview.style.backgroundColor = hex; previewText.textContent = hex; // Determine if text should be white or black based on luminance const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; previewText.style.color = luminance > 0.5 ? '#000000' : '#FFFFFF'; rgbInput.value = `rgb(${r}, ${g}, ${b})`; hslInput.value = rgbToHsl(r, g, b); } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b), 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 `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`; } picker.addEventListener('input', (e) => updateAll(e.target.value)); hexInput.addEventListener('input', (e) => updateAll(e.target.value)); document.querySelectorAll('.copy-trigger').forEach(btn => { btn.addEventListener('click', () => { const targetId = btn.dataset.target; const text = document.getElementById(targetId).value; navigator.clipboard.writeText(text); showToast('Copied to clipboard!'); }); }); function showToast(msg) { const toast = document.getElementById('toast'); const toastMsg = document.getElementById('toast-message'); toastMsg.textContent = msg; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000); } // Init updateAll('#6366f1');