Untitled

無課金 — Tue, 07 Oct 2025 04:07:45 +0000

<!DOCTYPE html>

ホワイトバランスシミュレーター
 body { font-family: sans-serif; text-align: center; padding: 20px; background-color: #f0f0f0; /* 背景色を薄いグレーに / } .controls { margin-bottom: 25px; padding: 10px; background: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: inline-block; } label { display: block; margin-bottom: 8px; font-weight: bold; } input[type="range"] { width: 300px; } / 3. 白を表示する大きな枠 / #white-box { width: 90%; max-width: 700px; height: 400px; margin: 30px auto; border: 2px solid #333; / 枠線で区切りを分かりやすく / box-shadow: 0 0 15px rgba(0,0,0,0.2); transition: background-color 0.2s; / 変化を滑らかに */ } .value-display { font-size: 0.9em; color: #555; margin-top: 5px; }

<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>

DEV Community: 無課金

Untitled