HTML上で指定色と、その補色を表示させます。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<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: 150px;
color: #fff;
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};">
${inputColor}
</div>
<div class="color-box" style=
"background-color: ${complementaryColor};">
${complementaryColor}
</div>
`;
}
</script>
</body>
</html>
<!-- index.html -->
実行直後の画面です。デフォルトの#3cb371が入力されます。
<input type="text" id="colorInput" value="#3cb371">
そのまま［補色を表示］をクリックすると・・・
#3cb371と、その補色となる#c34c8eが表示されます。
あとは、確認したい色を16進数で入力して・・・
［補色を表示］をクリックするだけです。
