hyiromori's memo
背景色をベースに文字色を判定してみる
背景色に応じて文字色を黒/白を切り替える仕組みを作りたかったので。

html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景色をベースに文字色を判定してみる</title>
<style type="text/css">
span {
display: inline-block;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
margin: 0.5rem;
padding: 1rem 2rem;
}
</style>
</head>
<body>
<div id="colors"></div>
<script type="text/javascript">
const bases = ['00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 'AA', 'BB', 'CC', 'DD', 'EE', 'FF'];
const colors = [];
bases.forEach((red) => {
bases.forEach((green) => {
bases.forEach((blue) => {
// YUVの輝度を求めて、文字色を判定する
// Ref: https://thk.kanzae.net/net/itc/t7110/ , https://ja.wikipedia.org/wiki/YUV
const brightness = Math.floor((parseInt(red, 16) * 0.299) + (parseInt(green, 16) * 0.587) + (parseInt(blue, 16) * 0.114))
const color = brightness >= 140 ? '000000' : 'FFFFFF'
colors.push({background: `${red}${green}${blue}`, color, brightness})
})
})
})
document.getElementById("colors").innerHTML = colors.map(({background, color, brightness}) => {
return `<span style="background-color: #${background}; color: #${color}">#${background} (Y: ${brightness})</span>`
}).join('')
</script>
</body>
</html>

こちらを参考にしました: https://thk.kanzae.net/net/itc/t7110/
YUVの変換はこちらを参考に: https://ja.wikipedia.org/wiki/YUV