顏色格式轉換

顏色格式轉換工具 - 在線 HEX / RGB / HSL / HSV / CMYK 互轉

顏色格式轉換工具是一款完全在線運行的免費顏色處理工具，無需安裝任何軟件，打開即用。它支持網頁開發與平面設計中最常見的多種顏色格式——HEX（十六進制）、RGB、HSL、RGBA、HSV、HSVA、CMYK、CMYKA——可在這幾種格式之間實時互轉，並同步更新所有字段，極大提升前端開發與設計工作的效率。

核心功能

• 可視化取色器：內置交互式拾色盤，點擊即可從色譜中精確選取顏色，實時同步到所有格式輸出。
• 預設色板：提供 18 個常用顏色的快捷色板，覆蓋常見 UI 主色，點擊即可一鍵切換。
• 多格式同步轉換：任意修改 HEX、R/G/B 通道、H/S/L 通道或 H/S/V 通道，其餘格式自動同步更新，無需手動計算。
• 透明度（Alpha）控制：通過滑塊調節 Alpha 值（0–1），HEX 字段隨之輸出 8 位格式（#RRGGBBAA），RGBA、HSVA、CMYKA 字段同步更新。
• 實時顏色預覽：頂部色塊實時展示當前顏色（含透明度），棋盤格背景直觀反映透明效果。
• 一鍵複製：每種格式旁均有獨立複製按鈕，點擊即可將對應格式的顏色值複製到剪貼板。

顏色格式說明

在網頁和應用開發中，顏色通常用以下幾種格式表示：

• HEX（十六進制）：如 #16baaa，是 CSS 中最常見的顏色寫法，由 # 加上 6 位或 8 位十六進制數字組成。8 位時最後兩位表示透明度（Alpha），如 #16baaa80 表示 50% 透明。
• RGB：如 rgb(22, 186, 170)，分別指定紅（R）、綠（G）、藍（B）三個通道的值，範圍 0–255。
• RGBA：在 RGB 基礎上增加 Alpha 透明度通道，如 rgba(22, 186, 170, 0.5)，Alpha 值範圍 0（完全透明）到 1（完全不透明）。
• HSL：如 hsl(174, 79%, 41%)，用色相（Hue，0–360°）、飽和度（Saturation，0–100%）、亮度（Lightness，0–100%）來描述顏色，更符合人類對顏色的直覺認知，常用於動態調色場景。
• HSV（也稱 HSB）：如 hsv(174, 88%, 73%)，用色相（Hue）、飽和度（Saturation）、明度（Value/Brightness）描述顏色。與 HSL 的亮度概念不同，HSV 的明度更貼近繪畫中"顏料濃淡"的直覺，是 Photoshop 等設計軟件中常用的拾色模型。
• HSVA：在 HSV 基礎上增加 Alpha 透明度通道，如 hsva(174, 88%, 73%, 1)。
• CMYK：如 cmyk(88, 0, 9, 27)，用青（Cyan）、品紅（Magenta）、黃（Yellow）、黑（Key/Black）四色描述顏色，是印刷行業的標準色彩模型，適合對接打印輸出場景。
• CMYKA：在 CMYK 基礎上增加 Alpha 透明度通道，如 cmyka(88, 0, 9, 27, 1)，方便在支持透明度的印刷或數字場景中使用。

適用場景

• 前端開發者在 CSS/SCSS 中查找或驗證顏色值
• UI/UX 設計師在設計稿中核對顏色規範
• 需要在不同設計工具（Figma、Sketch、Photoshop）之間轉換顏色格式
• 平面/印刷設計師將屏幕顏色轉換爲 CMYK 印刷色值
• 開發小程序、App 時統一顏色變量
• 調整界面元素透明度時快速生成 RGBA / HSVA / CMYKA / 8 位 HEX

使用方法

1. 點擊左側色塊，彈出可視化拾色盤，拖動選取目標顏色；或直接點擊預設色板中的常用色。
2. 右側各格式字段（HEX、RGB、HSL、RGBA、HSL str、HSV、HSVA、CMYK、CMYKA）將自動同步更新。
3. 也可以直接在 HEX 輸入框粘貼已知的顏色值，或手動修改 R/G/B、H/S/L 各通道數值，其餘字段實時聯動。
4. 拖動底部透明度滑塊調節 Alpha 值，HEX 將切換爲 8 位格式，RGBA、HSVA、CMYKA 預覽同步更新。
5. 點擊每行右側的複製按鈕，將對應格式的顏色值複製到剪貼板，直接粘貼到代碼或設計工具中使用。

常見問題（FAQ）

Q：HEX 8位格式（#RRGGBBAA）所有瀏覽器都支持嗎？
A：現代主流瀏覽器（Chrome、Firefox、Safari、Edge 最新版）均已支持 8 位 HEX，IE 不支持。如需兼容舊版瀏覽器，建議使用 rgba() 格式。

Q：HSL 和 HSV 有什麼區別？
A：兩者都用色相和飽和度描述顏色，但第三個維度不同。HSL 的"亮度"（Lightness）以 50% 爲純色中間值，趨向 100% 變白、趨向 0% 變黑；HSV 的"明度"（Value）以 100% 爲純色最亮值，趨向 0% 變黑，更接近 Photoshop 等工具的拾色邏輯，設計師會更熟悉。

Q：CMYK 和 RGB 有什麼區別？應該用哪個？
A：RGB 是屏幕顯示的加色模型，適用於數字設計；CMYK 是印刷的減色模型，適用於對接印刷廠或打印輸出。如果你的設計最終要印刷，建議參考 CMYK 值與印刷廠溝通確認色值。

Q：這個工具支持複製哪些格式？
A：支持一鍵複製 HEX（含 alpha 時爲 8 位）、rgb()、hsl()、rgba()、hsl() 字符串、hsv()、hsva()、cmyk()、cmyka() 共九種格式，每種格式旁均有獨立複製按鈕。

Q：顏色數據會上傳到服務器嗎？
A：不會。本工具完全在瀏覽器本地運行，所有顏色計算均在前端完成，不會向服務器發送任何數據，保護您的隱私。