顏色選擇器
選擇和轉換顏色格式
Live swatch preview
#3B82F6
Use this panel to gauge readability, saturation, and mood before copying values into code or design files.
#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)Export color values
Copy individual formats or download a short palette snapshot for handoff.
繼續下一步
用相關的下一個動作延續你的工作流程。
互補色
#F6AF3C
Lighter
#94BBFA
Darker
#0A54CD
Privacy & Trust
Private by default
Color conversion and palette generation stay inside the browser. There is no upload or external API call.
Format handoff
Copy HEX for CSS, RGB for graphics pipelines, and HSL for design iteration without switching tools.
Palette-ready
Complementary, lighter, and darker swatches make it easier to test button, background, and accent combinations.
使用方法
開啟工具
無需設定——工具在瀏覽器中即時載入。
互動與探索
使用滑鼠、鍵盤或觸控即時互動。
隨時隨地使用
桌面與行動裝置皆可使用——隨時隨地練習或創作。
為什麼使用此工具
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 並實際打樣確認。