Javascript实现Web颜色值转换

下面就是关于“Javascript实现Web颜色值转换”的完整攻略：

介绍

Web颜色值表示一种在计算机屏幕上渲染颜色的方法，常见的Web颜色值包括RGB、HEX和HSL等。JavaScript可以通过一些方法将这些颜色值格式相互转换，为Web开发者提供更多的颜色控制手段。本文将介绍一些JavaScript实现Web颜色值转换的方法。

RGB转换

RGB颜色值由三个数字分别表示红色、绿色和蓝色的亮度，值的范围为0-255。JavaScript可以通过以下方法将RGB转换为其他颜色值：

RGB转HEX

function rgbToHex(rgb) {
  var r = rgb[0].toString(16);
  var g = rgb[1].toString(16);
  var b = rgb[2].toString(16);

  if (r.length == 1)
    r = "0" + r;
  if (g.length == 1)
    g = "0" + g;
  if (b.length == 1)
    b = "0" + b;

  return "#" + r + g + b;
}

console.log(rgbToHex([255, 255, 255])); // #ffffff

RGB转HSL

function rgbToHsl(rgb) {
  var r = rgb[0] / 255;
  var g = rgb[1] / 255;
  var b = rgb[2] / 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, s, l];
}

console.log(rgbToHsl([255, 255, 255])); // [0, 0, 1]

HEX转换

HEX颜色值由#符号开头的六位16进制数值表示。JavaScript可以通过以下方法将HEX转换为其他颜色值：

HEX转RGB

function hexToRgb(hex) {
  var r = parseInt(hex.slice(1, 3), 16);
  var g = parseInt(hex.slice(3, 5), 16);
  var b = parseInt(hex.slice(5, 7), 16);
  return [r, g, b];
}

console.log(hexToRgb('#ffffff')); // [255, 255, 255]

HEX转HSL

function hexToHsl(hex) {
  var rgb = hexToRgb(hex);
  return rgbToHsl(rgb);
}

console.log(hexToHsl('#ffffff')); // [0, 0, 1]

HSL转换

HSL颜色值由三个数字分别表示色相、饱和度和亮度。JavaScript可以通过以下方法将HSL转换为其他颜色值：

HSL转RGB

function hslToRgb(hsl) {
  var h = hsl[0];
  var s = hsl[1];
  var l = hsl[2];

  var r, g, b;

  if (s == 0) {
    r = g = b = l;
  } else {
    var hue2rgb = function 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;
    }
    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    var p = 2 * l - q;
    r = hue2rgb(p, q, h + 1 / 3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1 / 3);
  }

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

console.log(hslToRgb([0, 1, 0.5])); // [255, 0, 0]

HSL转HEX

function hslToHex(hsl) {
  var rgb = hslToRgb(hsl);
  return rgbToHex(rgb);
}

console.log(hslToHex([0, 1, 0.5])); // #ff0000

示例说明

示例一：RGB转HEX

假设现在我们需要将RGB颜色值[255,0,0]转换为HEX颜色值。我们可以使用以下代码：

var rgb = [255, 0, 0];
var hex = rgbToHex(rgb);
console.log(hex);  // #ff0000

示例二：HSL转RGB

假设现在我们需要将HSL颜色值[0.5, 1, 0.5]转换为RGB颜色值。我们可以使用以下代码：

var hsl = [0.5, 1, 0.5];
var rgb = hslToRgb(hsl);
console.log(rgb); // [128, 0, 128]

以上就是关于JavaScript实现Web颜色值转换的完整攻略。