RGB轉HEX：網頁顏色碼換算完整教學

RGB 同 HEX 都係數碼設計同網頁開發常用嘅顏色表示方式，但兩者基於唔同嘅顏色模型，好多新手第一次接觸嘅時候總會撈亂。其實只要搞清楚兩個模型嘅基本原理，轉換一啲都唔難。

兩種顏色模型各有咩特點？

RGB（紅綠藍三原色）

用紅(R)、綠(G)、藍(B)三個數值表示顏色，每個值由0到255。

優點：

• 直觀易懂，三原色混合概念清楚
• 數值範圍明確
• 適合程式計算

缺點：

• 難以人手調整亮度同飽和度
• 顏色關係唔直觀
• 透明度需要 RGBA

HEX（十六進制顏色碼）

網頁最常用嘅顏色表示法，用 # 加六個十六進制數字，例如 #FF5733。

優點：

• 寫法簡潔，網頁開發最常用
• 復制貼上方便
• 幾乎所有設計工具都支援

缺點：

• 唔太直觀，難以憑代碼估計顏色
• 透明度需要另加兩位
• 計算時要轉換

轉換原理簡單講

HEX 同 RGB 其實係同一個顏色模型嘅兩種寫法——都係基於紅綠藍三原色。HEX 用十六進制表示，RGB 用十進制表示。每兩位 HEX 對應一個 RGB 通道，例如 #FF5733 就係 R=255 (FF)、G=87 (57)、B=51 (33)。

實際例子：睇完就識

例如：RGB 值 255, 87, 51，轉換做 HEX 大約係 #FF5733。用呢個工具可以得到精確結果。

咩時候需要轉換？

• 場景1：寫 CSS 樣式表要用 HEX 碼
• 場景2：同設計師交換顏色規格
• 場景3：網頁開發統一格式
• 場景4：由程式計算結果轉為 CSS 可用格式
• 場景5：不同軟件之間交換顏色資料

轉換時要注意嘅三件事

• 大小寫都得：HEX 碼大小寫唔影響結果，#FF5733 同 #ff5733 係同一隻色。
• 螢幕色差：唔同螢幕顯示同一個顏色碼可能有少許差異，呢個係硬件問題，唔係轉換錯誤。
• 數值範圍要清楚：RGB 每個通道 0-255，HSL 色相 0-360、飽和度同亮度百分比，輸入嘅時候唔好超出範圍。

呢個工具點樣用

1. 輸入你嘅 RGB 顏色值
2. 系統會即時計算並顯示對應嘅 HEX 值
3. 你可以一邊調整一睇實時預覽
4. 滿意嘅話直接複製結果就可以用

常見問題

問題1：邊個顏色模型最好用？

視乎場景。網頁開發最常用 HEX 同 HSL；設計師多數用 HSV 同 CMYK；程式計算就 RGB 最方便。冇話邊個最好，只有邊個最適合。

問題2：點解我轉出嚟嘅顏色同原來唔一樣？

如果你係講 CMYK 轉換，咁係正常嘅——色域唔一樣，一定有差異。如果係 RGB/HEX/HSL 之間轉，理論上應該完全一樣，如果有差別可能係顯示器或者軟件設定問題。

問題3：透明度點樣加？

HEX 唔支援透明度，如果你需要透明效果，要轉去 RGBA、HSLA 或者 HEXA 格式先得。

總結：RGB 轉 HEX 係設計同開發好常見嘅操作，關鍵係了解兩個顏色模型嘅分別同適用場景。用呢個在線工具可以即時轉換，仲有實時預覽，方便好多。