圖片取色器
選擇照片、標誌或螢幕截圖，點選像素或擷取調色盤，用於下一個設計。
PNG、JPEG 或 WebP · 最高 20 MiB、16 MP
選擇圖片，擷取第一個顏色。
點選或輕觸圖片上的一點。聚焦圖片後，用方向鍵移動一像素，按住 Shift 移動 10 像素。 像素座標從左上角的 0 開始。
所選像素
請在圖片上選擇一個點。
你選擇的顏色
最多儲存此圖片的 12 個顏色，再下載數值。
檢查兩種顏色的搭配
使用範例配色、輸入自己的顏色，或將圖片中的選色設為文字色與背景色。預覽搭配、檢查對比度，再複製數值用於設計。
圖片中所選的顏色
先在圖片中選擇像素，再將其設為文字色或背景色。
選擇新圖片會重新使用範例配色。
選擇透明顏色下方的不透明底色。
支援 #RGB、#RGBA、#RRGGBB、#RRGGBBAA、rgb(0, 0, 0) 或 rgba(0, 0, 0, 0.5)。RGB 通道使用 0 至 255 的整數，Alpha 使用 0 至 1。
配色預覽
給下一個想法留個位置
帶上筆記本，找個座位，從一張小草圖開始。
對比度
7.46:1
顯示的比值經過四捨五入，是否達標使用完整精度判斷。
| 文字大小 | AA | AAA |
|---|---|---|
| 一般文字 | 達標 | 達標 |
| 大字 | 達標 | 達標 |
大字指至少 18 pt 的一般字或 14 pt 的粗體字，請核對最終設計的字級。
配色詳細資訊
{
"standard": "WCAG 2.2 SC 1.4.3 / 1.4.6",
"colorSpace": "sRGB",
"channels": "RGB 0–255; alpha 0–1",
"foreground": [
35,
78,
82,
1
],
"background": [
245,
230,
200,
1
],
"backdrop": [
255,
255,
255,
1
],
"renderedForeground": [
35,
78,
82,
1
],
"renderedBackground": [
245,
230,
200,
1
],
"ratio": 7.46158578805981,
"checks": {
"normalAA": true,
"normalAAA": true,
"largeAA": true,
"largeAAA": true
}
}結果僅描述這組配色。文字邊緣經過反鋸齒處理時，請使用原設計色值。透明色以你選擇的不透明底色合成計算。
WCAG 對比度指南從圖片擷取調色盤
擷取一組設計用色，再複製或下載調色盤。
先在上方選擇圖片，再擷取調色盤。
所選檔案與色值僅保留在此頁面記憶體中，本工具不會上傳或儲存它們。網站一般服務獨立運作。
試用原創六色範例
這張原創 PNG 包含六個純色色塊，其中有半透明紅色與全透明色塊。下載後在上方選擇它，檢查像素數值。
下載範例 PNG
把圖片像素變成可重用的顏色
- 選擇本機 PNG、JPEG 或 WebP。預覽適配螢幕，取色使用圖片的原始尺寸。
- 點選、輕觸或用方向鍵選擇像素。複製 HEX 取得 RGB 通道值，複製 RGBA 則包含透明度。
- 儲存需要的顏色，再下載包含色值與像素座標的 JSON 或 TXT 清單。開啟另一張圖片會清空之前的選取與清單。
開始前，你可能想了解
這個圖片取色器免費嗎？
是的，取色、複製與下載都在瀏覽器中完成，無需帳戶或積分。
透明度數值表示什麼？
Alpha 為 0 表示全透明，255 表示完全不透明。不含 Alpha 的 HEX 與 RGB 顯示色彩通道；RGBA 與八位 HEX 包含透明度。棋盤格只是預覽背景，不是從圖片中取樣的顏色。
為什麼同一顏色在其他應用程式中看起來不同？
這裡顯示瀏覽器解碼後的像素值。圖片色彩描述檔、瀏覽器處理、顯示設定與印刷都會影響外觀。請在設計中使用這些數值，並在最終使用情境檢查成品。
工具會上傳圖片嗎？
不會。所選本機檔案在此瀏覽器頁面解碼與取色，不會由工具傳送至伺服器或儲存至瀏覽記錄。載入網頁與下載公開範例使用一般網站連線。
能從圖片生成調色盤嗎？
可以。使用「擷取調色盤」取得三、五或八個代表色，再複製或下載。也可手動選擇並儲存最多 12 個顏色及其像素座標。