圖片取色器

你要的是那個準確的顏色,不是一個"差不多"的顏色

你在重做一套品牌,手頭只有一張老 logo。你想讓一個按鈕跟某個網站的截圖對上色。你在照片裡看到一個顏色,想用到自己的設計裡。這些情況的難處是同一個:眼睛沒法從螢幕上讀出十六進位制色值。你以為的"那個青色",其實是十幾個略有差別的青色,顯示器還會把它們再往偏裡帶。你要的是這個畫素真正存著的那個數值。

這個工具做的就是這件事。載入一張圖,把游標移上去,一個放大鏡跟著你走,把游標下的畫素放大給你看,你就能精確地落到你想要的那一個上。點一下,這個顏色就存成一個色塊。每個色塊都列出它的 HEX、RGB 和 HSL,每個數值旁邊配一個複製按鈕,你就從圖裡的一個畫素,直接到剪貼簿裡的一段色值。

圖片始終不離開你的機器。畫素是在瀏覽器本地、從 canvas 上讀出來的——什麼都不上傳,沒有賬號,頁面載入完之後斷網也照樣用。當這張"圖"是一份還沒釋出的設計稿、一份客戶的品牌素材,或者一張你本不該丟給某個網頁工具的內部截圖時,這一點就是關鍵。

實際怎麼用

• 放大鏡是為了準。 logo 和介面上有硬邊,顏色可能在一個畫素的寬度裡就變了——抗鋸齒會讓緊挨著的那個畫素變成一坨混色。放大後的檢視讓你在下手前看清自己到底停在哪個畫素上,於是你取到的是那塊純正的品牌色,而不是邊緣的混色。
• 每次點選都留下一個色塊。 取色不是取一次就沒了。在圖上到處點,每個顏色都會在列表裡疊起來,你可以一趟就把一個 logo 的主色、輔色、文字色都取下來,並排比較。
• 三種格式,一次取到。 每個色塊同時顯示 HEX、RGB、HSL。想換格式不用重新取色——同一個顏色三種寫法都已經擺在那兒,各配一個複製按鈕。

HEX、RGB、HSL 各在什麼時候用

它們是同一個顏色的三種寫法,用哪個取決於它要去哪兒。

• HEX(#3A7BD5)是網頁上的預設寫法——CSS、大多數設計工具、品牌文件都認。短,哪兒都能粘。沒有特別理由就複製它。
• RGB(rgb(58, 123, 213))把紅、綠、藍三個通道的值寫清楚。當某個工具要通道值、當你需要加透明度(rgba)、或者你在琢磨一個顏色是怎麼混出來的時候,用它。
• HSL(hsl(215, 65%, 53%))描述的是色相、飽和度、明度。當你想調整一個顏色而不只是照搬時,就該用它——把明度提一點做 hover 態、把飽和度壓低做一個柔和的變體、保持色相去推出一整條色階。

一個要說清楚的限制,以及一個姊妹工具

這是個點取樣工具:每次點選讀的是單個畫素。在乾淨的 logo 或純色介面上,這正是你要的。但在有噪點、漸層、JPEG 壓縮痕跡的照片上,相鄰兩個畫素可能就不一樣,所以要在純色區域裡取,並借放大鏡避開個別偏差的畫素。這裡沒有"取一片區域求平均"的畫筆。

如果你根本不想一個個手動挑,img.diy 上還有一個單獨的調色盤工具,它會掃描整張圖、自動把主要顏色交給你。兩者回答的是不同的問題。調色盤工具告訴你這張圖由哪些顏色構成;而取色器讓你指向某個具體的畫素——logo 上這個確切的點、那一個按鈕——取它的值。想概括一張圖,用調色盤工具;已經知道自己要哪個點,用這個。

載入一張圖,懸停找到畫素,點選留下它,複製你要的那種格式。