圖片取色工具：Hex 色碼輸出頁面
這個頁面專為需要從圖片中精確提取像素顏色，並直接取得 Hex 色碼（Hexadecimal Color Code）的使用者而設。你只需上載一張圖片，然後將滑鼠游標移到圖上任何一點，工具便會即時顯示該像素的六位 Hex 色碼，同時一併展示 RGB 與 HSL 數值。放大鏡功能協助你對準最細微的像素，而點擊便能將顏色儲存至記錄清單，方便後續參照。
為何這頁只專注 Hex 色碼？
與同系列中另外兩個分別以 RGB 函數記法（rgb(r, g, b)）和 HSL 記法（hsl(h, s%, l%)）為主要輸出的頁面不同，本頁的 首要輸出是 Hex 色碼——即六位數（或三位縮寫）的十六進位表示法，例如 #1E90FF。這是在 CSS 及絕大多數設計軟件（Figma、Adobe Photoshop、Sketch）中最直接的顏色值格式。你複製後可以直接貼入 color、background-color 或任何接受顏色的 CSS 屬性，無需額外加括號或轉換語法。
Hex 色碼本身不包含 Alpha 透明度通道。若選取的像素帶有半透明效果，工具會以獨立文字顯示：「Alpha ‹n›% — this pixel is partly transparent.」，讓你知道該像素的透明度百分比，但不影響 Hex 輸出的格式。這是因為 Hex 在六位數形式下根本無法表示 Alpha，而設計上保留最純粹的顏色數值供主流用途。
精確取色的技術細節
像素級選取與放大鏡
當圖片載入後，工具會立即顯示圖片中央像素的顏色數值及其座標 (x, y)。移動滑鼠時，取樣點隨游標位置逐像素更新。為了幫助你在高壓縮或反鋸齒的圖片中對準真正的目標色塊，頁面提供放大鏡視圖，讓你能清楚看出單一像素的邊界，避免因鄰近像素干擾而選錯顏色。
透明度處理
Hex 色碼不包含 Alpha，因此如果某個像素的透明度不是 100%（完全不透明），工具會額外顯示「Alpha ‹n›% — this pixel is partly transparent.」。注意：這個 Alpha 值是讀取自圖片本身的像素數據，不是模擬背景疊加後的結果。工具直接讀取 PNG、WebP 等支援透明度的格式中該像素的原始 RGBA 值，然後將 Alpha 轉換為百分比顯示。
座標系統與鍵盤導航
除了滑鼠操作，你也可以使用鍵盤上的 方向鍵 來移動十字準星，每次移動 1 像素。按住 Shift 再按方向鍵，則每次移動 10 像素，方便快速跳躍。按下 Enter 或 Space 即可儲存目前取樣的顏色至記錄。這個設計對無法或不願使用滑鼠的使用者尤其重要，也讓微調選取位置時更精準。
支援的圖片格式與處理限制
接受格式
工具接受以下圖片格式：
| 格式 | MIME 類型 |
|---|---|
| PNG | image/png |
| JPG | image/jpeg |
| WebP | image/webp |
| GIF | image/gif |
| AVIF | image/avif |
| HEIC | image/heic, image/heif |
若上載的檔案類型不在此列，頁面會顯示：「That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.」
圖片大小限制
為確保瀏覽器端的處理效能，當圖片最長邊超過 4096 像素 時，工具會自動將圖片縮小至該範圍內。縮放比例保持長寬比，因此取樣時得到的顏色數值對應的是縮小後的像素，而非原始超高解析度圖片的每個原像素。這點對需要從極大圖片中取色的使用者特別重要——若你需要更精確的原始像素，建議先自行裁剪或縮小圖片再上載。
壓縮與反鋸齒的影響
JPEG 格式的圖片經過有損壓縮，相鄰像素之間的顏色會因壓縮而出現平滑過渡，而非原本的純色塊。同樣，螢幕截圖或渲染圖中常見的反鋸齒（anti-aliasing）也會在邊緣產生混合色像素。工具如實讀取圖片中該像素的儲存值，因此選取的顏色可能與肉眼期望的「主色」有細微差異。如果需要提取純色區塊的底色，建議選取區塊中央而非靠近邊緣的像素。
無法開啟的圖片
若圖片檔案損毀、格式不正確或無法被瀏覽器解碼，工具會顯示：「That image could not be opened. It may be corrupted or in an unsupported format.」
色彩記錄與快捷操作
儲存顏色歷史
點擊圖片會將目前取樣的顏色存入下方的記錄清單，最多可儲存 12 個顏色。記錄中的每個項目都包含 Hex、RGB、HSL 數值，並以色塊顯示。即使兩個顏色的 RGB 值完全相同，只要 Alpha 透明度不同，工具會視為不同顏色分別儲存。點擊任何記錄色塊，會自動將該顏色載入回主要顯示區域，方便你再次複製或參考。
一鍵複製數值
頁面上顯示的 Hex、RGB、HSL 數值 均可點擊直接複製到剪貼簿。按一下即複製，不需要額外選取文字。如果瀏覽器因安全政策拒絕剪貼簿存取，會顯示：「Could not copy — your browser blocked clipboard access.」此時可手動選取文字再複製。
重新開始
按下「Start over」按鈕會清除所有已上載的圖片、清空顏色記錄，並將工具重置至初始狀態。這對開始一個全新專案時特別有用。
常見問題 (FAQ)
1. 為什麼 Hex 色碼只有 6 位，不能直接顯示透明度？
6 位 Hex 色碼（如 #FF5733）只包含紅、綠、藍三個通道，每個通道兩位十六進位數。如果要包含 Alpha 通道，需要使用 8 位 Hex（如 #FF573380），但本頁面設計為輸出標準的 6 位 CSS 色碼，透明度另以百分比顯示，確保與絕大多數設計工具和舊版 CSS 相容。
2. 如果圖片是 PNG 且有透明背景，取色時會考慮背景顏色嗎？
不會。工具讀取的是該像素本身的 RGBA 值，不考慮圖片背後可能有什麼顏色。即使是一個完全透明的像素（Alpha = 0%），其 RGB 值可能為 (0,0,0) 或其他數值（取決於圖片編輯軟件如何儲存），工具會如實顯示該像素的原始資料，並標示其透明度百分比。
3. 我可以用這個工具從 YouTube 影片截圖中取色嗎？ 可以，但影片截圖通常是 JPEG 格式，經過有損壓縮，顏色可能與原始影片中的實際色塊有偏差。建議截圖時儲存為 PNG 格式，以減少壓縮偽影。此外，瀏覽器會自動縮小超過 4096 像素的圖片，請確保截圖長邊不超過此限制，否則需容忍縮放帶來的顏色平均化。
4. 為什麼儲存了 12 個顏色後，無法再增加？ 這是工具的限制，最多保留 12 個歷史記錄。如果達到上限，你需要手動清除記錄（使用「Start over」或重新載入頁面）才能繼續儲存新顏色。這個設計是為了保持介面簡潔，並避免記錄清單過長影響使用。
5. 點擊顏色數值複製時，剪貼簿會得到什麼內容？
點擊 HEX 數值時，剪貼簿會複製類似 #1E90FF 的字串（包含 # 號）。點擊 RGB 數值時，複製的內容為 rgb(30, 144, 255) 格式。點擊 HSL 數值時，複製 hsl(210, 100%, 56%) 格式。所有格式均符合 CSS 規範，可直接貼入樣式表。
6. 為什麼我的快捷鍵 (如 Enter 或 Space) 沒反應？ 請確保你已經點擊過圖片或圖片區域，讓取樣功能獲得鍵盤焦點。如果頁面上有其他元素（如「Start over」按鈕）獲得焦點，鍵盤事件可能不會觸發取樣。直接按 Tab 鍵將焦點移至圖片區域，或再次點擊圖片即可恢復方向鍵與 Enter/Space 的控制。