像 #3a7bd5 這樣的十六進位代碼會轉換成 RGB 58, 123, 213——也就是你在 Adobe Illustrator 中比對顏色所需的精確紅、綠、藍色頻道值。雖然 Illustrator 的選色器可讓你輸入十六進位代碼，但並不會顯示對應的 RGB 數值，迫使你必須在面板之間切換或憑感覺猜測。HEX to RGB Converter 工具能即時將任何 CSS 十六進位顏色翻譯成其十進位 RGB 組成，並提供選填的 Alpha 頻道來處理半透明顏色。無論你要把網頁設計 mockup 與 Illustrator 作品同步，或是確保品牌色彩在印刷與數位間保持一致，這個工具都能一鍵給你精確的頻道值。

Illustrator 在螢幕相關作業上以 RGB 作為原生色彩模式，但設計師常會從樣式指南、CSS 檔案或客戶回饋中收到十六進位代碼。手動轉換這些代碼——尤其是含有 Alpha 透明度的代碼——容易出錯並拖慢工作流程。HEX to RGB Converter 接受三位、四位、六位或八位的十六進位格式（例如 #abc、#abcd、#aabbcc、#aabbccdd），並回傳正規化後的十六進位值、CSS rgb() 或 rgba() 字串，以及介於 0–255 的個別頻道值，藉此消除這種摩擦。即時預覽可讓你在複製數值前先確認顏色與 Illustrator 色票相符；當來回轉換需要精確度時，Alpha 位元組也會保留以供半透明顏色使用。這對在 Illustrator 中處理半透明疊加或漸層的設計師特別有用，因為即使只有一個位數的差異，也可能改變最終呈現的效果。

how to convert hex code to rgb in illustrator
how to convert hex code to rgb in illustrator

為什麼 Hex 代碼與 RGB 在 Illustrator 中很重要

Hex 代碼與 RGB 值代表的是相同的顏色，只是格式不同，兩者在 Illustrator 中的使用情境也有所差異。Hex 代碼精簡且廣泛用於網頁設計、CSS 與樣式指南，是數位專案常見的起點。然而 Illustrator 的原生工具——例如 Color Picker、Swatches 面板與 Recolor Artwork——主要運作於 RGB、HSB 或 CMYK。當你把 Hex 代碼貼進 Illustrator 的 Color Picker 時，軟體會自動轉換成 RGB，但不會顯示十進位數值，除非手動切換輸入模式。這容易造成混淆，特別是在與以 Hex 代碼回饋的開發者或客戶協作時。

另一方面，RGB 是 Illustrator 在螢幕作業上的預設色彩模式。它使用三個 8 位元頻道（紅、綠、藍）來定義顏色，每個頻道的範圍是 0 到 255。這個格式對設計師來說很直覺，因為它直接對應螢幕顯示色彩的方式。例如，純紅是 255, 0, 0，而中灰色可能是 128, 128, 128。當你需要精確地在 Illustrator 中比對某個 Hex 代碼時——無論是 logo、圖示或 UI 元素——擁有 RGB 值能確保作品的一致性。HEX to RGB Converter 提供了你需要輸入到 Illustrator 顏色欄位中的精確 RGB 數字，跨越了這道鴻溝。

如何在 Illustrator 中將 Hex 代碼轉換為 RGB

若要將 Hex 代碼轉換為 RGB 以便在 Illustrator 中使用，請依照下列步驟操作 HEX to RGB Converter 工具：

  1. 在瀏覽器中開啟 HEX to RGB Converter。
  2. 把你的 Hex 代碼貼到輸入欄位。工具接受三位、四位、六位或八位格式（例如 #f00、#f008、#ff0000、#ff000080）。
  3. 檢視正規化後的十六進位值，它會將簡寫代碼標準化（例如 #f00 會變成 #ff0000）。
  4. 讀取 CSS rgb() 或 rgba() 字串，你可以直接複製用於網頁。
  5. 記下個別的紅、綠、藍頻道值（0–255）。對於半透明顏色，Alpha 頻道也會以十進位（0–1）或百分比顯示。
  6. 檢查即時預覽，確認顏色與你的 Illustrator 色票相符。若顏色含有透明度，預覽會以棋盤格背景顯示 Alpha 效果。
  7. 複製 RGB 值並貼到 Illustrator 的 Color Picker 或 Swatches 面板中。在 Illustrator 中，開啟 Color Picker（Window > Color），切換到 RGB 模式，然後輸入紅、綠、藍的值。
  8. 若是半透明顏色，請在 Illustrator 的 Transparency 面板（Window > Transparency）中使用 Alpha 值來比對不透明度。

