首頁 電腦科學 色彩格式轉換（HEX、RGB、HSL） 產生日期: 2026年7月20日 下午09:34 色彩格式轉換（HEX、RGB、HSL） 輸入 輸入格式HEXHEX 色碼#3B82F6紅色59綠色130藍色246色相217飽和度91亮度60 電腦科學 色彩格式轉換（HEX、RGB、HSL） 在 HEX、RGB、HSL 三種格式之間互相轉換色彩。輸入任一格式的數值，即可讀取另外兩種格式的等效色碼，方便直接貼入 CSS。 輸入格式 HEX RGB HSL 輸入 色彩輸入 HEX 色碼 十六進位色碼，可含或不含開頭的井號，支援三位或六位格式（例如 #3B82F6 或 #ABC）。 結果 輸入數值即可顯示計算結果。 轉換結果 HEX 以六位十六進位色碼表示的色彩。 RGB 以紅、綠、藍通道數值（各 0 至 255）表示的色彩。 HSL 以色相角度（度）及飽和度、亮度百分比表示的色彩。 分享 列印報告 重設 嵌入 嵌入這個計算機 預覽 將這段程式碼貼到您的網頁中即可顯示計算機。 複製程式碼 分享這個計算 開啟此連結的人都會看到您填入的數值。 複製連結 分享至 XFacebookLINE 電子郵件 最後更新：2026-06-23 色彩格式轉換（HEX、RGB、HSL） 色彩格式轉換工具在網頁上最常用的三種色彩記法之間互相轉換：HEX、RGB、HSL。三種記法描述的是同一種色彩，前端開發者、設計師及任何編輯樣式表的人，都需要頻繁地在這些格式之間切換——例如將設計工具中複製的 HEX 碼貼入 RGB 函式，或在 HSL 中調整色彩，因為在那裡更容易直覺操作。 三種記法的本質 RGB 以三個色光通道的混合比例定義色彩，每個通道為 0 至 255 的整數。HEX 是以十六進位表示的相同三個通道：每通道兩個十六進位數字，合併為六位色碼，例如 #3B82F6。由於兩種格式儲存完全相同的位元數（每通道 8 位元），HEX 與 RGB 的互相轉換是完全精確的——不存在資訊的增減。 HSL 採用不同的視角。它以色相（色環上 0 至 360 度的角度）、飽和度（0 至 100%，從灰色到鮮豔）和亮度（0 至 100%，從黑色經純色相到白色）來描述色彩。HSL 的描述方式更接近人對色彩的直覺——「一種稍淺、較不飽和的藍色」——因此在調整色彩時特別方便。 轉換原理 將 HEX 色碼拆分為 RGB 是數字運算：每對十六進位數字讀取為 00 至 FF 的數值，即十進位的 0 至 255。從 RGB 轉換為 HSL 時，先將各通道縮放至 0 至 1 的範圍，再從最大值與最小值的中間點推導亮度，從兩者的差距推導飽和度，並從最大值所在的通道推導色相。 M=max(r,g,b),m=min(r,g,b)L=12(M+m)S=M−m1−∣2L−1∣\begin{aligned} M &= \max(r, g, b), \quad m = \min(r, g, b) \\ L &= \tfrac{1}{2}(M + m) \\ S &= \frac{M - m}{1 - \lvert 2L - 1 \rvert} \end{aligned}MLS=max(r,g,b),m=min(r,g,b)=21(M+m)=1−∣2L−1∣M−m 計算範例 以 #3B82F6 為例。三對數字為 3B、82、F6，即 59、130、246，對應 rgb(59, 130, 246)。將各通道縮放至單位範圍後約為 0.231、0.510、0.965。最大通道為藍色，最小為紅色，因此： L=12(0.965+0.231)=0.598≈60%S=0.965−0.2311−∣2(0.598)−1∣≈0.91=91%\begin{aligned} L &= \tfrac{1}{2}(0.965 + 0.231) = 0.598 \approx 60\% \\ S &= \frac{0.965 - 0.231}{1 - \lvert 2(0.598) - 1 \rvert} \approx 0.91 = 91\% \end{aligned}LS=21(0.965+0.231)=0.598≈60%=1−∣2(0.598)−1∣0.965−0.231≈0.91=91% 色相約為 217 度，得到 hsl(217, 91%, 60%)。 由於 RGB 以每通道 256 個離散階層儲存，而 HSL 使用整數度數和整數百分比，來回轉換可能因各格式的捨入差異而偏移一個單位——肉眼察覺不到，但需了解這是正常現象。如需深入探索 HEX 色碼背後的十六進位運算，請參閱 進制轉換工具。 常見問題（FAQ）HEX 色碼如何對應 RGB？六位十六進位色碼由三組雙位數字組成，分別對應紅、綠、藍三個通道。每組數值範圍為 00 至 FF，即十進位的 0 至 255。例如 #3B82F6 拆分為 3B、82、F6，即 59、130、246，對應 rgb(59, 130, 246)。兩種格式的轉換完全精確，因為每個通道儲存相同的八個位元。 HSL 各數值的意義為何？HSL 以色相、飽和度和亮度描述色彩，而非混合原色。色相是色環上 0 至 360 度的角度（0 度為紅色，120 度為綠色，240 度為藍色）。飽和度從 0%（純灰色）到 100%（最鮮豔的色相）。亮度從 0%（黑色）經 50%（純色相）到 100%（白色）。 HSL 更直觀，調整色彩時（例如加亮或降低飽和度）比直接修改通道數值更便利。 是否支援三位 HEX 色碼？支援。三位色碼是六位色碼的簡寫，每個數字重複一次展開：#ABC 等同於 #AABBCC。此簡寫形式僅能表示通道值為重複數字的 4,096 種色彩，因此轉換工具一律輸出完整的六位格式。 為何來回轉換時數值會有些微偏差？RGB 以每通道 256 個離散階層儲存，HSL 則使用整數度數和整數百分比。將 RGB 轉換為 HSL 再轉回時，可能因各格式的捨入方式不同而落在相鄰的數值上。差異最多為一個單位，肉眼無法察覺，但這就是來回轉換偶爾會有一個單位偏差的原因。 推薦的下一個 進制轉換工具 在 2 至 36 進制之間轉換任意整數，涵蓋二進制、八進制、十進制、十六進制等常用進制，10 以上的位值以 A–Z 字母符號表示。 深入了解壓縮率計算機 輸入原始檔案大小和壓縮後大小，計算壓縮率、節省空間百分比及節省的絕對位元組數。適用於任何檔案類型或壓縮演算法。 深入了解 200+ 計算機 · 10 種語言 · 完全免費 更多資料與編碼 二補數轉換計算文字轉二進位 / 十六進位 / ASCII 轉換器布隆過濾器容量計算器百萬畫素與列印尺寸計算機色彩格式轉換（HEX、RGB、HSL）色彩深度與每像素位元數計算器 +18 more Show less 串流頻寬計算器吞吐量（bps）換算器奈奎斯特取樣率計算器音訊檔案大小計算機浮點數精度計算機記憶體位址位元計算器資料傳輸時間計算機影片位元率與檔案大小計算機影像檔案大小計算機壓縮率計算機Base64 編碼開銷計算機CRC 校驗碼計算Git 儲存庫複製大小估算IEEE 754 浮點數位元分解PPI / DPI 像素密度計算器QR Code 資料容量查詢Unix 時間戳記轉換（Epoch ⇄ 日期）UTF-8 位元組大小計算機 其他電腦科學計算機 網路 子網路（CIDR）計算機每秒封包數計算器延遲預算計算器頻寬延遲乘積計算機CIDR 與子網路遮罩轉換器IP 位址範圍計算機IP 超網路計算機IPv4 位址表示法換算器IPv6 子網路計算機MTU 轉 MSS 計算機TCP 吞吐量計算機安全與加密 密碼強度（熵值）計算機雜湊碰撞機率計算機Chmod 權限計算機UUID 碰撞機率計算器演算法 夏農熵計算萊文斯坦距離計算器漢明距離計算機Big-O 成長率計算機Luhn 檢查碼計算器可靠性與儲存 服務可用性（SLA）計算機雲端儲存費用試算漢明碼 ECC 位元計算器複合可用性計算器API 速率限制計算器Cron 排程解析與下次執行時間MTBF、MTTR 與可用度計算器RAID 容量計算機效能與佇列 古斯塔夫森定律計算機利特爾法則計算器快取命中率與 AMAT 計算機阿姆達爾定律計算機愛爾蘭 C 人力配置計算器電池續航時間計算器AMAT（平均記憶體存取時間）計算Apdex 分數計算CPU 執行時間計算器IOPS 與吞吐量換算器M/M/1 佇列計算機M/M/c 佇列計算機 這個計算機對您有幫助嗎？ 有幫助 需要改進 需要改進 我們可以如何改進這個計算機？ 送出回饋 由 OneCalc 提供 ↗
最後更新：2026-06-23 色彩格式轉換（HEX、RGB、HSL） 色彩格式轉換工具在網頁上最常用的三種色彩記法之間互相轉換：HEX、RGB、HSL。三種記法描述的是同一種色彩，前端開發者、設計師及任何編輯樣式表的人，都需要頻繁地在這些格式之間切換——例如將設計工具中複製的 HEX 碼貼入 RGB 函式，或在 HSL 中調整色彩，因為在那裡更容易直覺操作。 三種記法的本質 RGB 以三個色光通道的混合比例定義色彩，每個通道為 0 至 255 的整數。HEX 是以十六進位表示的相同三個通道：每通道兩個十六進位數字，合併為六位色碼，例如 #3B82F6。由於兩種格式儲存完全相同的位元數（每通道 8 位元），HEX 與 RGB 的互相轉換是完全精確的——不存在資訊的增減。 HSL 採用不同的視角。它以色相（色環上 0 至 360 度的角度）、飽和度（0 至 100%，從灰色到鮮豔）和亮度（0 至 100%，從黑色經純色相到白色）來描述色彩。HSL 的描述方式更接近人對色彩的直覺——「一種稍淺、較不飽和的藍色」——因此在調整色彩時特別方便。 轉換原理 將 HEX 色碼拆分為 RGB 是數字運算：每對十六進位數字讀取為 00 至 FF 的數值，即十進位的 0 至 255。從 RGB 轉換為 HSL 時，先將各通道縮放至 0 至 1 的範圍，再從最大值與最小值的中間點推導亮度，從兩者的差距推導飽和度，並從最大值所在的通道推導色相。 M=max(r,g,b),m=min(r,g,b)L=12(M+m)S=M−m1−∣2L−1∣\begin{aligned} M &= \max(r, g, b), \quad m = \min(r, g, b) \\ L &= \tfrac{1}{2}(M + m) \\ S &= \frac{M - m}{1 - \lvert 2L - 1 \rvert} \end{aligned}MLS=max(r,g,b),m=min(r,g,b)=21(M+m)=1−∣2L−1∣M−m 計算範例 以 #3B82F6 為例。三對數字為 3B、82、F6，即 59、130、246，對應 rgb(59, 130, 246)。將各通道縮放至單位範圍後約為 0.231、0.510、0.965。最大通道為藍色，最小為紅色，因此： L=12(0.965+0.231)=0.598≈60%S=0.965−0.2311−∣2(0.598)−1∣≈0.91=91%\begin{aligned} L &= \tfrac{1}{2}(0.965 + 0.231) = 0.598 \approx 60\% \\ S &= \frac{0.965 - 0.231}{1 - \lvert 2(0.598) - 1 \rvert} \approx 0.91 = 91\% \end{aligned}LS=21(0.965+0.231)=0.598≈60%=1−∣2(0.598)−1∣0.965−0.231≈0.91=91% 色相約為 217 度，得到 hsl(217, 91%, 60%)。 由於 RGB 以每通道 256 個離散階層儲存，而 HSL 使用整數度數和整數百分比，來回轉換可能因各格式的捨入差異而偏移一個單位——肉眼察覺不到，但需了解這是正常現象。如需深入探索 HEX 色碼背後的十六進位運算，請參閱 進制轉換工具。 常見問題（FAQ）HEX 色碼如何對應 RGB？六位十六進位色碼由三組雙位數字組成，分別對應紅、綠、藍三個通道。每組數值範圍為 00 至 FF，即十進位的 0 至 255。例如 #3B82F6 拆分為 3B、82、F6，即 59、130、246，對應 rgb(59, 130, 246)。兩種格式的轉換完全精確，因為每個通道儲存相同的八個位元。 HSL 各數值的意義為何？HSL 以色相、飽和度和亮度描述色彩，而非混合原色。色相是色環上 0 至 360 度的角度（0 度為紅色，120 度為綠色，240 度為藍色）。飽和度從 0%（純灰色）到 100%（最鮮豔的色相）。亮度從 0%（黑色）經 50%（純色相）到 100%（白色）。 HSL 更直觀，調整色彩時（例如加亮或降低飽和度）比直接修改通道數值更便利。 是否支援三位 HEX 色碼？支援。三位色碼是六位色碼的簡寫，每個數字重複一次展開：#ABC 等同於 #AABBCC。此簡寫形式僅能表示通道值為重複數字的 4,096 種色彩，因此轉換工具一律輸出完整的六位格式。 為何來回轉換時數值會有些微偏差？RGB 以每通道 256 個離散階層儲存，HSL 則使用整數度數和整數百分比。將 RGB 轉換為 HSL 再轉回時，可能因各格式的捨入方式不同而落在相鄰的數值上。差異最多為一個單位，肉眼無法察覺，但這就是來回轉換偶爾會有一個單位偏差的原因。
