RGB和HSL（也叫HSB/HSV）是两种色彩空间，即：红,绿,蓝（Red,Green,Blue）和色调,饱和度,亮度（Hue,Saturation,Lightness或Brightness或Value），前者适用于机器采样，目前的显示器颜色即由这三种基色构成，而后者更符合人类的直观感觉，比如人一般表达一个颜色会这样说：有点浓的暗红色。而不会说红色占多少，绿色占多少，蓝色占多少。

在Windows的标准颜色对话框中均包含这两种表示方法。RGB的取值范围在0~255之间，HSL的取值在0~1之间，但Windows系统处理成了0~240取值范围，各种不同环境下的取值参照附表。另外还有CMY/CMYK颜色空间，常用于印刷行业，以后再将RGB-CMY-CMYK的转换算法贴出。  

hsl转rgb

/**
 *
 * @param {Number} H 色相 [0,360)
 * @param {Number} S 饱和度 [0,1]
 * @param {Number} L 亮度 [0,1]
 * @param {Boolean} stringMode 是否返回字符串模式
 */
function HSL2RGB(H = 0, S = 0, L = 0, stringMode = false) {
  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 vRGB = []
  if (H >= 0 && H < 60) {
    vRGB.push(C, X, 0)
  } else if (H >= 60 && H < 120) {
    vRGB.push(X, C, 0)
  } else if (H >= 120 && H < 180) {
    vRGB.push(0, C, X)
  } else if (H >= 180 && H < 240) {
    vRGB.push(0, X, C)
  } else if (H >= 240 && H < 300) {
    vRGB.push(X, 0, C)
  } else if (H >= 300 && H < 360) {
    vRGB.push(C, 0, X)
  }
  const [vR, vG, vB] = vRGB
  const R = 255 * (vR + m)
  const G = 255 * (vG + m)
  const B = 255 * (vB + m)

  if (stringMode) {
    return `rgb(${R},${G},${B})`
  }

  return { R, G, B }
}

2.rgb转hsl

/**
 * @description rgb转化为hsl
 * @param {Number} R [0,255]
 * @param {Number} G [0,255]
 * @param {Number} B [0,255]
 * @param {Boolean} stringMode 是否返回字符串模式
 */
function RGB2HSL(R = 0, G = 0, B = 0, stringMode = false) {
  const _R = R / 255;
  const _G = G / 255;
  const _B = B / 255;
  const Cmax = Math.max(_R, _G, _B);
  const Cmin = Math.min(_R, _G, _B);
  const V = Cmax - Cmin;

  let H = 0;
  if (V === 0) {
    H = 0;
  } else if (Cmax === _R) {
    H = 60 * (((_G - _B) / V) % 6);
  } else if (Cmax === _G) {
    H = 60 * ((_B - _R) / V + 2);
  } else if (Cmax === _B) {
    H = 60 * ((_R - _G) / V + 4);
  }

  H = Math.floor(backCycle(H, 360));
  const L = numberFixed((Cmax + Cmin) / 2);
  const S = V === 0 ? 0 : numberFixed(V / (1 - Math.abs(2 * L - 1)));

  if (stringMode) {
    return `hsl(${H},${numberFixed(100 * S)}%,${numberFixed(100 * L)}%)`;
  }

  return { H, S, L };
}

// utils
function backCycle(num, cycle) {
  let index = num % cycle;
  if (index < 0) {
    index += cycle;
  }
  return index;
}
function numberFixed(num = 0, count = 3) {
  const power = Math.pow(10, count);
  return Math.floor(num * power) / power;
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/6716