RGB轉HEX的應用

在網站設計中，我們常常需要選擇顏色來設置頁面的風格。而以 RGB 色彩模式的形式確認顏色之後，我們需要將其轉換為其他的顏色模式。其中，RGB 轉為 HEX 是極為常用的操作，它可以將顏色的 RGB 數值轉換為 HEX 格式，方便我們在 CSS 中使用。下面，我們將詳細討論 RGB 轉 HEX 的相關內容。

一、RGB轉HEX在線

如果你需要進行簡單的 RGB 轉 HEX 操作，可以選擇使用相關在線工具。在線工具可以方便地將 RGB 數值轉為 HEX 格式，無需運用公示計算。以下是一個實例：

function rgbToHex(r, g, b) {
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);

  if (r.length == 1)
    r = "0" + r;
  if (g.length == 1)
    g = "0" + g;
  if (b.length == 1)
    b = "0" + b;

  return "#" + r + g + b;
}

console.log(rgbToHex(0, 255, 0)); // #00ff00

該實例中，我們定義了一個 RGB 轉 HEX 的函數 rgbToHex，它將 RGB 數值轉換為 HEX 格式，然後在控制台輸出 RGB 為 0,255,0 的 HEX 數值 #00ff00。

二、RGB轉換

1. RGB轉HEX 顏色數值轉換

將 RGB 色彩模式的數值轉換為 HEX 色彩模式的數值，這是最基礎的顏色數字轉化的需求。其對應的公式如下：

R的十六進位數值×65536 + G的十六進位數值×256 + B的十六進位數值 = 最終的Hex十六進位數值

在計算機中，十六進位數值 0x 是十進位數值的 16 倍，因此需要將 RGB 數值轉換為 0~255 之間的值，再將其編寫為十六進位形式，在使用公式計算。

例如，我們將 RGB 數值 R=255, G=99, B=71 轉換為 HEX 格式的數值。

255, 99, 71 轉換為 0xff, 0x63, 0x47
0xff × 65536 + 0x63 × 256 + 0x47 = 16737791
因此，RGB 數值為 255,99,71 的 HEX 格式的數值為 #ff6347

2. RGB轉HEX 16進位顏色代碼轉換

CSS 中，我們常常使用十六進位顏色代碼表示顏色。如果需要將十六進位顏色代碼轉換為 RGB 數值，我們可以採用 HEX 轉 RGB 的公式進行計算：

R = 16進位的R數值 × 16進位的R數值   其中，R的十六進位數值是0-FF，需要將其轉換為十進位的數值。
G = 16進位的G數值 × 16進位的G數值   其中，G的十六進位數值是0-FF，需要將其轉換為十進位的數值。
B = 16進位的B數值 × 16進位的B數值   其中，B的十六進位數值是0-FF，需要將其轉換為十進位的數值。
最終RGB數值為：R, G, B

例如，我們將十六進位顏色代碼 #ff6347 轉換為 RGB 數值。

首先，將 #ff6347 拆分為 ff、63、47 三個十六進位數值
R = 0xff × 0xff = 65280
G = 0x63 × 0x63 = 16129
B = 0x47 × 0x47 = 7127
因此，HEX 格式數值 #ff6347 對應的 RGB 數值為 R=255, G=99, B=71

三、RGB轉YCbCr

YCbCr 是一種基於 RGB 色彩模式的彩色空間。在數字電視、圖像和視頻處理領域中十分常用，這裡我們簡單介紹一下如何從 RGB 色彩模式轉為 YCbCr 色彩模式。

要將 RGB 色彩模式轉為 YCbCr 的數值，需要使用以下公式：

Y = 0.299 * R + 0.587 * G + 0.114 * B
Cb = 128 - 0.168736 * R - 0.331264 * G + 0.5 * B
Cr = 128 + 0.5 * R - 0.418688 * G - 0.081312 * B

其中，Y 表示亮度，Cb 和 Cr 表示色度。

例如，RGB 色彩數值 R=255, G=255, B=255，我們需要將其轉換為 YCbCr 色彩模式的數值。

Y = 0.299 * 255 + 0.587 * 255 + 0.114 * 255 = 255
Cb = 128 - 0.168736 * 255 - 0.331264 * 255 + 0.5 * 255 = 128
Cr = 128 + 0.5 * 255 - 0.418688 * 255 - 0.081312 * 255 = 128
因此，RGB 數值為 255,255,255 對應的 YCbCr 色彩模式的數值是 Y=255, Cb=128, Cr=128。

