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