高级网站颜色转换解析——13 种 JavaScript 代码片段全解析

前端

2023-10-23 00:47:31

颜色转换在 JavaScript 中的强大工具

在网页和应用程序开发中，色彩扮演着至关重要的角色，传达着品牌标识、创造视觉层次结构并激发用户情绪。JavaScript 作为一种强大的编程语言，提供了丰富的工具来处理和转换颜色值，满足各种需求。

颜色表示：了解不同的格式

在 JavaScript 中，颜色值可以用多种方式表示：

十六进制值： 使用六位十六进制数字（#rrggbb）表示，例如 #ffffff（白色）和 #000000（黑色）。
RGB 值： 指定红色、绿色和蓝色分量的值（0-255），例如 rgb(255, 0, 0) 表示红色。
HSL 值： 使用色相、饱和度和亮度表示颜色（0-1），例如 hsl(0, 1, 0.5) 表示绿色。
rgba() 值： 扩展 RGB 格式，包括透明度分量（0-1），例如 rgba(255, 0, 0, 0.5) 表示半透明红色。

13 个 JavaScript 代码片段，轻松完成颜色转换

以下提供 13 个 JavaScript 代码片段，涵盖各种颜色转换需求：

// 1. 从十六进制值转换为 RGB 值
const hexToRgb = (hex) => ({
  r: parseInt(hex.slice(1, 3), 16),
  g: parseInt(hex.slice(3, 5), 16),
  b: parseInt(hex.slice(5), 16),
});

// 2. 从 RGB 值转换为十六进制值
const rgbToHex = (r, g, b) => `#${(1 << 24) + (r << 16) + (g << 8) + b}`.slice(1);

// 3. 从 HSL 值转换为 RGB 值
const hslToRgb = (h, s, l) => {
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = l - c / 2;
  const rgb = [0, 0, 0];
  if (h >= 0 && h < 60) {
    rgb[0] = c;
    rgb[1] = x;
  } else if (h >= 60 && h < 120) {
    rgb[0] = x;
    rgb[1] = c;
  } else if (h >= 120 && h < 180) {
    rgb[1] = c;
    rgb[2] = x;
  } else if (h >= 180 && h < 240) {
    rgb[1] = x;
    rgb[2] = c;
  } else if (h >= 240 && h < 300) {
    rgb[0] = x;
    rgb[2] = c;
  } else if (h >= 300 && h < 360) {
    rgb[0] = c;
    rgb[2] = x;
  }
  return rgb.map((x) => Math.round((x + m) * 255));
};

// 4. 从 RGB 值转换为 HSL 值
const rgbToHsl = (r, g, b) => {
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  if (max === min) return [0, 0, l];
  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h;
  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;
  }
  return [h * 60, s, l];
};

// 5. 从十六进制值转换为 HSL 值
const hexToHsl = (hex) => rgbToHsl(...hexToRgb(hex));

// 6. 从 HSL 值转换为十六进制值
const hslToHex = (h, s, l) => rgbToHex(...hslToRgb(h, s, l));

// 7. 从 rgba() 值转换为十六进制值
const rgbaToHex = (rgba) => {
  const match = rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
  if (!match) return null;
  const [r, g, b, a] = match.slice(1).map(Number);
  if (a === 1) return rgbToHex(r, g, b);
  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
};

// 8. 从十六进制值转换为 rgba() 值
const hexToRgba = (hex, opacity) => `rgba(${hexToRgb(hex).r}, ${hexToRgb(hex).g}, ${hexToRgb(hex).b}, ${opacity})`;

// 9. 淡化颜色
const lightenColor = (color, amount) => {
  const hsl = hexToHsl(color);
  hsl[2] += amount;
  if (hsl[2] > 1) hsl[2] = 1;
  return hslToHex(...hsl);
};

// 10. 加深颜色
const darkenColor = (color, amount) => {
  const hsl = hexToHsl(color);
  hsl[2] -= amount;
  if (hsl[2] < 0) hsl[2] = 0;
  return hslToHex(...hsl);
};

// 11. 互补色
const getComplementaryColor = (color) => {
  const hsl = hexToHsl(color);
  hsl[0] += 180;
  if (hsl[0] > 360) hsl[0] -= 360;
  return hslToHex(...hsl);
};