在 Illustrator 的顏色工具中使用 RGB 值

一旦把 Hex 代碼轉換成 RGB，你就可以在 Illustrator 的多個顏色工具中使用這些值，以確保作品的一致性。最直接的方式是 Color Picker，它可讓你直接輸入 RGB 值。雙擊工具列中的填色或描邊顏色即可開啟 Color Picker，然後把輸入模式切換為 RGB。輸入轉換器給的紅、綠、藍值，顏色就會即時更新。這適合用於一次性色彩調整，或需要比對樣式指南中特定 Hex 代碼的情境。

如果專案需要使用多種顏色，Swatches 面板會更有效率。若要將 RGB 顏色新增為色票，請先用 Color Picker 設定顏色，然後從工具列把填色或描邊顏色拖曳到 Swatches 面板中。或者，按一下 Swatches 面板中的 New Swatch 按鈕，選擇 RGB 作為色彩模式，再輸入數值。這樣可確保顏色在整份文件中重複使用。如果你正在處理品牌色票，可以將色票儲存成 .ase（Adobe Swatch Exchange）檔案，以便在其他 Illustrator 或 Photoshop 專案中使用。

若需要進階色彩操作，Illustrator 的 Recolor Artwork 工具（Edit > Edit Colors > Recolor Artwork）可讓你一次調整多個物件的 RGB 值。這在為複雜插圖套用一致色彩配置，或在保留原始色相關係的前提下嘗試不同色調時特別實用。該工具也支援全域色彩調整，因此更改一個 RGB 值會同步更新作品中所有該顏色的實例。當與 HEX to RGB Converter 搭配使用時，無論你是依據網頁設計 mockup 或客戶提供的 Hex 代碼作業，這個工作流程都能確保色彩精準且一致。

處理透明度與 Alpha 頻道

含有 Alpha 透明度的 Hex 代碼——以八位格式表示（例如 #ff000080）——包含控制不透明度的第四個頻道。最後兩位數代表 Alpha 值，其中 00 是完全透明，ff 是完全不透明。在轉換這些代碼到 RGB 時，HEX to RGB Converter 會將 Alpha 頻道保留為介於 0 與 1 之間的十進位值或百分比。例如，#ff000080 會轉換成 RGB 255, 0, 0，並帶有 0.5（或 50%）的 Alpha。

在 Illustrator 中，透明度與 RGB 值是分開管理的。若要套用 Alpha 頻道，請選取物件並開啟 Transparency 面板（Window > Transparency）。以百分比輸入 Alpha 值（例如 0.5 輸入 50%），或使用滑桿調整不透明度。這對包含疊加、陰影或半透明漸層的設計特別重要。例如，如果你正在製作帶有半透明按鈕的 UI mockup，將 Hex 代碼轉換為 RGB 與 Alpha 可確保顏色與不透明度與原始設計相符。

當處理需要透明度的漸層或效果時，Illustrator 的 Gradient 面板（Window > Gradient）也支援 Alpha 頻道。在轉換含有透明度的 Hex 代碼後，你可以把 RGB 值套用至漸層停點，並透過 Transparency 面板調整不透明度。這個工作流程可確保 Illustrator 作品中的半透明顏色與原始 Hex 代碼完全一致，包含 Alpha 頻道。對於經常處理網頁或 App 設計的設計師來說，這種精確度對維持數位 mockup 與最終作品之間的一致性至關重要。

Illustrator 中常見的 Hex 與 RGB 轉換情境

