顏色轉換器
免費線上工具，即時轉換HEX、RGB、HSL顏色格式。提供顏色選擇器、CSS代碼輸出、顏色歷史記錄等功能。
顏色轉換器
什麼是顏色轉換器？
顏色轉換器是一款線上工具，可即時轉換 HEX、RGB 和 HSL 三種網頁設計與開發中最常用的顏色格式。無論是將 Photoshop 的 RGB 色值轉換為 CSS 用的 HEX 代碼，還是切換到 HSL 格式以在保持相同色相的情況下調整明度，這款工具都能輕鬆處理。
只需輸入顏色值，即可立即轉換為所有其他格式，並透過即時預覽查看實際顏色。一鍵複製任何轉換後的顏色代碼，即可立即在專案中使用，大幅提升工作效率。
使用情境
- 網頁開發 – 將設計稿中的 RGB 顏色轉換為 CSS 樣式表所需的 HEX 代碼
- UI/UX 設計 – 使用 HSL 格式在保持相同色相的情況下調整明度或飽和度，創建顏色變體
- 建立色彩調色盤 – 從基本色中提取具有一致色相的多種深淺變化
- 跨平台工作 – 統一 Photoshop（RGB）、Illustrator（HEX）和 CSS（各種格式）之間的顏色值
- 無障礙測試 – 獲取精確的顏色值以計算對比度
- 簡報製作 – 快速查找並複製簡報和文件所需的顏色代碼
主要功能
- 即時雙向轉換 – 輸入任何 HEX、RGB 或 HSL 值，所有其他格式會立即更新。無需點擊轉換按鈕。
- 視覺化顏色選擇器 – 直接從色輪中選擇顏色。即使不知道確切數值，也能直觀地找到所需顏色。
- 一鍵複製 CSS 代碼 – 一鍵複製如
color: #D4AF37;的 CSS 代碼。可選擇 HEX、RGB 或 HSL 輸出格式。 - 自動儲存顏色歷史 – 使用過的顏色會自動儲存以便重複使用。即使關閉瀏覽器，歷史記錄也會保留。
- 隨機顏色產生器 – 在需要設計靈感時產生隨機顏色。
- 直覺化輸入控制 – RGB 使用 0-255 範圍輸入，HSL 使用色相環（0-360°）和百分比，針對每種格式的特性進行最佳化。
使用方法
- 選擇顏色 – 點擊顏色選擇器從色輪中選取，或直接在 HEX/RGB/HSL 輸入欄中輸入已知的數值。
- 即時預覽 – 所選顏色會立即顯示在預覽區域。三種格式會同時自動計算並顯示。
- 複製代碼 – 點擊任何格式旁邊的「複製」按鈕將其複製到剪貼簿。若需要 CSS 代碼，請使用下方的「複製 CSS」按鈕。
- 使用顏色歷史 – 之前使用的顏色會自動儲存在歷史記錄區域。點擊任何顏色方塊即可立即套用該顏色。
顏色格式詳解
HEX（十六進位顏色代碼）
網頁上最廣泛使用的顏色格式。以 #RRGGBB 形式表示，其中紅色（R）、綠色（G）、藍色（B）分別以 00 到 FF 的兩位十六進位數字表示。
- 範例：
#D4AF37（金色）、#FF5733（橙色）、#3498DB（藍色） - 縮寫形式：當每個顏色通道的兩位數字相同時，可縮寫為 3 位。
#FF0000→#F00 - 優點：簡潔緊湊、CSS/HTML 標準格式、易於複製貼上
- 使用場景：CSS 樣式表、HTML 行內樣式、設計系統文件
RGB（紅、綠、藍）
基於光的三原色的加色模型。每個顏色通道的值為 0 到 255，最終顏色由這三種顏色混合決定。
- 範例：
rgb(212, 175, 55)（金色）、rgb(255, 255, 255)（白色）、rgb(0, 0, 0)（黑色） - 運作原理：所有值為 0 時產生黑色；所有值為 255 時產生白色
- 優點：直覺的顏色混合概念、與 Photoshop 等繪圖工具相容、便於程式計算
- 使用場景：繪圖軟體、JavaScript 顏色處理、動畫顏色漸變
HSL（色相、飽和度、亮度）
更接近人類感知顏色方式的顏色表示法。透過色輪角度（色相）、顏色鮮豔程度（飽和度）和亮度等級（亮度）來定義顏色。
- 範例：
hsl(46, 67%, 52%)（金色）、hsl(0, 100%, 50%)（純紅色） - H（色相）：0° = 紅色、60° = 黃色、120° = 綠色、180° = 青色、240° = 藍色、300° = 洋紅色
- S（飽和度）：0% = 灰階、100% = 純色
- L（亮度）：0% = 黑色、50% = 純色、100% = 白色
- 優點：易於在保持色相的同時調整明度/飽和度、適合建立調色盤、直覺理解顏色關係
- 使用場景：基於 CSS 變數的主題系統、滑鼠懸停效果（僅改變亮度）、建立一致的調色盤
選色技巧
- 品牌色彩變體：將品牌基本色轉換為 HSL 格式，然後只調整 L（亮度）值，即可輕鬆創建較淺或較深的變體，同時保持相同的色相。
- 尋找互補色：將 HSL 中的 H（色相）值加上 180 即可獲得互補色。例如：藍色（240°）的互補色是黃色（60°）。
- 尋找相似色：以 30° 為單位調整 H 值，可創建和諧的相似色調色盤。
- 無障礙設計考量：WCAG 建議文字與背景之間的對比度至少為 4.5:1。請確認亮度（L）值之間有足夠的差異。
常見問題
可以輸入 3 位數的 HEX 代碼嗎？
可以，輸入 3 位數的 HEX 代碼（例如 F00）會自動擴展為 6 位數（FF0000）。轉換會在輸入欄失去焦點時發生。在 CSS 中，#F00 和 #FF0000 代表相同的顏色（紅色）。
顏色歷史會保存多久？
最近使用的 12 個顏色會儲存在瀏覽器的本機儲存空間中。即使關閉瀏覽器或重新啟動電腦，歷史記錄也會保留。點擊「清除」按鈕可刪除所有已儲存的歷史記錄。
是否支援透明度（Alpha）值？
目前版本僅支援不透明顏色（HEX、RGB、HSL）。包含透明度的格式如 RGBA（rgba(212, 175, 55, 0.5)）、HSLA（hsla(46, 67%, 52%, 0.5)）和 8 位數 HEX（#D4AF3780）計劃在未來更新中加入。
顏色轉換準確嗎？
是的，所有轉換都使用標準顏色轉換演算法進行精確計算。但由於 HSL 的飽和度和亮度以百分比顯示，四捨五入可能會在反向轉換時造成 ±1 的微小差異。這種差異肉眼無法察覺。
應該使用哪種顏色格式？
取決於您的使用情境。HEX 在 CSS/HTML 中最廣泛使用，且簡潔明瞭。RGB 在使用 JavaScript 計算顏色或與繪圖工具整合時很有用。HSL 在調整亮度或飽和度，或建立和諧的調色盤時最為直覺。
在行動裝置上可以使用嗎？
可以，所有功能在行動瀏覽器上都能正常運作。顏色選擇器使用裝置的原生顏色選擇器，複製功能也能在行動裝置的剪貼簿上正確運作。響應式設計會調整版面以適應您的螢幕尺寸。