MUTools

其他

色碼轉換

色碼轉換是一款可在 HEX、RGB、HSL、HSV、OKLCH 各格式之間互相轉換的工具。只要輸入一個顏色,就會同時計算並列出所有對應格式的表示法,且各個值都能一鍵複製。從 HEX 轉 RGB(hex rgb 轉換)、RGB 轉 HEX、HSL 轉換到 RGBA 轉換,Web 與設計製作所需的各種轉換都能一併完成。

預覽
1.00

轉換為各格式

格式複製
HEX#1E90FF
HEX8#1E90FFFF
RGBrgb(30, 144, 255)
RGBArgba(30, 144, 255, 1)
HSLhsl(210, 100%, 56%)
HSLAhsla(210, 100%, 56%, 1)
HSVhsv(210, 88%, 100%)
OKLCHoklch(0.652 0.19 253)
CMYKcmyk(88%, 44%, 0%, 0%)

CMYK 是用於印刷的參考值。由於會依色域與印刷設定檔而異,此處顯示的是從畫面 sRGB 計算出的近似值。CMYK 不接受作為輸入格式。

所有轉換都在您的瀏覽器內進行,輸入的值不會傳送到外部伺服器。

色碼轉換是什麼?

色碼轉換是一款可在 HEX、RGB、HSL、HSV、OKLCH 各格式之間互相轉換的工具。只要輸入一個顏色,就會同時計算並列出所有對應格式的表示法,且各個值都能一鍵複製。從 HEX 轉 RGB(hex rgb 轉換)、RGB 轉 HEX、HSL 轉換到 RGBA 轉換,Web 與設計製作所需的各種轉換都能一併完成。

輸入時不需要先選擇格式。像 #1E90FF 這樣的 3 位、6 位 HEX、含透明度的 4 位、8 位 HEX(8 位色碼轉換)、rgb(30, 144, 255) / rgba(30 144 255 / 0.8)hsl(210, 100%, 56%) / hsla(...)hsv(...)oklch(0.65 0.19 253) 等都可以直接貼上,工具會自動判別格式並轉換。您也可以透過原生顏色選擇器挑選顏色,或以透明度(Alpha)滑桿在 0~1 的範圍內調整不透明度。

輸出內容也包含近年在 CSS 中應用日漸普及、感知上均勻的色彩空間 OKLCH,以及印刷使用的 CMYK 參考值。當您需要在 HEX、RGB、HSL、HSV 之間來回切換,並在設計稿、CSS、設計工具之間精準傳遞同一個顏色時,這款工具相當實用。

所有轉換都在您的瀏覽器內進行,輸入的值不會傳送到外部伺服器。無需註冊帳號、也不必點擊廣告,立即就能使用。

使用方法

  1. 在輸入框貼上色碼(會自動判別 HEX、RGB、HSL、HSV、OKLCH)。您也可以透過右側的顏色選擇器挑選顏色。
  2. 想改變透明度時,以 Alpha 滑桿調整不透明度(0~1)。
  3. 在預覽中確認目前的顏色(含透明度)。
  4. 從「轉換為各格式」列表中,確認 HEX、8 位 HEX、RGB、RGBA、HSL、HSLA、HSV、OKLCH、CMYK 的值。
  5. 透過各列的「複製」按鈕,複製所需格式的值並加以運用。

使用情境

  • 想把設計稿的 HEX 改寫成 CSS 的 rgb()/rgba() 的 Web 設計師、切版人員。
  • 想以 8 位 HEX 或 rgba 精準指定含透明度顏色的前端工程師。
  • 想以 HSL 或 HSV 調整色相、飽和度、明度,並取得最終 HEX 的使用者。
  • 想以 OKLCH 設計感知上均勻的配色,並確認對應 RGB/HEX 的設計師。
  • 想將畫面上的顏色,以 CMYK 參考值作為印刷概略依據掌握的使用者。
  • 想在多個工具或程式碼之間,將同一個顏色轉換成不同格式來傳遞的開發者。

注意事項

  • 可接受 HEX、RGB、HSL、HSV、OKLCH 作為輸入格式。CMYK 用於印刷,會依色域與設定檔而異,且無法從畫面的 sRGB 唯一逆轉換,因此僅支援輸出(參考值)。
  • 支援 8 位 HEX(#RRGGBBAA)與 4 位 HEX(#RGBA)、rgba()、hsla(),以及 `oklch(L C H / a)` 的透明度。透明度也可透過 Alpha 滑桿調整。
  • 由於原生顏色選擇器無法處理透明度(僅 6 位 HEX),即使用選擇器挑選顏色,目前的透明度仍會被保留。
  • HSL、HSV、CMYK、OKLCH 會四捨五入為整數或固定小數位數顯示,因此再次轉換時可能產生極微小的誤差。
  • 從 OKLCH 轉換為 RGB 時若超出 sRGB 色域,會將其四捨五入(clamp)至可顯示的範圍內。

常見問題

輸入的顏色會傳送到伺服器嗎?
不會傳送。所有轉換都在您的瀏覽器內進行。即使是業務上處理的顏色或品牌色,也可以放心使用。
從 HEX 轉換為 RGB 的計算式為何?
6 位 HEX 是每 2 位分別代表 R、G、B 的 16 進位值。將各 2 位轉換為 10 進位即為 0~255 的值(例如:1E→30、90→144、FF→255,所以 #1E90FF=rgb(30, 144, 255))。本工具會自動計算此換算,也支援反方向(RGB→HEX)。
8 位的色碼可以轉換嗎?
可以。8 位 HEX(#RRGGBBAA)的末 2 位代表透明度(Alpha)。貼上後會連同透明度一起轉換,也能以 RGBA 或 HSLA 確認。
也支援轉換為 HSL 或 HSV 嗎?
支援。輸入顏色後會同時顯示 HSL(色相、飽和度、亮度)與 HSV(色相、飽和度、明度)兩者。反過來也可貼上 hsl()、hsv() 字串,轉換為其他格式。
OKLCH 是什麼?
OKLCH 是以明度(L)、飽和度(C)、色相(H)表示顏色、感知上均勻的色彩空間。適合保持明度不變僅改變色相等直覺的配色調整,近年在 CSS 中的應用日漸普及。本工具支援與 sRGB 的互相轉換。
可以輸入 CMYK 嗎?
CMYK 僅支援輸出(參考值)。CMYK 是用於印刷的色彩空間,會依墨水、紙張與印刷設定檔而異,因此無法從畫面的 sRGB 唯一逆轉換。所以本工具會顯示從畫面顏色計算出、作為概略依據的 CMYK 值,但不接受其作為輸入格式。