如何在 HEX、RGB 與 HSL 之間轉換色彩
快速解答
若要轉換顏色：開啟顏色轉換器，輸入任意格式的顏色（HEX、RGB、HSL），該工具會立即顯示所有其他格式的等效顏色。所有轉換均在您的瀏覽器本地進行—無需上傳任何資料。
介紹
顏色可以用多種格式表示：HEX (#ff6600)、RGB (rgb(255, 102, 0))、HSL (hsl(24, 100%, 50%)) 等。不同的工具和上下文使用不同的格式 - CSS 通常使用 HEX 或 RGB，設計工具可能使用 HSL，而 APIs 可能使用任何格式。透過格式之間的轉換，您可以在需要另一種系統的上下文中使用在一個系統中定義的顏色。本指南向您展示如何在瀏覽器中轉換顏色。
步步
-
打開顏色轉換器工具
前往顏色轉換器工具頁面。此工具支援 HEX、RGB、HSL、HSV 和 CMYK 格式。
-
輸入您的顏色
以任何支援的格式鍵入或貼上顏色值。範例：「#ff6600」、「rgb(255, 102, 0)」、「hsl(24, 100%, 50%)」。該工具自動檢測輸入格式。
-
查看所有等效格式
此工具同時顯示所有格式的顏色：HEX、RGB、HSL、HSV 和 CMYK。它還顯示顏色預覽樣本，以便您可以驗證轉換是否正確。
-
複製你需要的格式
按一下任何格式旁的複製按鈕，將該值複製到剪貼簿。在您的 CSS、設計工具或應用程式中使用它。
-
調整顏色（可選）
有些工具可讓您使用滑桿調整顏色（對於 HSL：色調、飽和度、亮度）並查看所有格式即時更新。這對於查找相關顏色或色調很有用。
範例
HEX 至 RGB 及 HSL
輸入: #ff6600
輸出: RGB: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)
RGB 至 HEX
輸入: RGB(0, 128, 255)
輸出: HEX：#0080ff
HSL: hsl(210, 100%, 50%)
HSL 至 HEX
輸入: HSL(120, 100%, 50%)
輸出: HEX：#00ff00
RGB: rgb(0, 255, 0)
常見問題
- HEX 帶 # 與不含 # — 有些工具需要 # 前綴，有些則不需要。我們的轉換器接受兩者。
- 3 位數字與 6 位數字 HEX —#f60 是 #ff6600 的簡寫。兩者均有效；轉換器標準化為 6 位數字。
- HSL 色調範圍 — 色調為 0-360 度（一個圓）。 0和360都是紅色。高於 360 的值會環繞。
- 色彩空間差異 —HEX、RGB 與 HSL 皆為 sRGB。 CMYK 是不同的色彩空間（印刷），轉換是近似的。
提示
- 使用 HSL 建立顏色變化 - 調整色調、飽和度或亮度比 RGB 更直觀。
- 使用 HEX 取代 CSS — 它是樣式表中最緊湊且受廣泛支援的格式。
- 當您需要設定 alpha 透明度時，請使用 RGB —rgb(255, 102, 0, 0.5) 以獲得 50% 的不透明度（或使用 8 位元 HEX: #ff660080）。
- 使用我們的顏色轉換器在所有顏色格式之間進行即時、私密的轉換。