HTML上で指定した2つの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>16進数色のグラデーション</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50vh;
margin: 0;
background-color: #222;
color: white;
}
.controls {
margin-bottom: 20px;
}
.gradient {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 80%;
}
.box {
width: 60px;
height: 60px;
margin: 5px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: white;
font-weight: bold;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<h2>16進数色の色相グラデーション</h2>
<div class="controls">
<label>開始色 (HEX): <input type="text"
id="startColor" value="#ff0000"></label>
<label>終了色 (HEX): <input type="text"
id="endColor" value="#0000ff"></label>
<label>ステップ数: <input type="number"
id="steps" value="10" min="2"></label>
<button onclick="generateGradient()">生成</button>
</div>
<div class="gradient" id="gradientContainer"></div>
<script>
// 16進数からRGBへ変換
function hexToRGB(hex) {
hex = hex.replace(/^#/, '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);
return [r, g, b];
}
// // RGBから16進数へ変換
function RGBToHex(r, g, b) {
return `#${((1 << 24) | (r << 16) |
(g << 8) | b).toString(16).slice(1).toUpperCase()}`;
}
// RGBからHSBへ変換 function RGBToHSB(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, v = max;
let d = max - min;
s = max == 0 ? 0 : d / max;
if (max == min) {
h = 0;
} else {
if (max == r) h = (g - b) / d + (g < b ? 6 : 0);
else if (max == g) h = (b - r) / d + 2;
else if (max == b) h = (r - g) / d + 4;
h /= 6;
}
return [h * 360, s * 100, v * 100];
}
// HSBからRGBへ変換 function HSBToRGB(h, s, v) {
let r, g, b;
h /= 360, s /= 100, v /= 100;
let i = Math.floor(h * 6);
let f = h * 6 - i;
let p = v * (1 - s);
let q = v * (1 - f * s);
let t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return [Math.round(r * 255),
Math.round(g * 255), Math.round(b * 255)];
}
function generateGradient() {
let startHex =
document.getElementById("startColor").value.trim();
let endHex =
document.getElementById("endColor").value.trim();
let steps =
parseInt(document.getElementById("steps").value);
let container =
document.getElementById("gradientContainer");
container.innerHTML = "";
let startRGB = hexToRGB(startHex);
let endRGB = hexToRGB(endHex);
let startHSB = RGBToHSB(...startRGB);
let endHSB = RGBToHSB(...endRGB);
for (let i = 0; i < steps; i++) {
let ratio = i / (steps - 1);
let hue = startHSB[0] + ratio * (endHSB[0] - startHSB[0]);
let sat = startHSB[1] + ratio * (endHSB[1] - startHSB[1]);
let bri = startHSB[2] + ratio * (endHSB[2] - startHSB[2]);
let newRGB = HSBToRGB(hue, sat, bri);
let newHex = RGBToHex(...newRGB);
let box = document.createElement("div");
box.className = "box";
box.style.backgroundColor = newHex;
box.textContent = newHex;
container.appendChild(box);
}
}
</script>
</body>
</html>
実行したら、基準となる16進数とステップ数を入力し［OK］をクリックすれば・・・
結果が表示されます。
