免費設計工具
選色器與色碼轉換。
免費線上選色器與色碼轉換：拖曳選色即時取得 HEX、RGB、HSL 色碼並互相轉換，自動產生深淺色階與互補配色，網頁設計、簡報配色直接複製。
可複製色碼—
深淺色階（點色塊複製 HEX）
配色建議（點色塊複製 HEX）
常見問題
HEX、RGB、HSL 差在哪？
HEX 是十六進位色碼（如 #0B1F3A），網頁與設計軟體最通用；RGB 用紅綠藍三個 0 到 255 的數值描述同一顏色；HSL 用色相（0 到 360 度）、飽和度、亮度描述，調深淺只要動亮度一個數字，做色階最直覺。三者可以無損互轉。
怎麼快速做出品牌色的深淺色階？
選定主色後看下方自動產生的色階列：往深的用在文字與 hover 狀態，往淺的用在背景與邊框。原理是固定色相與飽和度、只調整 HSL 的亮度，這樣整組顏色會有一致的色感，比憑感覺挑安全得多。
互補色與類似色怎麼用？
互補色（色相相差 180 度）對比最強，適合按鈕等需要跳出來的元素，但大面積使用會刺眼；類似色（相差 30 度內）和諧耐看，適合背景與輔助色。常見做法是主色配類似色打底，互補色只用在行動呼籲的點綴。
想從圖片取色怎麼辦？
用本站的圖片取色器：上傳商品圖或截圖、點一下就能取得該點的 HEX 與 RGB 色碼，還會自動抽出整張圖的主要色盤。取到色碼後回到本工具調整深淺、產生色階即可。