为你的网页挑选颜色：原生JavaScript颜色选择器

前端

2023-09-20 06:32:20

前言：

在网页设计中，选择合适的颜色是至关重要的。颜色能传达信息、创造氛围，甚至影响用户体验。因此，前端开发人员需要一个工具来轻松选择和应用颜色。

本文将介绍如何使用原生JavaScript构建一个颜色选择器。这个颜色选择器拥有直观的用户界面，支持多种颜色格式，并可以轻松集成到你的网页中。

实现步骤：

1. 项目准备：

首先，创建一个名为ColorPicker的空目录。在ColorPicker目录中，创建index.html、style.css和script.js三个文件。

2. HTML结构：

在index.html中，添加以下HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="color-picker"></div>

  <script src="script.js"></script>
</body>
</html>

3. CSS样式：

在style.css中，添加以下CSS代码：

#color-picker {
  width: 250px;
  height: 250px;
  border: 1px solid black;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

#color-picker input {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

#color-picker button {
  width: 100%;
  padding: 5px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
}

4. JavaScript逻辑：

在script.js中，添加以下JavaScript代码：

// 获取元素
const colorPicker = document.getElementById('color-picker');
const hexInput = document.getElementById('hex-input');
const rgbInput = document.getElementById('rgb-input');
const hslInput = document.getElementById('hsl-input');
const button = document.getElementById('button');

// 添加事件监听器
hexInput.addEventListener('input', updateColor);
rgbInput.addEventListener('input', updateColor);
hslInput.addEventListener('input', updateColor);
button.addEventListener('click', generateRandomColor);

// 更新颜色
function updateColor() {
  let hexColor = hexInput.value;
  let rgbColor = rgbInput.value;
  let hslColor = hslInput.value;

  // 验证输入
  if (hexColor.startsWith('#') && hexColor.length === 7) {
    rgbColor = hexToRgb(hexColor);
    hslColor = rgbToHsl(rgbColor);
  } else if (rgbColor.startsWith('rgb') && rgbColor.includes(',')) {
    hexColor = rgbToHex(rgbColor);
    hslColor = rgbToHsl(rgbColor);
  } else if (hslColor.startsWith('hsl') && hslColor.includes(',')) {
    hexColor = hslToHex(hslColor);
    rgbColor = hslToRgb(hslColor);
  }

  // 更新颜色值
  hexInput.value = hexColor;
  rgbInput.value = rgbColor;
  hslInput.value = hslColor;

  // 更新颜色预览
  colorPicker.style.backgroundColor = hexColor;
}

// 生成随机颜色
function generateRandomColor() {
  let hexColor = '#' + Math.random().toString(16).substring(2, 8);
  let rgbColor = hexToRgb(hexColor);
  let hslColor = rgbToHsl(rgbColor);

  // 更新颜色值
  hexInput.value = hexColor;
  rgbInput.value = rgbColor;
  hslInput.value = hslColor;

  // 更新颜色预览
  colorPicker.style.backgroundColor = hexColor;
}

// 颜色转换函数
function hexToRgb(hexColor) {
  let r = parseInt(hexColor.substring(1, 3), 16);
  let g = parseInt(hexColor.substring(3, 5), 16);
  let b = parseInt(hexColor.substring(5, 7), 16);
  return `rgb(${r}, ${g}, ${b})`;
}

function rgbToHex(rgbColor) {
  let rgb = rgbColor.match(/\d+/g);
  let r = parseInt(rgb[0]).toString(16).padStart(2, '0');
  let g = parseInt(rgb[1]).toString(16).padStart(2, '0');
  let b = parseInt(rgb[2]).toString(16).padStart(2, '0');
  return `#${r}${g}${b}`;
}

function rgbToHsl(rgbColor) {
  let rgb = rgbColor.match(/\d+/g);
  let r = rgb[0] / 255;
  let g = rgb[1] / 255;
  let b = rgb[2] / 255;

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

  if (max === min) {
    let h = 0;
    let s = 0;
  } else {
    let d = max - min;
    let s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (r === max) {
      let h = (g - b) / d + (g < b ? 6 : 0);
    } else if (g === max) {
      let h = (b - r) / d + 2;
    } else {
      let h = (r - g) / d + 4;
    }
    let h = Math.round(h * 60);
  }

  return `hsl(${h}, ${s * 100}%, ${l * 100}%)`;
}

function hslToRgb(hslColor) {
  let hsl = hslColor.match(/\d+/g);
  let h = hsl[0] / 360;
  let s = hsl[1] / 100;
  let l = hsl[2] / 100;

  let c = (1 - Math.abs(2 * l - 1)) * s;
  let x = c * (1 - Math.abs((h * 6) % 2 - 1));
  let m = l - c / 2;

  let r, g, b;
  if (h < 1 / 6) {
    r = c;
    g = x;
    b = 0;
  } else if (h < 1 / 2) {
    r = x;
    g = c;
    b = 0;
  } else if (h < 2 / 3) {
    r = 0;
    g = c;
    b = x;
  } else if (h < 3 / 4) {
    r = 0;
    g = x;
    b = c;
  } else if (h < 5 / 6) {
    r = x;
    g = 0;
    b = c;
  } else {
    r = c;
    g = 0;
    b = x;
  }

  let r = Math.round((r + m) * 255);
  let g = Math.round((g + m) * 255);
  let b = Math.round((b + m) * 255);

  return `rgb(${r}, ${g}, ${b})`;
}