似たようなネタがありましたが、ローカルな必要に迫られて作りました。HTML上でOSのカラーパレットで指定した色と、その補色を16進表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>RGB HSL色とその補色を16進表示</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 10px;
background-color: black;
color: white;
}
.color-box {
width: 400px;
height: 100px;
border: 1px solid #000;
display: inline-block;
vertical-align: middle;
margin-left: 0px;
}
</style>
</head>
<body>
<h3>RGB HSL色とその補色を16進表示</h3>
<input type="color" id="colorPicker" value="#ff0000">
<br><br>
<p>選択色: <span id="colorValue">#ff0000</span>
<div id="colorPreview" class="color-box"
style="background-color: #ff0000;"></div>
</p>
<p>補 色: <span id="complementaryValue">#00ffff</span>
<div id="complementaryPreview" class="color-box"
style="background-color: #00ffff;"></div>
</p>
<script>
const colorPicker =
document.getElementById("colorPicker");
const colorValue =
document.getElementById("colorValue");
const colorPreview =
document.getElementById("colorPreview");
const complementaryValue =
document.getElementById("complementaryValue");
const complementaryPreview =
document.getElementById("complementaryPreview");
function getComplementaryColor(hex) {
// 16進数からR,G,Bを取得
let r = parseInt(hex.substring(1, 3), 16);
let g = parseInt(hex.substring(3, 5), 16);
let b = parseInt(hex.substring(5, 7), 16);
// 補色を計算 (255 - R, 255 - G, 255 - B)
let compR = (255 - r).toString(16).padStart(2, "0");
let compG = (255 - g).toString(16).padStart(2, "0");
let compB = (255 - b).toString(16).padStart(2, "0");
return `#${compR}${compG}${compB}`;
}
colorPicker.addEventListener("input", function() {
let selectedColor = colorPicker.value;
let complementaryColor =
getComplementaryColor(selectedColor);
// 更新
colorValue.textContent = selectedColor;
colorPreview.style.backgroundColor = selectedColor;
complementaryValue.textContent = complementaryColor;
complementaryPreview.style.backgroundColor =
complementaryColor;
});
</script>
</body>
</html>
実行直後の画面
カラーパレットで任意の色を選択すれば・・・
ライブでその色と補色を表示します。
