<!DOCTYPE html>
ホワイトバランスシミュレーター
<br> body {<br> font-family: sans-serif;<br> text-align: center;<br> padding: 20px;<br> background-color: #f0f0f0; /* 背景色を薄いグレーに <em>/<br> }<br> .controls {<br> margin-bottom: 25px;<br> padding: 10px;<br> background: #fff;<br> border-radius: 8px;<br> box-shadow: 0 2px 4px rgba(0,0,0,0.1);<br> display: inline-block;<br> }<br> label {<br> display: block;<br> margin-bottom: 8px;<br> font-weight: bold;<br> }<br> input[type="range"] {<br> width: 300px;<br> }<br> /</em> 3. 白を表示する大きな枠 <em>/<br> #white-box {<br> width: 90%;<br> max-width: 700px;<br> height: 400px;<br> margin: 30px auto;<br> border: 2px solid #333; /</em> 枠線で区切りを分かりやすく <em>/<br> box-shadow: 0 0 15px rgba(0,0,0,0.2);<br> transition: background-color 0.2s; /</em> 変化を滑らかに */<br> }<br> .value-display {<br> font-size: 0.9em;<br> color: #555;<br> margin-top: 5px;<br> }<br>
<h1>ホワイトバランス＆色被り シミュレーター</h1>
<div class="controls">
<label for="temp-slider">色温度 (Kelvin)</label>
<input type="range" id="temp-slider" min="2000" max="10000" value="6500">
<div class="value-display" id="temp-value">6500 K</div>
</div>
<div class="controls">
<label for="tint-slider">色被り (Tint: Green ←→ Magenta)</label>
<input type="range" id="tint-slider" min="-100" max="100" value="0">
<div class="value-display" id="tint-value">0</div>
</div>
<div id="white-box"></div>
<script>
// ----------------------------------------------------
// 色温度からRGB値を計算する関数（専門的なアルゴリズム）
// ----------------------------------------------------
function kelvinToRgb(kelvin) {
let temp = kelvin / 100;
let R, G, B;
if (temp <= 66) {
R = 255;
G = 99.4708025861 * Math.log(temp) - 161.1195681661;
B = temp <= 19 ? 0 : 138.5177312231 * Math.log(temp - 10) - 305.0447927307;
} else {
R = 329.698727446 * Math.pow(temp - 60, -0.1332047592);
G = 288.1221695283 * Math.pow(temp - 60, -0.0755148492);
B = 255;
}
return {
r: Math.min(255, Math.max(0, Math.round(R))),
g: Math.min(255, Math.max(0, Math.round(G))),
b: Math.min(255, Math.max(0, Math.round(B)))
};
}
// ----------------------------------------------------
// 色被り補正を適用する関数
// ----------------------------------------------------
function applyTint(rgb, tintValue) {
// tintValueは -100 (Green) から 100 (Magenta)
const factor = tintValue / 100;
// マゼンタ方向 (RとBを増やす, Gを減らす)
if (factor > 0) {
rgb.r = Math.min(255, rgb.r + (255 - rgb.r) * factor * 0.5);
rgb.b = Math.min(255, rgb.b + (255 - rgb.b) * factor * 0.5);
rgb.g = Math.max(0, rgb.g - rgb.g * factor * 0.3);
}
// グリーン方向 (Gを増やす, RとBを減らす)
else if (factor < 0) {
const absFactor = Math.abs(factor);
rgb.g = Math.min(255, rgb.g + (255 - rgb.g) * absFactor * 0.5);
rgb.r = Math.max(0, rgb.r - rgb.r * absFactor * 0.3);
rgb.b = Math.max(0, rgb.b - rgb.b * absFactor * 0.3);
}
return {
r: Math.round(rgb.r),
g: Math.round(rgb.g),
b: Math.round(rgb.b)
};
}
// ----------------------------------------------------
// メインの更新処理
// ----------------------------------------------------
const tempSlider = document.getElementById('temp-slider');
const tintSlider = document.getElementById('tint-slider');
const whiteBox = document.getElementById('white-box');
const tempValueDisplay = document.getElementById('temp-value');
const tintValueDisplay = document.getElementById('tint-value');
function updateColor() {
// 1. スライダーから値を取得
const kelvin = parseInt(tempSlider.value);
const tint = parseInt(tintSlider.value);
// 2. 色温度で基本色を計算
let finalRgb = kelvinToRgb(kelvin);
// 3. 色被り補正を適用
finalRgb = applyTint(finalRgb, tint);
// 4. 枠に色を適用
whiteBox.style.backgroundColor = `rgb(${finalRgb.r}, ${finalRgb.g}, ${finalRgb.b})`;
// 5. 表示を更新
tempValueDisplay.textContent = `${kelvin} K`;
tintValueDisplay.textContent = `${tint}`;
}
// スライダーが動いたときに色を更新
tempSlider.addEventListener('input', updateColor);
tintSlider.addEventListener('input', updateColor);
// ページ読み込み時に一度実行して初期表示
updateColor();
</script>
Top comments (0)