顏色轉換器(HEX、RGB、HSL 即時同步)

輸入十六進位制程式碼、RGB 三元組或 HSL 值, 其他格式即時同步, 預覽色塊同時更新。設計師、Web 開發者和跨工具調色都適用。

HEX

RGB

HSL

hex: #0ea5e9
rgb(14, 165, 233)
hsl(199, 89%, 48%)

運作原理

HEX、RGB、HSL 是 sRGB 顏色的三種記法。HEX 是 RGB 的簡寫: #FF6B35 表示紅=255, 綠=107, 藍=53。RGB 用紅、綠、藍光的強度(各 0-255)描述顏色。HSL 用色相、飽和度、亮度重新編碼同一 RGB 顏色。

三者等價, 可無損來回轉換。設計師偏好 HSL 調色(提高亮度色相不變), 開發者通常從設計工具直接複製 HEX 到 CSS。RGB 在畫布、影像處理 API 等程式場景最常見。

HEX: 從設計稿複製貼上、Figma 匯出、品牌指南、CSS 顏色字面量。簡潔但難直觀讀懂。

RGB: 程式化顏色操作(畫布、影像處理)、可訪問性檢查(對比度計算用線性 RGB)、需要精確整數的場合。

HSL: 憑感覺調色——「再飽和一點」、「懸停時稍暗」、「色相步進生成調色盤」。這些任務用 HSL 遠比 HEX 直觀。

暫未支援 alpha 通道(透明度)——但所有現代瀏覽器支援 #RRGGBBAA, 末尾追加兩個十六進位制位即可(00 = 透明, FF = 不透明)。

也不涵蓋廣色域(P3、Rec.2020、OKLCH)。多數 Web 工作 sRGB 基礎的 HEX/RGB/HSL 是正確選擇。如目標 HDR 或廣色域顯示, 檢視 CSS Color Module Level 4 語法。

›HSL 到 HEX 來回轉換會丟精度嗎?

幾乎不會。HSL 以整數度和百分比儲存, 360 × 101 × 101 = 370 萬個 HSL 值對映到 1670 萬 RGB 組合。極端邊角可能輕微舍入。HEX 作為精確儲存的規範。

›支援 3 位 HEX 碼嗎?

支援。#f60 視為 #ff6600。兩者展開到相同 RGB 三元組。

›為什麼 HSL 飽和度/亮度不到 360?

色相是度數(0-360 繞色環)。飽和度和亮度是百分比(0-100)。

›HSL 與 HSB/HSV 一樣嗎?

不一樣。HSV(HSB)用「Value」替代「Lightness」, 是不同的亮度模型。HSL 的 L=50% 是純色; HSV 的 V=100% 是純色。本工具用 HSL 與 CSS 一致。

›支援透明度嗎?

暫不。可在 HEX 末尾加兩位 alpha(如 #00000080 = 50% 黑)。

›為什麼 RGB 不顯示 0-1 浮點?

因多數場景(CSS、設計工具)用 0-255 整數。Shader 工作除以 255 得 0-1 浮點。

›設計師從哪裡得到正確顏色?

品牌指南、設計令牌、調色盤生成器。對比度檢查器可驗證前/背景對是否符合 WCAG AA/AAA。

›計算精確嗎?

是的。使用標準 sRGB 轉換數學。來回差異僅來自 HSL 的整數量化。