顏色選擇器 使用指南
無論是寫 CSS 還是做設計稿,準確的顏色值都至關重要。ToolBox 顏色選擇器在本地幫你取色、微調,並即時互轉 HEX / RGB / HSL 多種格式。
核心功能
- 視覺化調色盤,拖動即時取色
- HEX / RGB / HSL 三種格式即時互轉
- 顯示對比文字色(黑/白)建議
- 支援複製任意格式
- 可輸入顏色值反向定位
適用場景
- 前端開發寫 CSS 顏色值
- 根據品牌色推導相近色
- 對比前景/背景可讀性
- 從圖片吸色後轉成程式碼可用值
使用步驟
- 在調色盤拖動選擇目標顏色
- 檢視同步生成的 HEX/RGB/HSL
- 複製需要的格式到程式碼
- 輸入某個已知色值可反向定位到面板
- 用對比色提示確認文字可讀性
實用技巧
- 同一顏色在不同螢幕有偏差,重要品牌色以程式碼值為準
- 保證可訪問性:正文與背景對比度建議 ≥4.5:1
- HSL 更適合做明暗/飽和度微調
- 儲存調色盤時注意命名一致
常見問題
- HEX 和 RGB 哪個更好?
- 本質等價,HEX 更緊湊、RGB 更直觀,按需選擇。
- 怎麼保證文字可讀?
- 用工具提供的對比色建議,確保前景背景對比度足夠。