調色盤
不只可以線上調色，輸入 HEX、RGB 或 HSL 任一格式，也會即時同步轉換成其他色碼。
提示：可貼上 #RGB / #RRGGBB、rgb(...)、hsl(...) 格式。
線上調色器
拖拉色彩選擇器或 RGB 滑桿，色碼會即時同步- 使用線上調色器點擊選色，或拖拉 RGB 三色滑桿微調顏色。
- 或直接在 HEX、RGB、HSL 任一欄位貼上色碼。
- 修改任一欄位後，其他所有格式會即時同步轉換。
- 點擊「複製 HEX」、「複製 RGB」或「複製 HSL」按鈕，將色碼複製到剪貼簿。
提示：支援 #RGB、#RRGGBB、rgb(...)、hsl(...) 等常見輸入格式；也可點擊「隨機顏色」靈感發想。
何時會用到？
- 設計稿交接、前端切版或品牌色整理時，需要快速在 HEX、RGB、HSL 之間互轉。
- 想微調一個顏色，但不確定要改哪個數值格式比較順手時。
- 需要把色碼直接複製到 CSS、設計工具、簡報或文件中時。
HEX、RGB、HSL 有什麼差別？
HEX 常用在前端與設計交付，RGB 直接反映紅綠藍數值，HSL 則比較適合用來理解色相、飽和度與明度。它們只是不同表示法，指向的可以是同一個顏色。
我應該用哪一種格式來調整顏色？
如果你想精準貼進程式碼，HEX 很方便；要細調某一色光比例時，RGB 直覺；要做一整組色調明暗變化時，HSL 通常比較好調。實務上很多人會混著用。
為什麼我輸入一半就顯示格式錯誤？
因為系統會即時驗證輸入是否已經形成完整可解析的色碼。如果只是暫時還沒輸完，補完整後通常就會正常同步，不代表資料被清掉或壞掉。
隨機顏色功能適合做什麼？
它很適合拿來找靈感、快速試色，或打破原本只在熟悉色域內思考的習慣。找到喜歡的顏色後，再用其他欄位慢慢微調會比較有效率。
這個工具能幫我判斷顏色對比或無障礙嗎？
這一頁主要專注在選色與格式轉換，不是對比判斷工具。如果你要檢查文字與背景是否足夠可讀，建議搭配站內的 contrast-checker 一起使用。
圖片格式怎麼選？JPG、PNG、WebP、GIF 完整比較指南
同樣是存圖片，為什麼 PNG 有時比 JPG 大好幾倍？什麼時候該用 WebP？GIF 是不是已經過時了？本文從壓縮原理出發，一次搞清楚主流圖片格式的差異與選擇邏輯。
資料視覺化入門：如何選擇正確的圖表類型？
長條圖、折線圖、圓餅圖、散布圖——面對這麼多圖表類型，該如何選？本文從資料類型與溝通目的出發，幫你建立選圖的判斷框架，避免常見的視覺化錯誤。
色彩對比度與無障礙設計：WCAG 標準、對比度計算原理與改善技巧
色彩對比度是無障礙網頁設計的核心指標，影響弱視、色盲及一般使用者在不同環境下的閱讀體驗。本文說明 WCAG 2.1 標準的 AA/AAA 等級、相對亮度計算公式，以及常見的色彩設計錯誤與修正策略。
社群貼文圖片編輯全流程：尺寸規格、視覺一致性與輸出設定
想讓社群貼文更吸睛，不只靠設計感，更要掌握尺寸、構圖、色彩一致與輸出設定。本文整理一套可重複執行的圖片編輯流程，幫你穩定產出高品質內容。
色碼完全指南：RGB、HEX、HSL 的轉換原理與設計應用
前端工程師與設計師都離不開色碼，但你真的了解 RGB、HEX、HSL 背後的原理嗎？本文從光學物理到無障礙設計，完整解析各種色彩模型的換算邏輯、使用情境與配色實戰技巧。