一昨日アップした「HTML上で指定色と、その補色を表示」にミスがあり、その修正版です。計算は問題ないのですが・・・
カラーパレット上に16進数を白で表示すると・・・
可読性が悪い状況が出るので,16ディンづうえおカラーパレットから外しました。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>指定色の補色を表示</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.color-box {
display: inline-block;
width: 150px;
height: 150px;
margin: 30px;
line-height: 110px;
color: #000;
font-weight: bold;
}
</style>
</head>
<body>
<h2>指定色と、その補色を表示</h2>
<label for="colorInput">色を指定 (HEX): </label>
<input type="text" id="colorInput" value="#3cb371">
<button onclick="showComplementaryColor()">
補色を表示</button>
<div id="result"></div>
<script>
function hexToRgb(hex) {
// HEXをRGBに変換
hex = hex.replace(/^#/, "");
if (hex.length === 3) {
hex = hex.split("").map(c => c + c).join("");
}
const r = parseInt(hex.slice(0, 2), 16);
const g = parseInt(hex.slice(2, 4), 16);
const b = parseInt(hex.slice(4, 6), 16);
return { r, g, b };
}
function rgbToHex(r, g, b) {
// RGBをHEXに変換
return (
"#" +
[r, g, b]
.map(x => x.toString(16).padStart(2, "0"))
.join("")
);
}
function getComplementaryColor(hex) {
// 補色を計算 各RGB成分を255から引く
const { r, g, b } = hexToRgb(hex);
const compR = 255 - r;
const compG = 255 - g;
const compB = 255 - b;
// 補色を再びHEX形式に変換
return rgbToHex(compR, compG, compB);
}
// 結果を準備
function showComplementaryColor() {
const inputColor =
document.getElementById("colorInput").value;
const complementaryColor =
getComplementaryColor(inputColor);
// 結果を表示
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `
<div class="color-box" style=
"background-color: ${inputColor};"><br>
${inputColor}
</div>
<div class="color-box" style=
"background-color: ${complementaryColor};"><br>
${complementaryColor}
</div>
`;
}
</script>
</body>
</html>
<!-- index.html -->
修正箇所は以下の4箇所です。
.color-box {
line-height: 110px;
color: #000;
以下<br>を追加しただけ。
<div class="color-box" style=
"background-color: ${inputColor};"><br>
${inputColor}
</div>
<div class="color-box" style=
"background-color: ${complementaryColor};"><br>
${complementaryColor}
</div>
これで、どんな色も問題なく確認できます。
