.palette-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
text-align: center;
max-width: 400px;
margin: 0 auto;
}
.colors {
display: flex;
height: 100px;
border-radius: 12px;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.color-box {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.8rem;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
button {
padding: 10px 20px;
background: #1f2937;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
}
function generatePalette() {
const boxes = document.querySelectorAll(".color-box");
boxes.forEach(box => {
const randomColor = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, "0");
box.style.backgroundColor = randomColor;
box.innerText = randomColor;
});
}
// Init
generatePalette();