情境 Hex 代碼範例 RGB 值 Illustrator 中的使用情境
純色品牌色 #3a7bd5 58, 123, 213 需要精準比對色彩的 logo 設計、圖示或 UI 元素。
半透明疊加 #00000080 0, 0, 0（alpha：0.5） 陰影、互動視窗背景或半透明文字疊加。
網頁安全色 #33cc33 51, 204, 51 同時用於印刷與數位輸出的設計，需特別注重色彩一致性。
漸層停點 #ffffff00 255, 255, 255（alpha：0） 具有透明端點的漸層，例如淡出或暈影效果。
CSS 顏色關鍵字 #ffa500（orange） 255, 165, 0 在 Illustrator 作品中比對網頁設計或樣式指南中的具名顏色。

上表整理了在 Illustrator 中需要將 Hex 代碼轉換為 RGB 的常見情境。針對每種情境，HEX to RGB Converter 都會提供你需要輸入到 Illustrator 顏色工具中的精確數值。例如，如果你正在設計一個使用品牌 Hex 代碼（#3a7bd5）的 logo，將它轉換為 RGB（58, 123, 213）可確保色彩符合原始規格。同樣地，對於半透明疊加，轉換器會保留 Alpha 頻道，讓你能在 Illustrator 的 Transparency 面板中重現該效果。

對於處理網頁安全色或 CSS 顏色關鍵字的設計師來說，這個轉換器簡化了將這些代碼轉譯為 Illustrator 原生 RGB 格式的流程。網頁安全色（例如 #33cc33）常用於數位設計，以確保跨裝置的一致性；而像 orange（#ffa500）這樣的 CSS 顏色關鍵字則常在樣式指南中被引用。透過把這些代碼轉換為 RGB，你就能將它們無縫整合到 Illustrator 作品中，無需手動計算或猜測。Color Contrast Checker 也能協助你驗證轉換後的顏色是否符合無障礙標準（例如 WCAG AA 或 AAA），以滿足文字與背景組合的需求。

疑難排解 Illustrator 中的色彩不符問題

即使將十六進位代碼轉換為 RGB，您仍可能會在 Illustrator 中注意到輕微的色彩不符。這可能由多種原因造成，包括色彩描述檔設定、螢幕校色，或 Illustrator 的色彩管理偏好設定。疑難排解的第一步是確保文件的色彩模式設定為 RGB。前往 檔案 > 文件色彩模式，然後選擇 RGB 色彩。這能確保 Illustrator 正確解讀您的 RGB 數值，而不會嘗試將其轉換為 CMYK 或其他色彩空間。

如果色彩仍然不符，請檢查 Illustrator 的色彩設定（編輯 > 色彩設定）。預設的 RGB 工作空間通常是 sRGB，這對於網頁和螢幕設計而言是理想的選擇。然而，如果您的文件使用不同的 RGB 描述檔（例如 Adobe RGB），則色彩可能會看起來略有差異。為避免這種情況，請在「色彩設定」對話方塊中將 RGB 工作空間設定為 sRGB。您也可以透過前往 編輯 > 指定描述檔 並選擇 sRGB IEC61966-2.1，來為您的文件指定特定的色彩描述檔。

螢幕校色也會影響色彩在 Illustrator 中的顯示方式。如果您的螢幕尚未校色，您輸入的 RGB 數值可能無法準確顯示。請使用硬體校色器或作業系統內建的校色工具來調整螢幕的色彩設定。在 Windows 中，請前往 設定 > 系統 > 顯示器 > 進階顯示設定 > 色彩校正。在 macOS 中，請使用「顯示器校色輔助程式」（系統偏好設定 > 顯示器 > 色彩 > 校準）。

最後，如果您正在處理半透明色彩，請確保 Alpha 通道已正確套用。在 Illustrator 中，透明度是與 RGB 數值分開管理的，因此即使 RGB 數值相符，透明度也可能不同。請使用「透明度」面板來驗證 Alpha 數值，並視需要進行調整。如果您仍然遇到不符的情況，色彩差異計算機可以協助量化原始十六進位代碼與 Illustrator 文件中色彩之間的差異。此工具使用 CIEDE2000 標準來測量色彩差異，提供一個數值來表示色彩的相符程度。

另請參閱：在瀏覽器中即時將 RGB 轉換為 HEX 色彩代碼。

如果您正在權衡各種選擇，如何將 CMYK 轉換為 RGB 並在螢幕上預覽對此有詳細說明。