<h1>This is a sample text</h1>
<button>Generate random background color</button>
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
button {
font-size: 16px;
font-weight: 500;
background: white;
border-radius: 3px;
border: none;
padding: 5px 10px;
}
View Compiled
function generateRandomColor() {
var letters = "0123456789ABCDEF";
var color = "";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return `#${color}`;
}
function getRGB(c) {
return parseInt(c, 16) || c;
}
function getsRGB(c) {
return getRGB(c) / 255 <= 0.03928
? getRGB(c) / 255 / 12.92
: Math.pow((getRGB(c) / 255 + 0.055) / 1.055, 2.4);
}
function getLuminance(hexColor) {
return (
0.2126 * getsRGB(hexColor.substr(1, 2)) +
0.7152 * getsRGB(hexColor.substr(3, 2)) +
0.0722 * getsRGB(hexColor.substr(-2))
);
}
function getContrast(f, b) {
const L1 = getLuminance(f);
const L2 = getLuminance(b);
return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
}
function getTextColor(bgColor) {
const whiteContrast = getContrast(bgColor, "#ffffff");
const blackContrast = getContrast(bgColor, "#000000");
return whiteContrast > blackContrast ? "#ffffff" : "#000000";
}
function roll() {
const bgColor = generateRandomColor();
const button = document.querySelector("button");
const textColor = getTextColor(bgColor);
document.body.style.backgroundColor = bgColor;
button.style.backgroundColor = textColor;
button.style.color = bgColor;
document.body.style.color = textColor;
}
document.querySelector("button").addEventListener("click", roll);
roll();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.