拖放、貼上或選擇一張圖片
JPG · PNG · WebP · AVIF — 最大 50 MB
取色器如何取樣像素
照片會在你的瀏覽器中繪製到畫布上，取色器讀取你點選位置所儲存的紅、綠、藍數值。沒有估算，也不上傳。
放大鏡顯示真實像素
指標周圍 11 × 11 像素的區域會不經平滑處理直接放大，讓你在確定取色前看清雜訊、反鋸齒邊緣和漸層。
超大照片以 2400 px 取樣
超過這個尺寸時，每個取樣像素是幾個原始像素的平均值。在純色區域數值完全相同；在細緻紋理上則更接近肉眼所見。
手機上也能取色
用手指拖曳，放大鏡會浮在指尖上方；放開手指即保留該顏色。最近八次取色會保留為色塊，可再次選取。
HEX、RGB、HSL 還是 OKLCH：該複製哪種色碼
四種格式描述的都是同一個 sRGB 顏色。請選擇你的工具需要的寫法 — 表格以同一個紫色作為範例。
| 格式 | 範例 | 最適合 |
|---|---|---|
| HEX | #6A5BD6 | 設計工具、品牌規範、多數 CSS |
| RGB | rgb(106 91 214) | Canvas／JS 程式碼、Alpha 混合、影片工具 |
| HSL | hsl(247 60% 60%) | 手動快速微調亮度或飽和度 |
| OKLCH | oklch(55.2% 0.182 284.3) | 現代 CSS 佈景主題：亮度階層均勻，支援廣色域 |
HEX 和 RGB 完全精確
它們就是儲存的 8 位元數值，在 Figma、CSS 和影像編輯軟體之間來回複製都能完全吻合。
HSL 會四捨五入
色相、飽和度和亮度會四捨五入為整數，所以轉回 HEX 時可能和原始值差一階。
設計系統用 OKLCH
OKLCH 的亮度貼近人眼感知，是建立深淺色階最簡單的方式。所有現代瀏覽器的 CSS 都支援 oklch()。
色票擷取：方法與限制
色票採用經典的量化方法「中位切割法」（median cut）：把照片像素分成顏色相近的區塊，再取每個區塊的平均色。
顯示占比，不只是色塊
每個色塊都會顯示它在圖片中所占的百分比，讓你分辨出哪個是主要背景、哪個是小點綴。
平均值可能讓小點綴色偏移
很小的亮色細節可能會和周圍顏色合併，結果變得較暗淡。需要精確數值時，請直接用放大鏡點選。
顏色取決於檔案
數值是在瀏覽器套用照片的色彩描述檔後以 sRGB 讀取。Display P3 照片可能含有 sRGB 無法表示的顏色，這些會被截取為最接近的顏色。
取色器：常見問題
怎麼取得圖片中某個顏色的 HEX 色碼？
上傳圖片，移動滑鼠直到放大鏡中心對準你要的像素，然後點一下。HEX 值會顯示在右側並附有複製按鈕，旁邊還有 RGB、HSL 和 OKLCH。
這個取色器能精確到單一像素嗎？
長邊在 2400 px 以內的圖片可以：你拿到的就是該像素儲存的數值。更大的圖片會在 2400 px 的副本上取樣，極細微的細節會被平均。
色票最多能擷取幾種顏色？
5 到 8 種，用滑桿調整。平面圖像若有兩個區塊平均出相同顏色，會合併而非重複，因此結果可能較少。
色票可以用在 CSS 或 Tailwind 嗎？
匯出 CSS 變數（--palette-1 …，並以註解附上 OKLCH 值）後貼到 :root，或把 JSON 對應到 Tailwind 的佈景主題設定。
為什麼取到的顏色和螢幕上看到的不一樣？
廣色域螢幕或 Night Shift 之類的色彩濾鏡改變的是顏色的呈現，而不是數值本身。你複製的色碼就是圖片中儲存的值。
圖片會被上傳嗎？
不會。取色和色票擷取都在瀏覽器中執行，所以頁面載入後，取色器離線也能使用。
相關工具
大家常搭配使用的其他分析工具。
