免費 HEX 轉 RGB 轉換器 - 顏色代碼轉換器和選色器工具

HEX 轉 RGB 的換算方式

此工具讀取 HEX 色碼,同時提供 RGB、HSL、CMYK 以及 8 碼 HEX/RGBA 數值,並顯示即時色塊、對比預覽與感知亮度。輸入或貼上色碼,或使用選色器挑選顏色,所有格式會一起更新。

換算原理

6 碼 HEX 色碼會拆成三組 2 碼數值,各自是 00 到 FF(十進位 0 到 255)之間的十六進位數,分別對應紅、綠、藍。3 碼縮寫形式會先將每個數字重複一次,例如 #7A5 先變成 #77AA55,再套用相同的拆分方式。由這組 RGB 數值可推得 HSL:最亮與最暗色版的平均值得出明度,兩者差值得出飽和度,色版順序決定色相。CMYK 作為參考值計算,先從三個色版中取最大值得出 K,再據此換算青色、洋紅與黃色。感知亮度採用 ITU-R BT.601 權重,即 R×299 加 G×587 加 B×114,再除以 1000;結果高於 128 標記為淺色,低於則標記為深色,這個數值也決定對比預覽中的文字顏色。同一個輸入框也能辨識直接輸入的 rgb(r, g, b) 字串,選色器中每次挑選都會自動更新 HEX 輸入框。 如果無法解析該色碼,工具會在輸入框下方顯示錯誤訊息,而不是自行猜測顏色。 每個換算出的數值都有自己的複製按鈕,點擊後會短暫變成打勾圖示,這樣就能只複製 RGB、CMYK 或 CSS 那一行,而不必動到其他數值。

計算範例

以 #6A4C93 為例。拆分後得到 R=106、G=76、B=147,即 RGB(106, 76, 147)。最亮與最暗色版的平均值得出明度 44%,兩者差值得出飽和度 32%,色相落在 265 度,合起來是 HSL(265, 32%, 44%)。同樣的 RGB 值代入 CMYK 公式得到 cmyk(28%, 48%, 0%, 42%)。8 碼形式為 #6A4C93FF,CSS 那一行寫作 color: #6A4C93;。亮度為 255 分之 93,低於 128 的分界線,因此工具將此顏色標記為深色,並在對比預覽中切換為白色文字。

輸出範例

Input:  #6A4C93

Output: {
  "rgb":  "rgb(106, 76, 147)",
  "hsl":  "hsl(265, 32%, 44%)",
  "cmyk": "cmyk(28%, 48%, 0%, 42%)",
  "hex8": "#6A4C93FF",
  "css":  "color: #6A4C93;"
}