圖片取色器
上傳圖片後移動游標查看顏色，點擊圖片即可固定 HEX、RGB 與 HSL 色碼。
選擇圖片後，滑過圖片即可查看顏色。
選擇圖片後，滑過圖片即可查看顏色。
滑過圖片可以即時查看顏色，點一下圖片可以固定 HEX、RGB、HSL 色碼。
工具簡介
上傳圖片後移動游標查看顏色，點擊圖片即可固定 HEX、RGB 與 HSL 色碼。
圖片只會在你的瀏覽器中讀取與取色，不會上傳到伺服器。
工具介紹
圖片取色器可以從照片、截圖或設計稿中讀取指定像素的顏色，並轉成網頁與設計常用的 HEX、RGB 與 HSL 色碼。
本工具會把圖片載入瀏覽器畫布，游標移到圖片上時即時顯示該位置顏色，點擊後可固定色碼，方便複製到 CSS、簡報或設計軟體中。
圖片壓縮、縮放、螢幕色彩設定與原始檔色彩描述檔都可能讓看到的顏色略有差異；若是正式品牌色，仍建議以品牌規範或原始設計檔為準。
使用方式
- 選擇一張圖片。
- 把游標移到圖片上查看即時色碼。
- 點擊圖片固定色碼，再複製 HEX、RGB 或 HSL。
適合情境
- 從圖片擷取品牌色
- 製作設計稿或網頁配色
- 找出照片中喜歡的 HEX 色碼
應用建議
- 想從 Logo、商品照或社群圖片延伸配色時，可以在主色、陰影與背景區各取幾個點，再挑出最穩定的色碼。
- 如果圖片有漸層、雜訊或壓縮痕跡，建議不要只取一次色；多點比對後再決定要使用的 HEX 或 RGB 值。
- 取出的顏色可搭配圖片轉檔、圖片尺寸調整或 QR Code 工具，用於製作貼文素材、網站元件或活動視覺。
HEX、RGB、HSL 色碼怎麼用？
圖片取色後最常用的是 HEX 色碼，適合貼到 CSS、簡報、Canva 或設計工具。RGB 適合需要調整透明度或和程式介面配合的情境，HSL 則適合用色相、飽和度與亮度去微調配色。
同一張圖片可能因壓縮、陰影、反光或螢幕色彩設定而有細微差異，因此正式品牌色不要只取一個像素就定案。
| 格式 | 範例 | 適合用途 |
|---|---|---|
| HEX | #1F7A5A | 網頁 CSS、簡報、設計軟體、品牌色票。 |
| RGB | rgb(31, 122, 90) | 程式介面、圖片處理、需要和透明度搭配時。 |
| HSL | hsl(156, 59%, 30%) | 調整色相、飽和度、亮度，延伸同色系配色。 |
從圖片取出穩定配色的方法
如果你想從商品照、Logo 或社群圖片延伸網站配色，建議不要只點一次。可以在主體、陰影、背景與亮部各取幾個點，找出最常出現且最接近視覺印象的顏色。
圖片若有漸層或雜訊，取色結果會跟游標位置高度相關。這時可以先裁切或放大圖片，再取比較乾淨的區域。
- 品牌 Logo：優先取純色區塊，避免取到抗鋸齒邊緣的混色像素。
- 照片配色：分別取主色、輔助色、背景色，再確認文字放上去是否清楚。
- 網頁設計：取出 HEX 後，可再用 HSL 微調亮度，做出 hover、邊框或淡背景。
- 正式品牌規範：仍以原始設計檔或品牌手冊色碼為準。
取色後如何檢查能不能當文字顏色？
從圖片取出的顏色不一定適合直接當文字顏色。照片裡漂亮的低對比色，放到網頁按鈕或文字上可能會不清楚，尤其在手機、戶外或螢幕亮度較低時更明顯。
實務上可以把取出的主色拿來做背景、邊框或裝飾，再另外選深色或淺色文字。若是重要按鈕、表單提示或正文，應優先考慮可讀性。
| 取色用途 | 建議做法 | 原因 |
|---|---|---|
| 正文文字 | 選接近黑色或深灰，避免直接用照片主色。 | 長段閱讀需要穩定對比。 |
| 按鈕背景 | 主色可用於背景，文字用白色或深色測試。 | 按鈕需要一眼看清楚。 |
| 淡色背景 | 用 HSL 調高亮度、降低飽和度。 | 可保留色彩印象又不干擾閱讀。 |
| 品牌色票 | 取多個點後再平均判斷。 | 避免把陰影或壓縮雜色當成品牌色。 |
常見問題
圖片會上傳嗎？
不會，取色使用瀏覽器 canvas 在本機完成。
可以複製哪些色碼？
點擊圖片固定顏色後，可以複製 HEX、RGB 與 HSL 三種格式。
手機上可以使用嗎？
可以，選擇圖片後用手指點擊圖片區域，即可固定該位置的顏色。