如何使用取色器從任意像素獲取色彩
快速解答
若要選擇顏色：開啟顏色選擇器，上傳圖片（或使用螢幕吸管），按一下所需顏色的像素，然後將顯示 HEX、RGB 和 HSL 值。所有處理都在本地進行——您的圖像永遠不會上傳。
介紹
顏色選擇器（也稱為吸管）可讓您找到像素的確切顏色。這對於匹配品牌顏色、從圖像中採樣顏色或從照片建立調色板至關重要。基於瀏覽器的顏色選擇器可以使用 Canvas API 從上傳的圖像中讀取顏色，瀏覽器的內建 EyeDropper API 可以從螢幕上的任何位置選擇顏色。本指南向您展示如何在瀏覽器中使用顏色選擇器。
步步
-
打開顏色選擇器工具
進入拾色器工具頁面。該工具支援從上傳的圖像中選取顏色，並且在支援的瀏覽器中，透過 EyeDropper API 從螢幕上的任何位置選取顏色。
-
選擇您的來源
若要從影像中選取：上傳或拖放影像。若要從螢幕中選擇（僅限 Chrome/Edge）：按一下「從螢幕中選擇」按鈕，然後按一下螢幕上的任何位置。
-
點擊像素進行採樣
對於影像拾取，將遊標移到影像上，然後按一下所需顏色的像素。該工具使用 getImageData() 從畫布讀取像素顏色。放大鏡可以幫助您選擇精確的像素。
-
讀取顏色值
此工具以 HEX、RGB 和 HSL 格式顯示選取的顏色以及樣本。當您移動遊標時，這些值會立即更新。
-
複製顏色
按一下任何格式旁的複製，將顏色值複製到剪貼簿。在您的 CSS、設計工具或應用程式中使用它。
範例
從標誌中選擇品牌顏色
輸入: logo.png，點選品牌顏色像素
輸出: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
從照片中取樣顏色
輸入: photo.jpg，點選天空像素
輸出: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
從螢幕上選擇（Chrome/Edge）
輸入: 點擊“從螢幕選擇”，然後點擊顯示器上的任何像素
輸出: 此像素的 HEX 值，例如 #ff5733
常見問題
- 抗鋸齒混合邊緣處的顏色 - 兩種顏色之間邊緣上的像素是混合的。從純色區域的中心取樣以確保準確性。
- 不支援 EyeDropper API — 螢幕選擇器需要 Chrome 95+ 或 Edge 95+。 Firefox 和 Safari 不支援；請改用圖片上傳方式。
- JPEG 壓縮會改變顏色 —JPEG 有損壓縮會稍微改變像素顏色。對於確切的品牌顏色，請使用 PNG 或原始向量來源。
- 顏色配置文件差異 - 具有嵌入顏色配置文件 (ICC) 的圖像的顯示可能與其原始像素值顯示的不同。
提示
- 使用擴大機選擇精確的像素 - 在高變焦下，您可以選擇單個精確的像素而不是混合邊緣。
- 如果壓縮引入了噪聲，則從實體區域採樣多個像素並對其進行平均 - 這會提供更具代表性的顏色。
- 使用 EyeDropper API (Chrome/Edge) 從任何應用程式中選取顏色，而不僅僅是瀏覽器中的圖片。
- 使用我們的顏色選擇器進行即時、私密的顏色取樣 - 您的影像永遠不會離開您的瀏覽器。