JavaScript, HSV 或 HSL 色码转换 RGB

HSL 颜色编码为(Hue 色调、Saturation 饱和度、Lightness 亮度)。CSS 中 Hue 色调以 0 ~ 360 圆圈展开使用整数 <number> 表示为色环的角度。Saturation 饱和度和 Lightness 亮度以 0% ~ 100% 百分比表示。

以下列 range 数字滑动条,调整 Hue, Saturation, Lightness 直接显示颜色结果。
亦可输入 HEX (十六进位色码) 或点选下方 216 网页安全颜色来计算。建议在桌型电脑,行动装置可能不太理想。




几种 CSS 色码转换相关的 JavaScript 程式代码,但整合后使用相关软体测试比较时,例如 Photoshop 的色彩选择器,JavaScript 色码转换上有些部份仍有一点点因为小数点的进位,产生了些微小差距您可以尝试比较看看。

https://zh.wikipedia.org/wiki/HSL和HSV色彩空间


HSV 转换为 RGB

HSV (色相、饱和度、明度) 是描述颜色的模型,可以用圆锥体来表示。HSV 转换为 RGB (红、绿、蓝) 的过程是将圆锥体的底面切成六个扇形,每个扇形代表其中基本颜色,然后根据色相的角度和饱和度的半径来选择扇形内的颜色,最后根据明度的高度来调整颜色的亮度,得到 RGB 的三个分量。

function HSVtoRGB(h, s, b) {
  s /= 100;
  b /= 100;
  let a = function (n) {
    return b * (1 - s * Math.max(0, Math.min((n + h / 60) % 6, 4 - (n + h / 60) % 6, 1)));
  };
  return [255 * a(5), 255 * a(3), 255 * a(1)]
}

以 Array 阵列方式返回结果。

(200, 60, 10) ➔ 102, 204, 255


RGB 转换为 HSV

function RGBToHSV(r, g, b) {
  let max = Math.max(r, g, b),
  min = Math.min(r, g, b),
  d = max - min,
  h,
  s = (max === 0 ? 0 : d / max),
  v = max / 255;
  switch (max) {
    case min:
      h = 0;
      break;
    case r:
      h = (g - b) + d * (g < b ? 6 : 0);
      h /= 6 * d;
      break;
    case g:
      h = (b - r) + d * 2;
      h /= 6 * d;
      break;
    case b:
      h = (r - g) + d * 4;
      h /= 6 * d;
      break;
  }
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    v: Math.round(v * 100)
  };
}

return 以 object 物件返回结果,乘数是为了依照 CSS 符合格式的值。

(102, 204, 255) ➔ 200, 60, 10


HEX 转换为 RGB (十六进位)

十六进位转换到 RGB 颜色,JavaScript 已经有 parseInt() 可以直接转换。

function HextoRGB(hex) {
  let R = parseInt("0x" + hex.substr(0, 2), 16);
  let G = parseInt("0x" + hex.substr(2, 2), 16);
  let B = parseInt("0x" + hex.substr(4, 2), 16);
  return [R, G, B];
}

以 Array 阵列方式返回 R, G, B 结果。

(66CCFF) ➔ 102, 204, 255


RGB 转换为 HEX (十六进位)

将 RGB 转换为 16 进位色码,将红色、绿色、蓝色的值从十进制转换为十六进制。HEX (十六进制) 是用六个数字或字母来表示颜色的编码方式,它可以用一个立方体来表示。HEX 转换为 RGB 的过程是将六个数字或字母分成三组,每组代表一种基本颜色的强度,然后根据十六进制的规则将每组转换为十进制的数字,得到 RGB 的三个分量。

function toFixHEX(n) {
  if (n.length == 1) {
    n = "0" + n;
  }
  return n;
}
function RGBtoHEX(r, g, b) {
  let ColorR = Math.ceil(r).toString(16);
  let ColorG = Math.ceil(g).toString(16);
  let ColorB = Math.ceil(b).toString(16);
  let ColorRGB = "#" + toFixHEX(ColorR) + toFixHEX(ColorG) + toFixHEX(ColorB);
  return ColorRGB;
}

(102, 204, 255) ➔ #66CCFF