什麼是色碼轉換器？

色碼轉換器把任意色值同時換算成 HEX、RGB、HSL、CMYK 和 HSV。直接輸入色值、貼上 rebeccapurple 這類 CSS 顏色名,或點擊色塊以取色器吸取,其餘格式會即時更新,直接複製樣式表或印刷檔需要的那一個。

用任意格式輸入或貼上色值（#FF5733、rgb(255,87,51)、hsl(11,100%,60%)、cmyk(0%,66%,80%,0%)、hsv(11,80%,100%)),或填入 tomato、cornflowerblue 等 CSS 顏色名。工具會辨識格式並把其餘四種自動填好。旁邊的色塊即時顯示解析結果方便比對;點擊色塊還會叫出系統的取色器,可視化地挑色。設計稿給的是一種格式,而樣式表、設計軟體或印刷需要另一種時,來這裡換算最快。

使用方法

1. 步驟一——輸入任意支援格式的色值,或填入 tomato 這類 CSS 顏色名（例如 #FF5733、rgb(255,87,51)、hsl(11,100%,60%)）。
2. 步驟二——工具自動辨識輸入格式，並即時轉換為所有其他格式。
3. 步驟三——點擊任一轉換結果即可複製,或點擊顏色預覽塊叫出可視化取色器吸取新顏色。

何時使用

• 把品牌 HEX 轉成 CMYK,準備送印前檔案。
• 從截圖讀到 RGB 值,再轉成 HEX 寫進 CSS。
• 核對設計師給的 HSL 色相,看是否與規範裡的 HEX 一致。

結果

一位前端開發者需要將設計稿中的品牌色 #2196F3 轉為 CSS 動畫用的 RGB 值——工具立即顯示 rgb(33, 150, 243)，同時提供 HSL 和 CMYK 對應值。

常見問題

為什麼 CMYK 數值跟印刷軟體裡的有點不同?

螢幕用 RGB 加色,印刷用 CMYK 減色。本工具採通用換算公式,實際印刷描述檔(Coated FOGRA39、GRACoL 等)會依紙張和油墨調整幾個百分點。這裡輸出的 CMYK 當作起點參考即可。

輸入像 #ZZZ 這種無效值會怎樣?

其他格式欄會保持空白,色塊也不顯示顏色。只有當輸入符合 HEX、RGB、HSL 或 CMYK 其中一種合法格式時,工具才會更新輸出,避免出現誤導性的半成品換算。

像 #F53 這樣的三位 HEX 也能辨識嗎?

可以。三位 HEX 是六位的縮寫,#F53 等於 #FF5533,兩種寫法都支援。輸出統一為六位完整格式,貼到別處時不會產生歧義。

HSL 與 HSV 差在哪?

兩者都從色相開始,但 HSL 描述從黑到白的明度,HSV（又稱 HSB）描述相對純色的亮度。本轉換器現在同時顯示 HSL 與 HSV,因為 CSS 用 HSL、Photoshop 用 HSV,設計師經常需要在兩者間換算。

工具支援透明度或 alpha 通道嗎?

本轉換器不支援。這裡的 HEX、RGB、HSL、CMYK 都是不含透明度的色值。透明填色要用 8 位 HEX(#RRGGBBAA)或 rgba(),不在本工具涵蓋的四種格式內。

相關工具