前回の拡張版です。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>色変換（補色・色相反転・彩度反転）</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 10px;
background-color: black;
color: white;
}
.color-box {
width: 400px;
height: 50px;
border: 1px solid #000;
display: inline-block;
vertical-align: middle;
margin-left: 0px;
}
</style>
</head>
<body>
<h3>色変換（補色・色相反転・彩度反転）</h3>
<input type="color" id="colorPicker" value="#ff0000">
<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>
<p>色相反転: <span id="hueInvertedValue">
#00ff00</span>
<div id="hueInvertedPreview" class="color-box"
style="background-color: #00ff00;"></div>
</p>
<p>彩度反転: <span id="saturationInvertedValue">
#808080</span>
<div id="saturationInvertedPreview" class="color-box"
style="background-color: #808080;"></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");
const hueInvertedValue =
document.getElementById("hueInvertedValue");
const hueInvertedPreview =
document.getElementById("hueInvertedPreview");
const saturationInvertedValue =
document.getElementById("saturationInvertedValue");
const saturationInvertedPreview =
document.getElementById("saturationInvertedPreview");
function hexToRGB(hex) {
return [
parseInt(hex.substring(1, 3), 16),
parseInt(hex.substring(3, 5), 16),
parseInt(hex.substring(5, 7), 16)
];
}
function rgbToHex(r, g, b) {
return `#${r.toString(16).padStart(2, "0")}${
g.toString(16).padStart(2, "0")}${
b.toString(16).padStart(2, "0")}`;
}
function getComplementaryColor(hex) {
let [r, g, b] = hexToRGB(hex);
return rgbToHex(255 - r, 255 - g, 255 - b);
}
function rgbToHSL(r, g, b) {
r /= 255, g /= 255, b /= 255;
let max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // 無彩色
} else {
let d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h = Math.round(h * 60);
}
return [h, s, l];
}
function hslToRGB(h, s, l) {
let r, g, b;
function hueToRGB(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
if (s === 0) {
r = g = b = l; // 無彩色
} else {
let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
let p = 2 * l - q;
r = hueToRGB(p, q, (h + 180) / 360);
g = hueToRGB(p, q, h / 360);
b = hueToRGB(p, q, (h - 180) / 360);
}
return [Math.round(r * 255),
Math.round(g * 255), Math.round(b * 255)];
}
function getHueInvertedColor(hex) {
let [r, g, b] = hexToRGB(hex);
let [h, s, l] = rgbToHSL(r, g, b);
h = (h + 180) % 360; // 色相を180度反転
let [invR, invG, invB] = hslToRGB(h, s, l);
return rgbToHex(invR, invG, invB);
}
function getSaturationInvertedColor(hex) {
let [r, g, b] = hexToRGB(hex);
let [h, s, l] = rgbToHSL(r, g, b);
s = 1 - s; // 彩度反転
let [satR, satG, satB] = hslToRGB(h, s, l);
return rgbToHex(satR, satG, satB);
}
colorPicker.addEventListener("input", function() {
let selectedColor = colorPicker.value;
let complementaryColor =
getComplementaryColor(selectedColor);
let hueInvertedColor =
getHueInvertedColor(selectedColor);
let saturationInvertedColor =
getSaturationInvertedColor(selectedColor);
colorValue.textContent = selectedColor;
colorPreview.style.backgroundColor =
selectedColor;
complementaryValue.textContent =
complementaryColor;
complementaryPreview.style.backgroundColor =
complementaryColor;
hueInvertedValue.textContent =
hueInvertedColor;
hueInvertedPreview.style.backgroundColor =
hueInvertedColor;
saturationInvertedValue.textContent =
saturationInvertedColor;
saturationInvertedPreview.style.backgroundColor =
saturationInvertedColor;
});
</script>
</body>
</html>
実行直後の画面
カラーパレットで任意の色を選択すれば・・・
ライブでその色と補色、色相反転、彩度反転を表示します。
