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

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 進位色碼,將紅色、綠色、藍色的值從十進制轉換為十六進制。

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