<!DOCTYPE html>
<html>
<head>
<style>
#itemBox {
width:100%;
}
.item {
width: 200px;
height: 30px;
float: left;
font-size: 16pt;
font-weight: bold;
text-align: center;
opacity: 0.9;
}
</style>
</head>
<body>
<div id="itemBox"></div>
<script>
function isBlack(color)
{
const hex = color.replace(/#/, '');
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
var yiq = [299 * r, 587 * g, 114 * b].reduce((a, b) => a + b) / 1000;
// black
return yiq >= 128;
}
var _colors = [];
function genColor()
{
var _color = "#";
for (var i = 0; i < 6; i++)
{
var _num = Math.floor((Math.random() * 100) + 1);
_color += (_num % 16).toString(16).toUpperCase();
}
return _color;
}
function genContrastColor(color)
{
var _isBlack = isBlack(color);
var _contractColor;
do
{
_contractColor = genColor();
} while (_isBlack == isBlack(_contractColor));
return _contractColor;
}
while (_colors.length < 175)
{
var _color = genColor();
if (_colors.indexOf(_color) == -1)
{
_colors.push(_color);
var _div = document.createElement("div");
_div.style.backgroundColor = _color;
_div.style.color = genContrastColor(_color);
_div.classList.add("item");
var _txt = document.createTextNode("Hello!");
_div.appendChild(_txt);
document.getElementById("itemBox").appendChild(_div);
}
}
</script>
</body>
</html>
심심해서 만들어 봤다.