HEX 轉 RGB

HEX to RGB 在線轉換:免安裝直接用

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

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

HEX(十六進制顏色碼)

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

優點:

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

缺點:

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

RGB(紅綠藍三原色)

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

優點:

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

缺點:

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

轉換原理簡單講

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

實際例子:睇完就識

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

咩時候需要轉換?

  • 場景1:JavaScript 動態計算顏色
  • 場景2:Canvas 繪圖操作
  • 場景3:程式動態生成顏色
  • 場景4:程式中需要做顏色計算
  • 場景5:不同軟件之間交換顏色資料

轉換時要注意嘅三件事

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

呢個工具點樣用

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

常見問題

問題1:邊個顏色模型最好用?

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

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

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

問題3:透明度點樣加?

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

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

相關工具

HEX 轉 HEXA

將 HEX 顏色格式轉換成 HEXA 格式。

2
HEX 轉 RGBA

將 HEX 顏色格式轉換成 RGBA 格式。

1
HEX 轉 HSV

將 HEX 顏色格式轉換成 HSV 格式。

1
HEX 轉 HSL

將 HEX 顏色格式轉換成 HSL 格式。

2
HEX 轉 HSLA

將 HEX 顏色格式轉換成 HSLA 格式。

1

熱門工具