調色盤

不只可以線上調色,輸入 HEX、RGB 或 HSL 任一格式,也會即時同步轉換成其他色碼。

提示:可貼上 #RGB / #RRGGBB、rgb(...)、hsl(...) 格式。

格式不正確,請檢查輸入。
格式不正確,請檢查輸入。
格式不正確,請檢查輸入。

線上調色器

拖拉色彩選擇器或 RGB 滑桿,色碼會即時同步
79
70
229
  1. 使用線上調色器點擊選色,或拖拉 RGB 三色滑桿微調顏色。
  2. 或直接在 HEX、RGB、HSL 任一欄位貼上色碼。
  3. 修改任一欄位後,其他所有格式會即時同步轉換。
  4. 點擊「複製 HEX」、「複製 RGB」或「複製 HSL」按鈕,將色碼複製到剪貼簿。

提示:支援 #RGB、#RRGGBB、rgb(...)、hsl(...) 等常見輸入格式;也可點擊「隨機顏色」靈感發想。

何時會用到?

  • 設計稿交接、前端切版或品牌色整理時,需要快速在 HEX、RGB、HSL 之間互轉。
  • 想微調一個顏色,但不確定要改哪個數值格式比較順手時。
  • 需要把色碼直接複製到 CSS、設計工具、簡報或文件中時。

HEX、RGB、HSL 有什麼差別?

HEX 常用在前端與設計交付,RGB 直接反映紅綠藍數值,HSL 則比較適合用來理解色相、飽和度與明度。它們只是不同表示法,指向的可以是同一個顏色。

我應該用哪一種格式來調整顏色?

如果你想精準貼進程式碼,HEX 很方便;要細調某一色光比例時,RGB 直覺;要做一整組色調明暗變化時,HSL 通常比較好調。實務上很多人會混著用。

為什麼我輸入一半就顯示格式錯誤?

因為系統會即時驗證輸入是否已經形成完整可解析的色碼。如果只是暫時還沒輸完,補完整後通常就會正常同步,不代表資料被清掉或壞掉。

隨機顏色功能適合做什麼?

它很適合拿來找靈感、快速試色,或打破原本只在熟悉色域內思考的習慣。找到喜歡的顏色後,再用其他欄位慢慢微調會比較有效率。

這個工具能幫我判斷顏色對比或無障礙嗎?

這一頁主要專注在選色與格式轉換,不是對比判斷工具。如果你要檢查文字與背景是否足夠可讀,建議搭配站內的 contrast-checker 一起使用。

你可能也需要