使用 HTML CSS 和 JavaScript 设计背景颜色转换器

本文介绍如何设计一个简单的背景颜色转换器，使用 HTML、CSS 和 JavaScript 实现。这个小工具可以方便地将颜色值在RGB、十六进制和HSL之间转换。

HTML

首先，我们需要设计一个简单的HTML页面，用于输入和显示颜色值。以下是HTML代码片段：

<div>
  <label for="color-input">输入颜色：</label>
  <input type="text" id="color-input" placeholder="请输入颜色值">

  <button id="convert-btn">转换</button>
  
  <div class="result-container">
    <div class="result-box" id="rgb-result">
      <div class="result-label">RGB</div>
      <div class="result-value" id="rgb-value"></div>
    </div>

    <div class="result-box" id="hex-result">
      <div class="result-label">十六进制</div>
      <div class="result-value" id="hex-value"></div>
    </div>

    <div class="result-box" id="hsl-result">
      <div class="result-label">HSL</div>
      <div class="result-value" id="hsl-value"></div>
    </div>
  </div>
</div>

在这个代码片段中，我们使用了一个文本框用于输入颜色值，一个转换按钮，和一个结果容器。在结果容器中，我们预留了三个小框，用于显示RGB、十六进制和HSL格式的颜色值。

CSS

接下来，我们需要为页面添加样式。以下是CSS代码片段：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f7f7f7;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

div {
  margin: 20px 0;
}

label {
  display: inline-block;
  font-weight: bold;
  margin-right: 10px;
}

input[type="text"] {
  font-size: 16px;
  padding: 8px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #cfcfcf;
}

button {
  font-size: 16px;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  background-color: #1e90ff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-left: 10px;
}

button:hover {
  background-color: #0066cc;
}

.result-container {
  display: flex;
  flex-wrap: wrap;
}

.result-box {
  width: 150px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 2px 2px 3px #cfcfcf;
}

.result-label {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
  text-align: center;
}

.result-value {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

这个代码片段定义了页面的基本样式。我们使用了一个浅灰色的背景色，并对不同的HTML元素进行了样式定义。在这个样式中，我们还为输入框和转换按钮添加了鼠标悬停效果，使它们会在鼠标悬停时变色。

JavaScript

最后，我们需要使用JavaScript来实现颜色转换功能。以下是JavaScript代码片段：

function convertColor() {
  const input = document.getElementById('color-input').value;

  // Convert RGB to HSL
  if (input.match(/^rgb\(/i)) {
    const rgbArray = input.match(/\d+/g);
    const r = parseInt(rgbArray[0]);
    const g = parseInt(rgbArray[1]);
    const b = parseInt(rgbArray[2]);
    const hsl = rgbToHsl(r, g, b);

    document.getElementById('rgb-value').innerHTML = `(${r}, ${g}, ${b})`;
    document.getElementById('hex-value').innerHTML = rgbToHex(r, g, b);
    document.getElementById('hsl-value').innerHTML = `(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
  }
  // Convert hexadecimal to RGB and HSL
  else if (input.match(/^#[A-F0-9]{6}$/i)) {
    const hex = input.substring(1);
    const r = parseInt(hex.substring(0,2),16);
    const g = parseInt(hex.substring(2,4),16);
    const b = parseInt(hex.substring(4,6),16);
    const hsl = rgbToHsl(r, g, b);

    document.getElementById('rgb-value').innerHTML = `(${r}, ${g}, ${b})`;
    document.getElementById('hex-value').innerHTML = input.toUpperCase();
    document.getElementById('hsl-value').innerHTML = `(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
  }
  // Convert HSL to RGB
  else if (input.match(/^hsl\(/i)) {
    const hslArray = input.match(/\d+/g);
    const h = parseInt(hslArray[0]) / 360;
    const s = parseInt(hslArray[1]) / 100;
    const l = parseInt(hslArray[2]) / 100;
    const rgb = hslToRgb(h, s, l);

    document.getElementById('rgb-value').innerHTML = `(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
    document.getElementById('hex-value').innerHTML = rgbToHex(rgb[0], rgb[1], rgb[2]);
    document.getElementById('hsl-value').innerHTML = input.toUpperCase();
  }
  // Invalid input
  else {
    alert('请输入合法颜色值！');
  }
}

// Helper function: convert RGB color to hexadecimal
function rgbToHex(r, g, b) {
  const hex = ((r << 16) | (g << 8) | b).toString(16);
  return '#' + ('000000' + hex).slice(-6).toUpperCase();
}

// Helper function: convert RGB color to HSL
function rgbToHsl(r, g, b) {
  r /= 255, g /= 255, b /= 255;

  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if(max == min){
      h = s = 0; // achromatic
  }else{
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      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 [Math.round(h*360), Math.round(s*100), Math.round(l*100)];
}

// Helper function: convert HSL color to RGB
function hslToRgb(h, s, l){
  let r, g, b;

  if(s === 0){
    r = g = b = l; // achromatic
  }else{
    const hue2rgb = (p, q, t) => {
      if(t < 0) t += 1;
      if(t > 1) t -= 1;
      if(t < 1/6) return p + (q - p) * 6 * t;
      if(t < 1/2) return q;
      if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    }

    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;

    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }

  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

document.getElementById('convert-btn').addEventListener('click', convertColor);

这个代码片段定义了三个辅助函数 rgbToHex()、rgbToHsl() 和 hslToRgb()，用于将RGB和HSL颜色值互相转换。

我们还定义了一个主函数 convertColor()，用于获取用户输入的颜色值，并根据颜色值的格式将其转换为RGB、十六进制和HSL格式并显示在结果框中。在结果框中，我们通过JavaScript修改了页面元素的innerHTML属性，从而更新了显示内容。

最后，我们还为转换按钮添加了一个事件侦听器，当用户单击按钮时调用 convertColor() 函数进行转换。

结论

在这篇文章中，我们学习了如何使用HTML、CSS和JavaScript创建一个简单的背景颜色转换器。通过这个小工具，用户可以方便地将颜色值在RGB、十六进制和HSL之间进行转换。

完整代码片段见Gist： https://gist.github.com/Ocean23333/2e1fe446f2752fe91f275c81932d1109