色碼轉換器
輸入顏色並複製 HEX、RGB 和 HSL 值。
#624DE3CC
工具介紹
顏色代碼轉換工具可同時以 HEX、RGB、HSL 三種格式顯示同一種顏色，並支援彼此轉換。你可以直接輸入顏色、從預設顏色中挑選，或使用滴管從螢幕上取色，同時也能調整透明度。無論是網頁設計、UI 製作、CSS 編寫或圖片編輯，都能輕鬆把顏色轉換成需要的代碼格式。
使用方法
選擇顏色
在 HEX、RGB 或 HSL 欄位中輸入數值，或選擇預設顏色。在支援的環境下，也可以按滴管按鈕直接從螢幕上取色。
調整透明度
拖曳透明度滑桿控制顏色的不透明度。設定會同步反映在上方的預覽與顏色代碼中。
檢視並複製結果
在預覽中確認顏色後，按下 HEX、RGB 或 HSL 欄位旁的複製按鈕，將所需數值複製到剪貼簿。
主要特點
HEX、RGB、HSL 同時顯示
以一種格式輸入顏色，即可同時看到對應的 HEX、RGB、HSL 數值。
即時預覽與透明度調整
修改顏色數值或透明度時，預覽會立即更新，滑桿也能幫你做出半透明顏色。
滴管與預設顏色
在支援的瀏覽器中，可用滴管從螢幕取色，或點選常用預設顏色快速套用。
各格式分開複製
可分別複製 HEX、RGB、HSL 數值，直接用在 CSS、設計工具和文件中。
直接輸入數值
如果已經知道顏色代碼，直接在欄位中輸入即可查看轉換結果。
瀏覽器內處理
你的顏色數值與轉換結果只會在瀏覽器內處理，不會傳送至任何伺服器。
使用場景
轉換 CSS 顏色代碼
將設計稿中的 HEX 顏色轉換為 RGB 或 HSL，用於 CSS 樣式。
在不同設計工具間傳遞顏色
當各程式要求的顏色格式不同時，可將同一顏色轉換成每個工具所需的代碼格式。
建立半透明背景
調整透明度，產生適合疊加層、背景、按鈕和邊框使用的半透明顏色。
從螢幕上取色
使用滴管選取網頁、圖片或應用程式畫面中顯示的顏色，並以代碼檢視。
管理品牌顏色
將品牌顏色的 HEX、RGB、HSL 數值整理在一起，確保在網頁、印刷與設計文件中一致使用。
常見問題
HEX、RGB、HSL 有什麼不同？
HEX 以十六進位表示顏色，例如 #8AD0FF。RGB 用數值表示紅、綠、藍的強度，HSL 則以色相、飽和度、明度來描述顏色。
該用哪種格式？
HEX 簡單直接，在網頁和設計文件中使用最廣。想直接調整色彩通道時用 RGB 比較方便，想直觀地調整色相或明度時則推薦 HSL。
透明度會如何反映在顏色代碼中？
帶透明度的 HEX 會以 8 位代碼顯示，也就是在一般 6 位代碼後加上 alpha 值。例如 #8AD0FFCC 中的最後兩位就是透明度。
6 位與 8 位 HEX 有何不同？
6 位 HEX 只包含紅、綠、藍三種數值。8 位 HEX 在末尾加上 alpha 值，用來表示透明度。
透明度 100% 和 0% 分別代表什麼？
100% 代表完全不透明，0% 代表完全透明。中間數值會產生半透明顏色，讓背景透出來。
RGB 數值的範圍是多少？
RGB 的每個色值（紅、綠、藍）範圍都是 0 到 255。數值越大，該顏色成分就越強。
HSL 的各個數值代表什麼？
H 是色相，通常是 0 到 359 度之間的數值。S 是飽和度，L 是明度，兩者都以百分比表示。
滴管在所有瀏覽器都能用嗎？
支援與否取決於瀏覽器與環境。在不支援的環境中，請改用顏色輸入欄位或預設顏色。
選了預設顏色之後還能編輯嗎？
可以。選取預設後，你可以調整 HEX、RGB、HSL 數值或透明度來微調顏色。
複製按鈕會複製什麼數值？
每個複製按鈕都會複製目前顏色在該格式下的數值。你可以只複製需要的 HEX、RGB 或 HSL 值。
我輸入的顏色會傳送到伺服器嗎？
不會。所有處理都在你的瀏覽器內完成，你的顏色數值與轉換結果絕不會傳送至伺服器。
相關工具
