為何需要 HEX 色碼？——本頁面的定位與其他頁面的差異
在同一個工具站內，可能有許多取色頁面：有的輸出 rgb(r,g,b) 格式，有的輸出 hsl(h,s,l)。本頁面之所以獨立存在，是因為 HEX 色碼是 CSS 與設計工具中最直接的標準。六位十六進位表示法（例如 #1E90FF）不需要括號或函式寫法，可直接寫入 color、background-color 等屬性。相較於 RGB 功能的 rgb(30,144,255) 或 HSL 的 hsl(210,100%,56%)，HEX 更簡潔，沒有額外的語法開銷。
此外，本頁面處理的 HEX 是六位（或三位縮寫）格式，不包含 alpha 通道。當像素帶有透明度時，工具會以百分比形式獨立顯示：「Alpha ‹n›% — this pixel is partly transparent.」，避免將 alpha 混合進 HEX 值中，造成後續使用上的混淆。這是與其他支援 rgba 的頁面最關鍵的區別。
如何取色：上傳、選取與即時顯示
操作流程非常直接：
-
選擇圖片：支援 PNG、JPG、WebP、GIF、AVIF、HEIC 格式。對應的 MIME 類型為
image/jpeg、image/png、image/webp、image/gif、image/avif、image/heic、image/heif。若嘗試上傳不支援的檔案類型，會出現提示：「That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.」若圖片損毀或無法開啟，則顯示：「That image could not be opened. It may be corrupted or in an unsupported format.」 -
自動縮放：當圖片的長邊超過 4096 像素，工具會將其縮小，以維持瀏覽器處理效能與畫面可操作性。縮放後的像素值不會精確對應原始圖片，但對於多數取色用途已足夠。
-
即時取色：圖片載入後，工具會立即顯示中心像素的顏色資訊（HEX、RGB、HSL 以及座標）。移動滑鼠或手指（觸控裝置）時，隨著游標位置更新採樣點，所有數值同步改變。為了精確選取，工具提供放大鏡效果，讓使用者能看清每個像素的邊界，避免因抗鋸齒或壓縮造成的模糊區域選錯點。
-
滑鼠與鍵盤雙模式：除了滑鼠操作，也可使用鍵盤的方向鍵移動十字準心。按住 Shift 再按方向鍵則每次移動 10 像素，適合大範圍跳躍。按下 Enter 或 Space 即可儲存當前顏色到歷史清單。
輸出內容詳解：HEX、RGB、HSL 與透明度
當游標停在某個像素上時，頁面會顯示：
- HEX：六位數十六進位色碼，例如
#1E90FF。大小寫一致，無前綴符號以外的字元。 - RGB：紅、綠、藍三數值，範圍 0–255。
- HSL：色相（0–360°）、飽和度（0–100%）、明度（0–100%）。
- 透明度：若像素的 alpha 值小於 255（即非完全不透明），會額外顯示「Alpha ‹n›% — this pixel is partly transparent.」。這個百分比是 alpha 值除以 255 後的整數比例。注意，JPG 沒有 alpha 通道；PNG、WebP、GIF、AVIF、HEIC 可能包含透明或半透明區域。
HEX 不編碼 alpha，這是刻意設計。因為 CSS 的 color 屬性不接受八位 HEX（#RRGGBBAA）在某些舊瀏覽器或工具的支援度不一，六位 HEX 是最通用的選擇。透明度另行報告，使用者可根據需求自行決定是否要將其與背景混合或忽略。
邊界情況與注意事項
-
壓縮與抗鋸齒的影響：JPG 是有損壓縮格式，會在邊緣與平滑區域產生色塊擴散；抗鋸齒則會讓文字或形狀邊緣的像素呈現中間色。因此，即使看起來是單色區域，相鄰像素的 RGB 值也可能不同。此時放大鏡與精準點擊或鍵盤微調就特別重要。
-
透明像素的讀取：工具讀取的是圖像陣列中的實際 RGBA 值，不會考慮背景顏色。也就是說，一個 alpha=50% 的紅色像素，其 RGB 就是純紅色（255,0,0），但 HEX 顯示
#FF0000，透明度另列為 50%。設計師在使用時必須自行理解此像素在疊加背景後的視覺效果。 -
HEX 與 RGB 的轉換：熟悉轉換方式可幫助除錯。例如 RGB (30,144,255) 轉 HEX：30→
1E，144→90，255→FF，組合為#1E90FF。反之，#FF6347拆成 FF(255)、63(99)、47(71)，即 rgb(255,99,71)。本工具自動完成計算，但理解機制能避免誤用——例如偶爾會有人將 RGB 值直接寫成 HEX 字串（如rgb(255,99,71)當作色碼），是不正確的。 -
歷史記錄上限：最多儲存 12 個顏色。相同 RGB 但不同 alpha 值的像素會被視為獨立項目分別儲存。點擊任何一個曾儲存的色票，會重新載入該顏色的 HEX、RGB、HSL 與透明度資訊（若有），等同於再次點選該像素。
-
複製到剪貼簿：點擊任何顯示中的色碼（HEX、RGB 或 HSL 文字）即可複製。若瀏覽器阻擋剪貼簿存取，會顯示：「Could not copy — your browser blocked clipboard access.」此時請檢查瀏覽器設定或使用手動選取複製。
鍵盤操作與輔助功能
除了滑鼠，鍵盤使用者的完整流程如下：
- 方向鍵：上下左右移動十字準心 1 像素。
- Shift + 方向鍵：移動 10 像素。
- Enter 或 Space：儲存當前顏色。
- Tab 與 Shift+Tab：可在頁面元素（如「Start over」按鈕）間切換。
這種設計讓無法精確操控滑鼠的使用者（例如使用螢幕閱讀器搭配鍵盤，或手部震顫者）仍能獨立完成取色。對於需要高精度選取（如 1×1 像素的細線）的電繪或網頁設計師，鍵盤微調也比滑鼠更可靠。
保存色票與歷史記錄
每次點擊圖片或按下 Enter/Space，該像素的顏色就被記錄到「Your Picks」清單中。清單以小型色塊加上 HEX 值顯示。最多 12 筆，超過時最舊的項目會被移除。點擊清單中的色塊，可使該顏色重新成為作用中顏色（即所有輸出欄位更新為該顏色），方便反覆取用。
「Start over」按鈕會清除圖片、清空歷史記錄，並回到初始狀態——也就是上傳區域再次出現，無任何選取資訊。
常見問題 (FAQ)
HEX 色碼有大小寫區分嗎？
沒有強制規定，但主流慣例使用大寫十六進位數字（如 #1E90FF），本工具也輸出大寫。瀏覽器與設計軟體一律不區分大小寫。
為什麼我明明點在紅色區域，HEX 卻是接近橘色？ 可能是圖像經過 JPG 壓縮或抗鋸齒處理，導致邊緣像素混合了相鄰顏色。建議放大地圖（透過放大鏡）確認是否正中心落在純色區域內。若圖檔本身帶有輕微雜訊（如相片或網頁截圖），這是正常現象。
六位 HEX 與三位縮寫的轉換規則？
例如 #1E9 等同於 #11EE99，每位重複一次。只有當六位數中每位都是重複字元時才能縮寫（如 #FF00AA → #F0A）。工具只輸出六位完整格式，以避免混淆。
透明像素的 HEX 為什麼不顯示 alpha？
因為六位 HEX 標準不包含透明度。CSS 中的 color 屬性目前不支援八位 HEX（#RRGGBBAA）作為標準顏色值（部分瀏覽器僅實驗性支援）。為了跨平台相容，本工具永遠只給六位 HEX，alpha 另行顯示。
為什麼最大隻支援 12 個歷史顏色？ 實際使用時，一次取色任務通常不會超過十餘個必要色票。12 個上限足以記錄多數調色盤，同時保持介面簡潔，避免過長的清單影響操作效率。
我可以從螢幕截圖取色嗎？ 可以，但請留意：螢幕截圖通常經過作業系統或顯示驅動的色彩調整，且壓縮格式（如 JPG 或 PNG）可能改變原始像素值。最好使用原始設計檔案（如.sketch、.psd、.svg）匯出的無損圖片。