ColorPick 如何運作？
選擇圖片後，取色工具會在瀏覽器中讀取圖片，讓你直接查看並選取顏色。將游標移到圖片上可預覽顏色，點擊即可選取。選取的顏色會以多種格式顯示，也可以加入My Palette，從同一張圖片持續整理需要的色彩。
上傳圖片、點擊任意位置，即時取得精確的 HEX、RGB 與 HSL 色彩值。
🖱️ Move your mouse over the image and click to select a color.
探索 100+ 組精選配色，為你的下一個專案尋找靈感。
ColorPick 協助設計師、開發者、藝術家與創作者快速從圖片擷取顏色。
ColorPick guide
ColorPick適合處理一個常見的設計需求：從圖片、螢幕截圖、照片、插畫或設計參考中找出可使用的數位色彩。與其憑眼睛猜測顏色，不如上傳圖片、選取需要的區域，再將HEX、RGB或HSL數值複製到設計或程式碼中。
選擇圖片後，取色工具會在瀏覽器中讀取圖片，讓你直接查看並選取顏色。將游標移到圖片上可預覽顏色，點擊即可選取。選取的顏色會以多種格式顯示，也可以加入My Palette，從同一張圖片持續整理需要的色彩。
HEX使用十六進位通道值表示顏色，CSS中非常常見。RGB表示紅、綠、藍三個通道的數值。HSL則以色相、飽和度與明度描述顏色，方便理解和調整。三種格式都是同一數位顏色的不同表示方式，互相轉換並不會自動產生新的顏色。
先從圖片中選取重要顏色，例如背景、主要強調色、文字、插畫細節或產品元素。將重要顏色保存到My Palette，再使用Color Code、Color Suggestions或Color Wheel探索色階與搭配色。發佈設計前，請在最終使用情境中確認顏色，因為對比度與周圍顏色會影響實際視覺效果。
可以的話，請使用原始圖片或最高品質版本。壓縮過的截圖可能因壓縮與影像效果而改變像素值。遇到漸層、陰影、照片或紋理時，建議取樣多個位置，而不是只依賴單一像素。ColorPick提供取樣到的數位數值，但最終設計仍應在實際螢幕與介面中確認。
ColorPick
這裡整理了 ColorPick 此工具的常見問題與實用解答。
Upload an image, move the pointer over it, and click the area you want. ColorPick shows the selected color and its HEX, RGB and HSL values.
The image picker reads the selected image in your browser so you can sample colors locally. The contact form is a separate feature that can send a message when you submit it.
The picker provides HEX, RGB and HSL values so you can use the same color in web design, UI, graphics and other digital projects.
取色器是用來選取數位顏色並查看色彩數值的工具。ColorPick 可以從圖片中取樣顏色，並顯示 HEX、RGB 與 HSL 數值。
當你想從照片、螢幕截圖、插圖、商品圖片或設計參考中準確找出顏色時，取色功能非常實用，也能將取得的色碼再次用於設計或程式碼。
開啟 Color Wheel 後觀察不同色相之間的關係。利用互補色、類似色及其他配色關係，可以更容易找到協調的色彩組合。
選取顏色後，可以複製色碼並貼到 CSS、設計軟體、介面原型或品牌色彩規範中。HEX 常用於網頁設計；RGB 以紅、綠、藍三個色彩通道表示顏色；HSL 則以色相、飽和度與明度描述色彩，方便理解和調整。若圖片包含陰影、漸層或細緻紋理，建議取樣多個位置並比較結果，而不是只依賴單一像素。你可以把主要色彩與強調色加入調色盤，讓按鈕、連結、背景和插圖保持一致。需要精準比對時，請盡量使用高畫質原圖，因為壓縮圖片或螢幕截圖可能改變部分像素顏色。完成設計前，請在實際使用的畫面中檢查文字與背景的對比，並確認重要資訊容易閱讀。ColorPick 能協助你找出數位色碼，但最終的視覺效果仍應在實際版面與裝置上確認。