顏色選擇器
在線顏色選擇工具，HEX、RGB、HSL 格式互轉，生成配色方案
選取顏色
#2563eb
輸入顏色
最近使用
暫無記錄
顏色格式
HEX#2563eb
RGBrgb(37, 99, 235)
HSLhsl(217, 91%, 53%)
配色方案
互補色
類似色
三等分色
分裂互補色
明暗變化
淺色調
深色調
什麼是顏色選擇器？
顏色選擇器是前端開發和UI設計中常用的工具，幫助您精確選取顏色並在不同格式之間轉換。HEX 使用十六進制表示，RGB 基於紅綠藍三原色，HSL 基於色相、飽和度、亮度，各有適用場景。
使用方法
- 點擊顏色選擇器選取顏色，或在輸入框中輸入顏色值
- 查看 HEX、RGB、HSL 三種格式的轉換結果
- 點擊格式旁的複製按鈕複製顏色值
- 參考配色方案獲取互補色、類似色等搭配建議
- 查看明暗變化獲取同色系的深淺變體
常見用途
- CSS 開發：快速獲取 HEX/RGB/HSL 顏色值用於樣式代碼
- UI 設計：選取品牌主色並生成完整配色方案
- 無障礙檢測：確保文字與背景色有足夠對比度
- 顏色轉換：在不同顏色格式之間快速轉換
常見問題 (FAQ)
Q: HEX、RGB、HSL 有什麼區別？
A: HEX 使用十六進制（如 #2563eb），常見於 CSS；RGB 用紅綠藍分量（如 rgb(37,99,235)），適合編程處理；HSL 用色相/飽和度/亮度（如 hsl(217,91%,53%)），更直觀易懂。
Q: 什麼是互補色？
A: 互補色是色輪上相對的兩種顏色，如紅與綠、藍與橙。互補色搭配對比強烈，常用於需要突出顯示的場景。
Q: 如何選擇好的配色方案？
A: 類似色搭配和諧自然，適合大部分場景；互補色對比強烈，適合強調元素；三等分色豐富多彩，適合活潑風格。建議主色佔 60%，輔色 30%，強調色 10%。
Q: 顏色數據會上傳到服務器嗎？
A: 不會。所有顏色計算都在瀏覽器本地完成，不會上傳任何數據。