DevToolX色碼轉換
在 HEX、RGB 和 HSL 色碼格式之間互相轉換
關於 色碼轉換
HEX、RGB、HSL、OKLCH 描述的是同一件事——螢幕上的顏色——但在不同的使用場景下各有優勢。HEX 簡潔、通用，設計師交付的稿子幾乎都用它；RGB 直接對應顯示硬體的訊號；HSL 讓你用「色相 / 飽和度 / 亮度」來思考，調色時更直觀；OKLCH 則在感知上是均勻的，數值跨色相調整時視覺變化更一致，是 CSS Color Level 4 和 Tailwind v4 的首選格式。這個工具支援四種格式含 alpha 通道的雙向轉換，幫你在設計稿與 CSS 程式碼之間自由切換。
常見使用情境
常見問題
HEX 和 RGB 有什麼差別？
沒有本質差別，兩者都是 R、G、B 三個通道各 0–255 的值。HEX 只是把這三個數字用十六進位表示：#FF0000 等於 rgb(255, 0, 0)。用哪個看使用場合，CSS 兩種都接受。
為什麼用 HSL 比 RGB 更容易調色？
RGB 存的是原始通道數值，「讓這個顏色亮一點」在 RGB 裡需要同時調整三個數字。HSL 把色相（H）、飽和度（S）、亮度（L）分開，想讓顏色淡一點只要調 L，想換一個色系只要動 H，直觀很多。
OKLCH 是什麼？比 HSL 好在哪？
OKLCH（OK Lightness / Chroma / Hue）是感知均勻的色彩空間：相同的亮度數值差，在不同色相下視覺上看起來變化量相近。HSL 不具備這個特性——同樣是 80% 亮度，黃色看起來比藍色亮很多。CSS Color Level 4 原生支援 `oklch()`，Tailwind v4 也在內部改用 OKLCH 計算色階。
各格式的 alpha 通道怎麼表示？
CSS 函式用第四個參數：`rgba(255, 0, 0, 0.5)`、`hsla(0, 100%, 50%, 0.5)`、`oklch(60% 0.2 30 / 0.5)`，其中 0 是完全透明，1 是不透明。8 位 HEX 在末尾加兩個十六進位字元表示 0–255 的 alpha，例如 `#FF000080` 代表 50% 透明的紅色。
sRGB 能涵蓋現代螢幕所有能顯示的顏色嗎？
不能。sRGB 覆蓋約 35% 的可見色域；支援 P3 廣色域的現代螢幕（如 iPhone、MacBook）可以顯示約 50%。CSS Color Level 4 提供 `color(display-p3 r g b)` 讓你使用 P3 色域，但跨裝置相容的預設仍是 sRGB。