如何從圖片精準取色：HEX、RGB 與 HSL

要取得圖片中的精確顏色，請讀取單一像素的數值，而不是用眼睛估計。用圖片取色器開啟圖片，將滑鼠移到該位置，點擊後複製 HEX 色碼。讀到的數值是該像素儲存的值，因此在同一個檔案中選取同一位置，每次結果都相同。

圖片取色器需要準確的顏色代碼免費使用

像素儲存了什麼

每個像素都是一個小小的色塊。在螢幕或圖片檔案中，它以三個數字儲存，分別代表紅、綠、藍，每個數字範圍從 0 到 255。純紅色是 255, 0, 0。這三個數字在每種格式中都帶有相同的資訊，因此同一種顏色可以用多種方式表示。

HEX、RGB 與 HSL

• HEX 將每個數字以十六進位表示，每個色頻兩個字元。#FF0000 是純紅色。網頁、CSS 和大多數設計工具都使用這種格式。
• RGB 以十進位寫出相同的數字，例如 rgb(255, 0, 0)。它與 HEX 色碼是同一種顏色。
• HSL 以人們描述顏色的方式來表示。色相是色環上的角度，飽和度是顏色的鮮豔程度，明度是顏色的亮暗程度。hsl(0, 100%, 50%) 是純紅色。

貼入程式碼時使用 HEX，工具要求時使用 RGB，想要同一色相的較亮或較暗版本時使用 HSL。只調整 HSL 的明度就能保留色相，若用 HEX 手動完成則較為困難。要檢查兩個顏色的對比度，請參閱HEX、RGB、HSL、CMYK 與對比度。

以下是樣式表中使用的一個顏色：

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

為什麼色碼可能與螢幕不符

• 圖片經過壓縮。 JPEG 會透過平滑細節來節省空間，因此靠近邊緣的像素可能與你在色塊中央看到的顏色略有不同。
• 邊緣會混色。 兩種顏色交界處的像素是混合色，本身並不是獨立的顏色。
• 色彩描述檔不同。 取色器讀取的是瀏覽器解碼後的數值，採用 sRGB。以廣色域描述檔儲存的照片，在其他程式中可能看起來不同。
• 縮放會混合像素。 以縮放後的顯示尺寸擷取的截圖，可能含有混合像素。可以的話，請以原始尺寸擷取截圖。
• 超大圖片會從副本讀取。 最長邊超過 6000 像素的圖片，會從 6000 像素的副本讀取，因此單一像素可能與完整尺寸檔案略有差異。

從平坦區域的中央取色

找出單一顏色的區域，然後移到它的中央。放大鏡會顯示指標周圍 11 × 11 像素，讓你看出該位置是混色還是純色。使用鍵盤時，可以用方向鍵一次移動十字線一個像素，按住 Shift 則一次移動十個像素，然後按 Enter 取色。複製前請先檢查讀數。

用色盤建立配色

照片中通常不只一個你在意的顏色。色盤會列出最多六種主要顏色。運作方式是將每個像素的各色頻四捨五入為 16 個階級，統計各群組，並保留彼此不同且最常見的群組。每個色票顯示其群組的平均值。點選色票即可複製其 HEX 色碼。請將色盤視為起點，因為它是平均值，並非實際量測的品牌色。

在格式之間轉換

如果設計工具要求另一種格式，請將 HEX 色碼貼到顏色轉換器。它會在 HEX、RGB 與 HSL 之間轉換，且不改變顏色，因此結果與你選取的色碼一致。

最近的取色紀錄與隱私

工具會將你最近的取色結果保留在頁面上，方便比較。這些紀錄只存在於此分頁的記憶體中，關閉分頁後即消失。圖片本身在你的瀏覽器內讀取，絕不會傳送到伺服器。

在 fixmint 中操作

1. 開啟圖片取色器，並拖入照片。
2. 將指標移到該位置。或點選圖片讓它取得焦點，再用方向鍵一次移動十字線一個像素，按住 Shift 則移動十個像素。
3. 點擊或按 Enter 取色。複製前請先檢查讀數。
4. 使用 HEX、RGB 或 HSL 旁的「複製」按鈕，複製你需要的數值。
5. 如果設計工具要求另一種格式，請將數值貼到顏色轉換器。

快速解答

為什麼我螢幕上的顏色看起來不同？ 你的螢幕顯示的是經過色彩管理、縮放後的檔案版本。請從平坦區域的中央取色，並將 HEX 色碼與已知的色票比較。

我應該複製哪種格式？ 網頁和大多數設計工具使用 HEX。工具要求時才使用 RGB 或 HSL。

這個工具會上傳我的圖片嗎？ 不會。圖片是在你的瀏覽器內解碼與讀取的。