Color Converter

Enter Color:

Converted Colors

HEX:

RGB:

HSL:

body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; } .container { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #333; } .converter { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; margin-bottom: 10px; box-sizing: border-box; } button { background-color: #007BFF; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } .result { padding: 20px; border: 1px solid #ccc;function convertColor() { const colorInput = document.getElementById('colorInput').value; try { const color = tinycolor(colorInput); if (color.isValid()) { document.getElementById('hexResult').innerText = color.toHexString(); document.getElementById('rgbResult').innerText = color.toRgbString(); document.getElementById('hslResult').innerText = color.toHslString(); } else { alert('Invalid color input. Please enter a valid HEX, RGB, or HSL color.'); } } catch (error) { console.error('Error converting color:', error); alert('Error converting color. Please try again.'); } } border-radius: 5px; background-color: #f9f9f9; } span { font-weight: bold; color: #007BFF; }