四、RGB轉CMYK

CMYK 是一種以四種顏色（青色、品紅色、黃色、黑色）來表示互補色的顏色模式。將 RGB 轉為 CMYK 時，需要使用以下公式計算：

K = 1 - max(R, G, B) / 255.0
C = (1 - R / 255.0 - K) / (1 - K)
M = (1 - G / 255.0 - K) / (1 - K)
Y = (1 - B / 255.0 - K) / (1 - K)

其中K表示黑色色度，C、M、Y分別表示青色、品紅色、黃色色度。

例如，RGB 數值為 R=0, G=255, B=0，我們需要將其轉換為 CMYK。

K = 1 - max(0, 255, 0) / 255.0 = 0
C = (1 - 0 / 255.0 - 0) / (1 - 0) = 1
M = (1 - 255 / 255.0 - 0) / (1 - 0) = 0
Y = (1 - 0 / 255.0 - 0) / (1 - 0) = 1
因此，RGB 數值為 0,255,0 對應的 CMYK 數值為 C=1, M=0, Y=1, K=0。

五、RGB轉16進位

在 CSS 中，我們常常採用 HEX 色彩模式表示顏色。要將 RGB 色彩模式轉為 HEX，需要先將 RGB 數值轉換為 0~255 的範圍內，再將其轉換為十六進位格式。以下是一個實例：

function rgbToHex(r, g, b) {
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);

  if (r.length == 1)
    r = "0" + r;
  if (g.length == 1)
    g = "0" + g;
  if (b.length == 1)
    b = "0" + b;

  return "#" + r + g + b;
}

console.log(rgbToHex(0, 255, 0)); // #00ff00

該實例中，我們定義了一個 RGB 轉 HEX 的函數 rgbToHex，它將 RGB 數值轉換為 HEX 格式，並在控制台輸出 RGB 為 0,255,0 的 HEX 數值 #00ff00。

六、RGB轉RGB延遲

當我們將 RGB 導入到一些設備或操作系統時，可能會導致顏色變淺或變暗。這就是 RGB 延遲現象。使用以下公式，我們可以將 RGB 延遲轉換為正常的 RGB 數值：

R = 255 * (R / 255) ** 2.2
G = 255 * (G / 255) ** 2.2
B = 255 * (B / 255) ** 2.2

例如，RGB 數值為 R=255, G=165, B=0，我們需要將其轉換為正常的 RGB 延遲。

R = 255 * (255 / 255) ** 2.2 = 255
G = 255 * (165 / 255) ** 2.2 = 140
B = 255 * (0 / 255) ** 2.2 = 0
因此，RGB 數值為 255,165,0 的 RGB 延遲值為 255,140,0。

七、RGBA轉RGB

RGBA 是一種顏色模式，其中 A 表示 Alpha 透明度。在有些情況下，我們需要將 RGBA 轉換為 RGB。例如，在網頁設計中，我們需要將 RGBA 格式的透明背景轉換為 RGB 格式。

要將 RGBA 色彩模式轉為 RGB，需要使用以下公式：

R = (1 - A) * R + A * B
G = (1 - A) * G + A * B
B = (1 - A) * B + A * B

其中 R、G、B 表示 RGB 數值，A 表示 Alpha 透明度。

例如，RGBA 數值為 R=255, G=99, B=71, A=0.5。我們需要將其轉換為 RGB 數值。

R = (1 - 0.5) * 255 + 0.5 * 0 = 127.5 = 128
G = (1 - 0.5) * 99 + 0.5 * 0 = 49.5 = 50
B = (1 - 0.5) * 71 + 0.5 * 0 = 35.5 = 36
因此，RGBA 數值為 255,99,71,0.5 對應的 RGB 數值為 128,50,36。

總結

RGB 轉 HEX 是網站設計中最為常用的操作之一。在我們進行網站配色時，經常需要將 RGB 數值轉為 HEX 格式，以便在 CSS 中進行使用。在本文中，我們分別從 RGB 色彩模式的數值轉換為 HEX 色彩模式、RGB 轉換、RGB 色彩模式轉為 YCbCr、RGB 色彩模式轉為 CMYK、RGB 色彩模式轉為 16 進位格式、RGB 延遲和 RGBA 色彩模式轉為 RGB 等多個方面進行了詳細討論，相信對網站設計師們能夠有所幫助。

原創文章，作者：VKNU，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/149104.html