【技術筆記】Gemini生成網頁版色溫檢視器

透過 Google Gemini 生成 HTML，一個深色模式、響應網頁尺寸，能嵌入到自訂網站的色溫檢視器，調動滑桿來得知色溫的數值，Gemini自主提供RGB的數值檢視 ...

色溫檢視

6500K

1,000K (暖) 15,000K (冷)

rgb(255, 255, 255)

HTML碼

點擊展開 / 摺疊內容

<div class="temp-tool-wrapper">
  <div class="temp-card">
    <h2 class="title">色溫檢視</h2>
    
    <div id="tempPreview" class="color-preview">
      <span id="kelvinValue">6500K</span>
    </div>

    <div class="controls">
      <div class="range-labels">
        <span>1,000K (暖)</span>
        <span>15,000K (冷)</span>
      </div>
      <input type="range" id="tempSlider" min="1000" max="15000" value="6500" step="100">
      <div class="rgb-display" id="rgbText">rgb(255, 255, 255)</div>
    </div>
  </div>
</div>

<style>
  :root {
    --card-bg: #1e1e1e;
    --track-bg: #333;
    --thumb-color: #6366f1;
  }

  /* 調整容器為 100% 寬度 */
  .temp-tool-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0; /* 移除內距以達到真正的 100% */
    font-family: -apple-system, system-ui, sans-serif;
    box-sizing: border-box;
  }

  .temp-card {
    width: 100%; /* 卡片寬度跟隨容器 */
    max-width: 100%; /* 移除原本的 450px 限制，若想在大螢幕有限制可改回 */
    background: var(--card-bg);
    border-radius: 12px; /* 響應式佈局通常建議稍微減小圓角 */
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #444;
    color: #e0e0e0;
    text-align: center;
    box-sizing: border-box;
  }

  .title {
    margin: 0 0 15px 0;
    font-size: 1rem;
    color: #888;
    letter-spacing: 1px;
  }

  .color-preview {
    width: 100%;
    height: 150px; /* 增加高度讓視覺更明顯 */
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  }

  #kelvinValue {
    font-size: 2.5rem;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    color: #fff;
  }

  .controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #666;
    font-weight: bold;
  }

  /* 滑桿核心樣式 */
  input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 10px 0;
  }

  input[type=range]:focus { outline: none; }

  /* 軌道樣式 */
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: linear-gradient(to right, #ff3800, #ffcc33, #ffffff, #99ccff, #5599ff);
    border-radius: 5px;
  }

  /* 圓點樣式 */
  input[type=range]::-webkit-slider-thumb {
    height: 26px;
    width: 26px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px; 
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border: 2px solid var(--thumb-color);
  }

  .rgb-display {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: #888;
    background: #111;
    padding: 10px;
    border-radius: 6px;
    margin-top: 5px;
  }
</style>

<script>
  const slider = document.getElementById('tempSlider');
  const preview = document.getElementById('tempPreview');
  const kText = document.getElementById('kelvinValue');
  const rgbText = document.getElementById('rgbText');

  // Kelvin 轉 RGB 演算法 (Tanner Helland 演算法優化版)
  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;
    }

    const clamp = (val) => Math.min(255, Math.max(0, Math.round(val)));
    return `rgb(${clamp(r)}, ${clamp(g)}, ${clamp(b)})`;
  }

  function update() {
    const k = slider.value;
    const color = kelvinToRGB(k);
    preview.style.backgroundColor = color;
    kText.textContent = `${k}K`;
    rgbText.textContent = color;
  }

  slider.addEventListener('input', update);
  update(); // 初始化執行
</script>

Pages

【技術筆記】Gemini生成網頁版色溫檢視器

色溫檢視

禺霖 Legen Vita

搜尋此網誌

Translate

書櫃

瀏覽次數

Instagram