HTML上で指定した2つのRGB色から色相グラデ—ションを作成します。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>RGB色のグラデーション</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: 20px;
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);
}
input {
width: 60px;
}
</style>
</head>
<body>
<h2>RGB色の色相グラデーション</h2>
<div class="controls">
<label>開始色 (RGB):
R <input type="number"
id="startR" value="255" min="0" max="255">
G <input type="number"
id="startG" value="0" min="0" max="255">
B <input type="number"
id="startB" value="0" min="0" max="255">
</label>
<br>
<label>終了色 (RGB):
R <input type="number"
id="endR" value="0" min="0" max="255">
G <input type="number"
id="endG" value="0" min="0" max="255">
B <input type="number"
id="endB" value="255" min="0" max="255">
</label>
<br>
<label>ステップ数: <input type="number"
id="steps" value="10" min="2"></label>
<button onclick="generateGradient()">生成</button>
</div>
<div class="gradient" id="gradientContainer"></div>
<script>
// 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 {
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 /= 6;
}
return [h * 360, s * 100, v * 100];
}
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 startR =
parseInt(document.getElementById("startR").value);
let startG =
parseInt(document.getElementById("startG").value);
let startB =
parseInt(document.getElementById("startB").value);
let endR =
parseInt(document.getElementById("endR").value);
let endG =
parseInt(document.getElementById("endG").value);
let endB =
parseInt(document.getElementById("endB").value);
let steps =
parseInt(document.getElementById("steps").value);
let container =
document.getElementById("gradientContainer");
container.innerHTML = "";
let startHSB = RGBToHSB(startR, startG, startB);
let endHSB = RGBToHSB(endR, endG, endB);
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 [r, g, b] = newRGB;
let box = document.createElement("div");
box.className = "box";
box.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
box.textContent = `RGB(${r},${g},${b})`;
container.appendChild(box);
}
}
</script>
</body>
</html>
実行したら、基準となるRGB値とステップ数を入力し［OK］をクリックすれば・・・
結果が表示されます。
