JS HEX十六进制与RGB, HSL颜色的相互转换要在JavaScript中实现十六进制（HEX）颜色与RGB和HSL

要在JavaScript中实现十六进制（HEX）颜色与RGB和HSL颜色的相互转换，您可以使用一些基本的数学和字符串操作

HEX到RGB转换：首先，我们将讨论如何将十六进制表示的颜色转换为RGB表示。HEX颜色由一个带有6个字符的字符串表示，例如"#FF0000"代表红色。
```
function hexToRgb(hex) {
  // 移除#号并拆分HEX值
  var cleanHex = hex.replace('#', '');
  var r = parseInt(cleanHex.substring(0, 2), 16);
  var g = parseInt(cleanHex.substring(2, 4), 16);
  var b = parseInt(cleanHex.substring(4, 6), 16);
  
  return { r, g, b };
}
```
这个函数接受一个十六进制颜色值作为输入，并通过解析字符串将其转换为RGB值。我们使用parseInt函数将拆分的十六进制值转换为十进制整数，并将其作为RGB对象返回。
RGB到HEX转换：接下来，我们将探讨如何将RGB表示的颜色转换为十六进制表示。RGB颜色由三个整数值表示，分别代表红、绿和蓝的亮度。
```
function rgbToHex(rgb) {
  var r = rgb.r.toString(16).padStart(2, '0');
  var g = rgb.g.toString(16).padStart(2, '0');
  var b = rgb.b.toString(16).padStart(2, '0');
  
  return '#' + r + g + b;
}
```
这个函数接受一个包含r、g和b属性的RGB对象，并将其转换为十六进制格式。我们使用toString(16)方法将整数转换为十六进制字符串，并使用padStart方法在需要时添加前导零。
HEX到HSL转换：现在，让我们看看如何将十六进制表示的颜色转换为HSL（色调、饱和度、亮度）表示。HSL颜色由三个值组成，分别代表颜色的色调、饱和度和亮度。
```
function hexToHsl(hex) {
  var rgb = hexToRgb(hex);
  return rgbToHsl(rgb);
}
```
在这里，我们利用之前定义的hexToRgb函数将HEX值转换为RGB值，然后再使用rgbToHsl函数将RGB值转换为HSL值。

RGB到HSL转换：最后，我们将讨论如何将RGB表示的颜色转换为HSL表示。

function rgbToHsl(rgb) {
  var r = rgb.r / 255;
  var g = rgb.g / 255;
  var b = rgb.b / 255;

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

  if (max === min) {
    h = s = 0; // 灰色
  } else {
    var 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 { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

这个函数接受一个包含r、g和b属性的RGB对象，并将其转换为HSL格式。我们首先将RGB值归一化到0到1之间，然后根据最大和最小值计算亮度（l）值。接下来，我们根据最大和最小值的差异计算饱和度（s）值。最后，我们通过计算红、绿和蓝之间的差异来计算色调（h）值。

HSL到HEX转换：接下来，我们将探讨如何将HSL表示的颜色转换为十六进制表示。
```
function hslToHex(hsl) {
  var rgb = hslToRgb(hsl);
  return rgbToHex(rgb);
}
```
这个函数接受一个包含h、s和l属性的HSL对象，并将其转换为HEX格式。我们利用之前定义的hslToRgb函数将HSL值转换为RGB值，然后再使用rgbToHex函数将RGB值转换为十六进制格式。

HSL到RGB转换：最后，我们将讨论如何将HSL表示的颜色转换为RGB表示。

function hslToRgb(hsl) {
  var h = hsl.h / 360;
  var s = hsl.s / 100;
  var l = hsl.l / 100;

  if (s === 0) {
    var r = g = b = l; // 灰色
  } else {
    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    var p = 2 * l - q;

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

  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
}

function hueToRgb(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;
}

在这个函数中，我们将HSL值的色调（h）、饱和度（s）和亮度（l）归一化到0到1之间。如果饱和度为0，则颜色为灰色，RGB的每个分量都等于亮度。否则，我们根据HSL的定义计算出相应的红、绿和蓝值。