Gigi Tools

Color Picker 調色盤

互動式調色盤,拖曳選色並取得 HEX、RGB、HSL 色碼

選擇顏色
#3B82F5
色碼
HEX: #3B82F5
RGB: rgb(59, 130, 245)
HSL: hsl(217, 90%, 60%)
手動輸入 HEX

輸入 HEX 色碼可反向更新色盤(支援 #RGB 或 #RRGGBB)

顏色預覽

最近選擇的顏色

尚無歷史紀錄,選色後會自動記錄

使用說明

  1. 點擊上方色盤或使用系統選色器選擇您想要的顏色
  2. 選色後,下方會即時顯示 HEX、RGB、HSL 三種格式的色碼
  3. 點擊每種色碼旁的「複製」按鈕,一鍵複製到剪貼簿
  4. 您也可以在 HEX 欄位手動輸入色碼,色盤會自動更新
  5. 最近選擇的 10 個顏色會顯示在歷史紀錄中,方便重複使用

常見問題 FAQ

什麼是 Color Picker?

Color Picker(調色盤)是一種互動式工具,讓您透過視覺化介面選擇顏色,並取得對應的色碼值。常用於網頁設計、UI 設計和圖形設計工作流程中。

HEX、RGB、HSL 有什麼差別?

HEX 是十六進位色碼(如 #FF5733),最常用於 CSS;RGB 用紅綠藍三原色數值表示(如 rgb(255, 87, 51));HSL 用色相、飽和度、亮度表示(如 hsl(11, 100%, 60%)),更直覺易調整。

如何在 CSS 中使用這些色碼?

三種格式都可直接用於 CSS 的 color、background-color 等屬性。例如:color: #FF5733; 或 color: rgb(255, 87, 51); 或 color: hsl(11, 100%, 60%);。現代瀏覽器皆支援這三種格式。