html colour picker

tap on the lower smaller rectangle to pick colour

Code:

<h3 style="margin-bottom: 1rem; color: var(--accent);">Color Picker</h3>

<div id="colorBox"

style="width: 100%; height: 180px; background: #00e5a0; border-radius: 10px; margin-bottom: 1rem; box-shadow: 0 4px 15px rgba(0, 229, 160, 0.2);">

</div>

<input type="color" id="colorInput" value="#00e5a0"

style="width: 100%; height: 50px; padding: 5px; background: var(--surface); border: 2px solid var(--border); border-radius: 8px; cursor: pointer;">

</div>

</div>

<button onclick="copyColor()"

style="margin-top: 1.2rem; padding: 11px 28px; background: var(--accent); color: #000; border: none; border-radius: 8px; font-weight: 600; cursor: pointer;">

Copy HEX

</button>

</div>

// Update color when user picks from the input

document.getElementById('colorInput').addEventListener('input', function() {

const color = this.value;

// Update the big color box

document.getElementById('colorBox').style.backgroundColor = color;

// Update HEX display (now bright white)

document.getElementById('hexCode').textContent = color.toUpperCase();

// Convert HEX to RGB

const r = parseInt(color.substr(1,2), 16);

const g = parseInt(color.substr(3,2), 16);

const b = parseInt(color.substr(5,2), 16);

document.getElementById('rgbCode').textContent = `${r}, ${g}, ${b}`;

});

// Copy HEX to clipboard

function copyColor() {

const hex = document.getElementById('hexCode').textContent;

navigator.clipboard.writeText(hex).then(() => {

const btn = document.querySelector('button');

const originalText = btn.textContent;

btn.textContent = 'Copied!';

setTimeout(() => {

btn.textContent = originalText;

}, 1500);

});

}

// Initialize on load

window.onload = function() {

const initialColor = document.getElementById('colorInput').value;

document.getElementById('colorBox').style.backgroundColor = initialColor;

document.getElementById('hexCode').textContent = initialColor.toUpperCase();

const r = parseInt(initialColor.substr(1,2), 16);

const g = parseInt(initialColor.substr(3,2), 16);

const b = parseInt(initialColor.substr(5,2), 16);

document.getElementById('rgbCode').textContent = `${r}, ${g}, ${b}`;

};

</script>