顏色選擇器
選擇和轉換顏色格式
#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)#F6AF3C使用方法
開啟工具
無需設定——工具在瀏覽器中即時載入。
互動與探索
使用滑鼠、鍵盤或觸控即時互動。
隨時隨地使用
桌面與行動裝置皆可使用——隨時隨地練習或創作。
為什麼使用此工具
100% 免費
沒有隱藏費用，沒有付費等級——所有功能完全免費。
無需安裝
完全在瀏覽器中運行。無需下載或安裝任何軟體。
隱私且安全
您的資料永遠不會離開您的裝置。不會上傳至任何伺服器。
支援行動裝置
完全響應式設計——在手機、平板或桌面電腦上均可使用。
顏色轉換完全指南：HEX、RGB、HSL 格式一次搞懂
重點摘要
- HEX 格式（#FF5733）最常用於網頁設計和 CSS
- RGB 格式（紅綠藍）適合數位螢幕顯示，HSL 格式方便調整色相、飽和度和亮度
- 互補色可以用來設計對比強烈的配色方案
顏色在設計中扮演關鍵角色，但不同工具使用不同的顏色格式。網頁開發常用 HEX，設計軟體偏好 RGB，調色時 HSL 更直覺。這個工具能在各種格式間快速轉換，讓你在不同平台間無縫銜接。
1677萬
RGB 可表示的顏色數量
常見使用場景
網頁設計與開發
設計師在 Figma/Sketch 中選了一個顏色，需要轉成 HEX 給前端工程師寫 CSS。或是從品牌規範中拿到 RGB(255, 87, 51)，要轉成 #FF5733 用在網站上。
品牌色彩管理
品牌手冊可能定義主色為 Pantone 色號，但實際應用時需要轉換成 RGB（螢幕顯示）或 CMYK（印刷）。顏色轉換器能協助在不同媒介間保持一致性。
配色方案設計
使用 HSL 格式可以輕鬆調整色相（H）創造類似色系，或調整飽和度（S）和亮度（L）產生同色系的深淺變化。互補色功能則幫助找到對比色。
可及性（Accessibility）檢查
網頁設計需要確保文字與背景的對比度符合 WCAG 標準。轉換成 RGB 後可以計算對比度，確保視障用戶能清楚閱讀。
配色實用技巧
HEX 格式最短也最常用於 CSS。若顏色值為 #RRGGBB 且每對重複（如 #FFAA00），可縮寫為 #FA0。
HSL 格式調整色調很直覺：保持 H 不變，降低 S（飽和度）可得到更柔和的顏色；提高 L（亮度）可得到更明亮的版本。
互補色（色相相差 180°）對比強烈，適合用於按鈕和背景的搭配，但大面積使用可能刺眼。
設計時建議用顏色選擇器搭配 HSL 視覺化調整，而非手動輸入數值——視覺比數字更準確。
不同螢幕的顯色可能有差異。印刷品顏色需轉換為 CMYK 並實際打樣確認。