RGB 颜色值转换成 HSL

04/21

2020

saber 撰写 hsl javascript RGB 色彩空间 2条回复 1,885次查看

RGB 是用三原色的混合来表示颜色的，HSL 的三个维度则是色相、饱和度、亮度。

RGB 比较贴近显示器的发光原理，大部分电脑屏幕的每个像素都是由红绿蓝三个发光点组成，根据 RGB 值控制发光强度。但是对于普通人来说，看 RGB 值的数字比较难以理解，很难从 RGB 值里面出这个颜色是什么颜色，饱和度高不高，亮度高不高。HSL 正是直接描述这三个维度的，因此在进行一些图像处理时，HSL 会更加合适。

根据搜索到的转换公式，我编写了一个函数，用于将 RGB 值转换成 HSL 值。

function rgb2hsl(r, g, b) {
  r = r / 255
  g = g / 255
  b = b / 255
  const max = Math.max(r, g, b)
  const min = Math.min(r, g, b)

  let h
  let s
  let v
  let base
  if (max === min) {
    h = 0
  } else {
    if (max === r) {
      base = 60 * ((g - b) / (max - min))
      if (g >= b) {
        h = base
      } else {
        h = base + 360
      }
    }
    if (max === g) {
      base = 60 * ((b - r) / (max - min))
      h = base + 120
    }
    if (max === b) {
      base = 60 * ((r - g) / (max - min))
      h = base + 240
    }
  }

  h = Math.round(h)

  if (max === 0) {
    s = 0
  } else {
    s = Math.round((1 - min / max) * 100) / 100
  }

  l = Math.round(((max + min) / 2) * 100) / 100

  return [h, s, l]
}

把 rgb 值作为参数传进去就行，例如：

// 输入：
rgb2hsl(76,188,27)
// 输出：
[102, 0.86, 0.42]

这是 HSL 色彩空间的示意图。它像是一个圆柱体。

H 色相，单位是度数，0° - 360°。以我自己的理解，如果按 60° 为一个单位，那么 0°-360° 的颜色依次为红黄绿青蓝紫红，所以根据 H 的度数，我们就可以知道这是什么颜色。

S 饱和度，单位是百分比，0% 到 100%，从没有饱和度（白色）到完全饱和。

L 亮度，单位是百分比，0% 到 100%，从没有亮度（黑色）到全亮（白色）。

假如一个 HSL 颜色值是 300,0.4,0.4，你能想到它是什么颜色吗？