HEX 色碼是一個六個字元的字串,例如 #3b82f6,它以三對十六進位數字編碼一個 24 位元色彩——每對分別對應紅、綠、藍通道——而基於瀏覽器的轉換器是在 Android 手機上於 RGB 通道值(0–255)與該 HEX 字串之間互譯最快的途徑,而且無需安裝應用程式。若要在 Android 上將 RGB 轉換為 HEX,您並不需要專門的色彩工具:任何現代的行動瀏覽器都能載入一個私密的頁內轉換器,接收三個整數通道值並回傳對應的 #RRGGBB 色碼,或是接收 HEX 色碼並將其解碼回個別的 R、G、B 數值。由於同一個 24 位元色彩空間同時驅動 CSS、HTML、Photoshop、Figma 與 Android 設計套件,因此能夠在格式之間乾淨地轉換,幾乎是所有行動網頁、UI 與設計任務的一部分。本指南的其餘部分將逐步說明如何在您的 Android 裝置上執行此轉換、如何處理像 #abc 這樣的簡寫 HEX、如何讀取工具在 HEX 與 RGB 數值之外附加的 HSL 顯示,以及哪些 Android 工作流程最受益於在瀏覽器中完成轉換。

rgb to hex on android
在 Android 上將 RGB 轉換為 HEX:在您的行動瀏覽器中完成轉換

在您的行動瀏覽器中執行轉換

大多數 Android 使用者早已為真正需要的應用程式付出安裝成本,因此一次性的色彩轉換並不值得再下載一個應用程式、接受一連串權限請求並佔用儲存空間。基於瀏覽器的 RGB 轉 HEX 轉換器能避開這一切:沒有要側載的 APK、不必授予權限、不會多出一個再也不會開啟的桌面圖示,六個月後也不會跳出煩人的更新通知。轉換器就在網頁上執行,可在 Chrome、Samsung Internet、Firefox 或任何其他現代 Android 瀏覽器中運作,您點選連結的那一刻它就已就緒。

這種方式同時消除了平台摩擦的問題。Android 設計工具、範例應用程式與 SDK 經常以 ARGB 形式的壓縮整數提供色彩值,這正是 android.graphics.Color 內部使用的格式。將這些值解碼為個別的 R、G、B 通道,再轉成可以貼入 CSS 或 Figma 檔案的 HEX 字串,正是瀏覽器工具所設計的雙向轉換。無論您是從平板、Pixel 或一支十年前的手機開啟該頁面,得到的 HEX 色碼都完全相同——而下次需要時,您仍可繼續使用同一個書籤。

在 Android 手機上將 RGB 轉換為 HEX

