*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: url("https://placehold.co/1920x1080/0f172a/1e293b?text=Abstract+Background") center/cover no-repeat;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.picker-wrapper {
width: 100%;
max-width: 400px;
}
.glass-panel {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 24px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
color: #ffffff;
}
.glass-panel h2 {
margin: 0 0 8px 0;
font-size: 1.5rem;
}
.glass-panel p {
color: #94a3b8;
margin: 0 0 24px 0;
font-size: 0.95rem;
}
.gradient-map {
position: relative;
width: 100%;
height: 200px;
border-radius: 16px;
background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
cursor: crosshair;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
margin-bottom: 24px;
overflow: hidden;
}
.gradient-map::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent, #000000);
pointer-events: none;
}
.picker-reticle {
position: absolute;
width: 20px;
height: 20px;
border: 3px solid #ffffff;
border-radius: 50%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
pointer-events: none;
z-index: 10;
}
.result-row {
display: flex;
align-items: center;
gap: 16px;
background: rgba(255, 255, 255, 0.05);
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.color-preview {
width: 40px;
height: 40px;
border-radius: 8px;
background-color: #3b82f6;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.hex-display {
flex-grow: 1;
font-family: "Courier New", Courier, monospace;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 1px;
}
.copy-btn {
background: #ffffff;
color: #0f172a;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
}
.copy-btn:hover {
background: #e2e8f0;
transform: scale(1.05);
}
const map = document.getElementById("color-map");
const reticle = document.getElementById("reticle");
const preview = document.getElementById("preview-box");
const hexText = document.getElementById("hex-display");
const copyBtn = document.getElementById("copy-hex");
let isDragging = false;
function rgbToHex(r, g, b) {
const toHex = function(c) {
const hex = c.toString(16);
return hex.length === 1 ? "0" + hex : hex;
};
return "#" + toHex(r) + toHex(g) + toHex(b);
}
function updateColor(e) {
const rect = map.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
if (x < 0) x = 0;
if (x > rect.width) x = rect.width;
if (y < 0) y = 0;
if (y > rect.height) y = rect.height;
reticle.style.left = x + "px";
reticle.style.top = y + "px";
/* Simulate color calculation safely based on X/Y position */
const hue = (x / rect.width) * 360;
const lightness = 100 - ((y / rect.height) * 50);
/* Convert HSL roughly to display a beautiful dynamic color */
const dynamicColor = "hsl(" + hue + ", 100%, " + lightness + "%)";
preview.style.backgroundColor = dynamicColor;
/* Fallback fake hex for demo purposes to avoid complex color math in a small snippet */
const fakeR = Math.floor((x / rect.width) * 255);
const fakeB = Math.floor((y / rect.height) * 255);
const finalHex = rgbToHex(fakeR, 120, fakeB).toUpperCase();
hexText.innerText = finalHex;
}
map.addEventListener("pointerdown", function(e) {
isDragging = true;
map.setPointerCapture(e.pointerId);
updateColor(e);
});
map.addEventListener("pointermove", function(e) {
if (isDragging) updateColor(e);
});
map.addEventListener("pointerup", function() {
isDragging = false;
});
copyBtn.addEventListener("click", function() {
navigator.clipboard.writeText(hexText.innerText).then(function() {
copyBtn.innerText = "Done!";
setTimeout(function() {
copyBtn.innerText = "Copy";
}, 2000);
});
});
