HEX 轉 RGB 轉換器

為什麼需要將 HEX 轉成 RGB？

在網頁設計 (CSS) 中，HEX (十六進位) 是最方便的寫法（例如 #FF5733），因為它簡短且易於複製。然而，當我們進入「程式邏輯」或「進階樣式」的世界時，RGB (紅綠藍) 才是王道。

最常見的情況是：您想要將一個按鈕設定為「半透明」。標準的 6 位數 HEX 碼無法直接定義透明度，您必須將其轉換為 rgba(R, G, B, A) 格式才能加上 Alpha (透明) 通道。這款 HEX 轉 RGB 轉換器 就是為了填補這個需求，讓您輕鬆算出所需的數字。

核心原理：從 16 進位到 10 進位

這不僅僅是格式轉換，這是一場數學運算。

• HEX (Hexadecimal)： 是一種 16 進位 系統 (0-9, A-F)。

  • 前兩碼代表 R (紅)，中間兩碼代表 G (綠)，後兩碼代表 B (藍)。

• RGB (Decimal)： 是一種 10 進位 系統 (0-255)。

• 轉換邏輯：

  • FF (16進位) = 15 x 16 + 15 = 255 (10進位)。

  • 00 (16進位) = 0。

  • 因此，#FF0000 (純紅) 就會變成 rgb(255, 0, 0)。

常見的應用場景

1. 製作透明背景 (CSS RGBA)

這是工程師使用此工具的第一大理由。

• 您有一個漂亮的藍色 #3498DB。

• 設計師說：「我要這個藍色，但是要 50% 透明。」

• 您無法寫 color: #3498DB50; (舊瀏覽器不支援)。

• 正確做法：用工具轉成 52, 152, 219，然後寫成 background-color: rgba(52, 152, 219, 0.5);。

2. 程式圖像處理

在使用 Python (Pillow) 或 JavaScript (Canvas) 處理圖片時，程式庫通常只接受 RGB 的整數 (255, 255, 255)，而不接受 HEX 字串。轉換後才能讓程式讀懂顏色。

3. 硬體燈光控制

Arduino 或 LED 燈帶的控制晶片，通常是分別控制紅、綠、藍三顆燈珠的亮度 (0-255)。輸入 HEX 碼無法直接驅動，必須轉為 RGB 數值。

常見問題 (People Also Ask)

Q1：RGB 和 RGBA 有什麼不同？

差在「透明度」。

• RGB: rgb(255, 0, 0) -> 純紅色，完全不透明。

• RGBA: rgba(255, 0, 0, 0.5) -> 最後一個數字 (Alpha) 代表透明度，範圍是 0 (完全透明) 到 1 (完全不透明)。

Q2：為什麼轉換出來有時候是三個數字，有時候是一串代碼？

本工具通常會提供兩種格式：

1. CSS 格式： rgb(52, 152, 219) -> 可以直接貼到 .css 檔。

2. 原始數值： R: 52, G: 152, B: 219 -> 方便填入 Photoshop 或程式變數中。

Q3：3 碼的 HEX (如 #F00) 可以轉嗎？

可以。

• #F00 是 #FF0000 的簡寫。

• 轉換器會自動將其「展開」後再進行計算，結果同樣是 255, 0, 0。

Q4：最大的數值是多少？

255。

• 在 8-bit 的色彩深度下，每個顏色通道最大值是 FF (16進位)，等於 255 (10進位)。

• 如果您看到大於 255 的數字，那肯定不是標準的 8-bit RGB。