什麼是 RGB 轉 Hex 轉換器?
這個工具能把 RGB 色彩——也就是紅(Red)、綠(Green)、藍(Blue)三個通道,每個數值介於 0 到 255——轉換成 #RRGGBB 格式的十六進位色碼。在 HTML、CSS、SVG 以及多數設計軟體中,Hex 色碼都是指定顏色的標準寫法,因此把 RGB 換成 Hex,對網頁工程師和設計師來說可說是每天都會遇到的工作。
使用方式
分別填入紅、綠、藍三個數值(每個皆介於 0 到 255),就能立即看到對應的 Hex 色碼與顏色預覽方塊。若輸入超出範圍的數字,系統會自動修正至 0-255 之間。
公式說明
每個通道的數值(0-255)會被寫成兩位數的十六進位數字。第一位是數值除以 16 的商(高位),第二位則是除以 16 後的餘數(低位),並以 0-9 與 A-F 表示。最後把三組兩位數結果接在 # 後面即可:
$$\text{Hex} = \text{\#} \, \overline{\text{Red}}_{16} \, \overline{\text{Green}}_{16} \, \overline{\text{Blue}}_{16}$$
實際範例
以「番茄紅(tomato)」為例:\(R=255\)、\(G=99\)、\(B=71\)。R 的部分:$$255 \div 16 = 15 \rightarrow \text{F}, \ \text{餘 } 15 \rightarrow \text{F}$$所以是「FF」。G 的部分:$$99 \div 16 = 6 \rightarrow 6, \ \text{餘 } 3 \rightarrow 3$$所以是「63」。B 的部分:$$71 \div 16 = 4 \rightarrow 4, \ \text{餘 } 7 \rightarrow 7$$所以是「47」。將三段串接起來即為:#FF6347。
常見問題
為什麼 Hex 色碼是 6 位數?三個通道各以兩位十六進位數字表示(\(2 \times 3 = 6\)),這樣就能涵蓋全部 16,777,216 種可能的顏色。
大寫或小寫都可以嗎?在 CSS 中兩者皆有效。本工具輸出大寫字母(A-F),但 #ff6347 與 #FF6347 代表的顏色完全相同。
那透明度呢?標準的 Hex 色碼不含 Alpha(透明度)通道。若要加入不透明度,可使用 8 位數的 #RRGGBBAA 寫法,不過本轉換器產生的是常見的 6 位數色碼。