一旦開啟頁面,轉換本身非常直接。請在您的 Android 裝置上依照下列步驟操作:

  1. 在 Android 手機上開啟 Chrome(或任何您慣用的瀏覽器),並載入 RGB 轉 HEX 轉換器。
  2. 將紅色通道值輸入 R 欄位,綠色輸入 G 欄位,藍色輸入 B 欄位。每個值都是介於 0 到 255 之間的整數。
  3. 觀察 HEX 色碼出現在即時色塊旁邊。色塊會隨著您的輸入更新,因此在複製前可以確認是否為正確的色調。
  4. 點選 HEX 輸出旁的「複製」按鈕,即可取得小寫的六位數代碼,準備貼入您的樣式表、設計檔案或對話中。
  5. 需要反向操作嗎?將 HEX 色碼(例如 #3b82f6)貼入 HEX 欄位,對應的 R、G、B 數值會立即顯示。

超出範圍或非整數的通道數值會被自動限制在有效的 0–255 整數範圍內,因此在紅色欄位輸入 300 會靜默地變成 255,而不會跳出錯誤訊息。格式錯誤的 HEX 代碼——長度錯誤、含有非法字元——會就地標示出來,而不是產生一個靜默錯誤的色彩;當您在瀏覽一長串品牌色值並需要信任所複製的內容時,這點相當重要。

轉換模式:RGB 如何變成 HEX

HEX 標記法只是將每個 0–255 通道寫成兩位十六進位數字,因此在 Android 上的轉換與在任何其他裝置上進行的相同心智運算並無二致。以廣受歡迎的 UI 藍色 rgb(59, 130, 246) 為例:

第一步——紅色:將 59 除以 16。得到的商數為 3,餘數為 11。十六進位的 3 仍是 3,而 11 為 B,因此紅色變為 3B

第二步——綠色:將 130 除以 16。商數為 8,餘數為 2,得到 82

第三步——藍色:將 246 除以 16。商數為 15,餘數為 6,得到 F6(因為 15 在十六進位中是 F)。

將三對串接起來並在前方加上井字號,就得到 #3b82f6。這正是該工具在您的瀏覽器中執行的模式,而當您貼上 HEX 代碼並讀回整數通道時,這個模式同樣可以反向運作。輸出永遠會正規化為小寫的六位數形式,且每對皆以零補齊,因此紅色值為 0 時會變成 00,而非僅有 0——這是手寫轉換時經常遺漏的小細節。

處理 HEX 簡寫與 Android 色彩整數

三位數的 HEX 簡寫受到完整支援,這很實用,因為設計師與設計套件都經常仰賴它。每個數字會自我加倍,因此 #abc 會展開為 #aabbcc#f00 會變成 #ff0000(純紅),而 #fff 會變成 #ffffff(白色)。輸入不區分大小寫,且前置的 # 為可選,因此 ABC#abcabc 都會解析為同一個色彩。

Android 自身的色彩 API 使用另一種您可能也需要轉換的格式。android.graphics.Color 中的 Color 整數會依 ARGB 順序將 alpha、紅、綠、藍打包成單一 32 位元值。若要將其轉為 HEX 色碼,請取出最低的 24 個位元並逐一轉換每個位元組:紅色為位元 16–23,綠色為位元 8–15,藍色為位元 0–7。在手機上最簡便的方式是透過任何終端機風格的應用程式,將十進位值讀為十六進位字串,或者直接將已知的 ARGB 色彩貼入一個先去除 alpha 位元組的小工具。最終得到的六位數 HEX 即可直接貼入網頁樣式表或 Figma 檔案。

在行動裝置上讀取 HSL 輸出

除了 HEX 與 RGB 顯示之外,轉換器也會以 HSL 顯示同一個色彩——即色相、飽和度與亮度。色相是色彩色環上從 0 到 360 度的角度,而飽和度與亮度則是 0–100% 的百分比量值。HSL 值得在 Android 上顯示的原因在於,它正對應您口頭描述色彩的方式:「稍微淺一點、飽和度低一些的藍色」可以直接對應到 L 與 S 滑桿,而這在原始的 0–255 通道數字中是很難做到的。

這使得 HSL 在微調品牌色時非常有用。若預覽中的色塊過於鮮豔,可將飽和度降低 10;若在白色背景上顯得過暗,則可將亮度提升 5。工具會在同一輪更新中重新計算所有數值與即時色塊,讓您能即時實驗,並在色調滿意時複製最終的 HEX。

快速參考:常見的 RGB 轉 HEX 數值

下列標準 24 位元色彩不斷出現於設計系統與樣式表中,因此值得牢記,或至少將其加入書籤,存放在您最常用於處理色彩工作的 Android 裝置上:

色彩名稱 RGB 通道 HEX 代碼
黑色(0, 0, 0)#000000
白色(255, 255, 255)#ffffff
純紅(255, 0, 0)#ff0000
純綠(0, 255, 0)#00ff00
純藍(0, 0, 255)#0000ff
UI 藍(Tailwind 風格)(59, 130, 246)#3b82f6

每一列以兩種等價標記法編碼同一個色彩,這正是此轉換如此實用的核心。當您實際需要的數值不在此表上時,只要將 RGB 數字輸入轉換器,即可讀出對應的小寫六位數 HEX。

隱私:一切都在您的手機上完成

色彩值並非您希望離開裝置的資料類型,特別是當您仍在調整尚未發布的色票時。此轉換完全透過頁面內的 JavaScript 執行,因此不會將任何色彩值上傳至伺服器,也不會留下任何紀錄。這表示品牌色票、草稿色盤,以及您從私人設計檔案中取樣的任何色彩,都會在該工作階段期間保留在您的手機上。

若想更仔細了解轉換器如何處理邊界情況——長度錯誤的 HEX、非法字元、非整數通道——您可以繼續在 Android 上作業,無需再切回本指南。

若您正在權衡選項,RGB 轉 HSV 轉換器替代方案:選擇標準對此有詳細說明。

若您正在權衡選項,CMYK 轉 RGB 的色階與變化:預期結果對此有詳細說明。