在 JavaScript 中將 RGB 轉換為 HEX

本教程將討論如何使用 JavaScript 中的 toString() 函式將 RGB 轉換為 HEX。

使用 JavaScript 中的 toString() 函式將 RGB 轉換為 HEX

JavaScript 中不同顏色空間之間的轉換很困難，因為 JavaScript 中沒有預定義的函式可以在不同顏色空間之間進行轉換。

因此，我們必須製作自己的轉換函式，將一種顏色空間轉換為另一種顏色空間。要製作轉換函式，我們需要知道兩個顏色空間的區別。

例如 RGB 和 HEX 顏色空間的區別在於 RGB 是十進位制格式，HEX 是十六進位制格式。要從 RGB 轉換為 HEX，我們只需要將每種顏色的十進位制數從 RGB 轉換為十六進位制，然後將它們連線在一起即可建立等效的十六進位制顏色空間。

要將值從十進位制更改為十六進位制，我們可以使用 toString(16) 函式。如果轉換後的數字的長度是 1，我們必須在它前面新增一個 0。請參考下面的程式碼。

function ColorToHex(color) {
  var hexadecimal = color.toString(16);
  return hexadecimal.length == 1 ? '0' + hexadecimal : hexadecimal;
}

function ConvertRGBtoHex(red, green, blue) {
  return '#' + ColorToHex(red) + ColorToHex(green) + ColorToHex(blue);
}
console.log(ConvertRGBtoHex(255, 100, 200));

輸出：

#ff64c8

我們還可以使用 parseInt() 函式將 HEX 轉換為 RGB。一個 HEX 顏色空間包含 6 個數字，不包括第一個數字。我們需要獲取前 2 位數字並使用 parseInt() 函式將它們轉換為十進位制格式，這將是我們的紅色。類似地，接下來的兩位數字將為我們提供綠色，其餘數字將為我們提供藍色。

例如，讓我們使用 parseInt() 函式將 HEX 顏色轉換為 RGB。請參考下面的程式碼。

var hex = '#ff64c8';
var red = parseInt(hex[1] + hex[2], 16);
var green = parseInt(hex[3] + hex[4], 16);
var blue = parseInt(hex[5] + hex[6], 16);
console.log(red, green, blue);

輸出：

255 100 200

你還可以使用上面的程式碼建立一個函式，這樣你就不必再次編寫程式碼。同樣，你可以將任何顏色空間轉換為另一種顏色空間；你只需要瞭解不同色彩空間之間的區別。