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