屏幕顏色拾取器

屏幕顏色拾取器 — 快速獲取任意顏色的色值

屏幕顏色拾取器是一款運行在瀏覽器中的在線取色工具，藉助現代瀏覽器內置的 EyeDropper API，用戶只需點擊一個按鈕，即可將鼠標懸停到屏幕上的任意位置進行取色。拾取完成後，工具會自動將顏色轉換爲設計與開發中最常用的五種格式：HEX、RGB、HSL、HSV 和 CMYK，每種格式均支持一鍵複製，極大提升工作效率。

核心功能

• 屏幕任意位置取色：支持從網頁、圖片、視頻截圖、軟件界面等任意屏幕區域拾取顏色，無需截圖再導入第三方軟件。
• 多格式色值輸出：自動輸出 HEX（十六進制）、RGB、HSL、HSV、CMYK 五種主流顏色格式，覆蓋網頁開發、平面設計、印刷等不同場景需求。
• HEX 大小寫切換：HEX 字段支持一鍵轉換大寫或小寫，滿足不同代碼規範的格式要求。
• 歷史記錄：自動保留最近 12 次拾取的顏色，點擊歷史色板即可快速切換查看，方便顏色對比與複用。
• 實時預覽：取色後頂部色塊實時更新，棋盤格背景準確模擬顏色的視覺效果。
• 一鍵複製：每種格式右側均有複製按鈕，點擊即複製到剪貼板，直接粘貼進代碼或設計工具。

適用場景

• UI/UX 設計師：看到喜歡的配色方案時，無需截圖，直接在瀏覽器中吸取色值，快速應用到設計稿。
• 前端開發者：快速獲取頁面或參考圖的精確顏色，複製 HEX 或 RGB 值直接用於 CSS 樣式。
• 平面設計師：獲取 CMYK 色值，用於印刷品的顏色覈對與調整。
• 品牌與運營人員：精準提取品牌色、競品色板，保持視覺一致性。

如何使用

1. 點擊頁面中的「拾取屏幕顏色」按鈕，瀏覽器將進入取色模式，鼠標變爲放大鏡光標。
2. 將鼠標移動到屏幕上任意位置，可實時預覽當前顏色。
3. 點擊目標顏色，工具自動完成拾取並填充所有格式字段。
4. 在右欄找到需要的顏色格式，點擊右側複製按鈕即可使用。
5. 歷史記錄色板會保留本次會話的拾取記錄，方便對比。

顏色格式說明

• HEX（十六進制）：如 #16baaa，是網頁開發中最常用的顏色表示方式，CSS、HTML、設計工具均廣泛支持。
• RGB：如 rgb(22, 186, 170)，表示紅、綠、藍三通道的強度值（0–255），適用於屏幕顯示場景。
• HSL：如 hsl(175, 79%, 41%)，以色相、飽和度、亮度描述顏色，更符合人類對顏色的直覺認知，便於手動調色。
• HSV：如 hsv(175, 88%, 73%)，與 HSL 類似但亮度定義不同，常見於 Photoshop 等專業設計軟件的拾色器。
• CMYK：如 cmyk(88, 0, 9, 27)，用於描述印刷四色（青、品、黃、黑）的混合比例，是印刷行業的標準顏色模型。

常見問題（FAQ）

Q：爲什麼點擊按鈕沒有反應，或按鈕顯示爲灰色？
A：屏幕取色功能依賴瀏覽器內置的 EyeDropper API，目前僅 Chrome 95+、Edge 95+ 及基於 Chromium 的瀏覽器支持。Safari 和 Firefox 暫不支持此功能，請更換瀏覽器使用。

Q：拾取的顏色爲什麼沒有透明度通道？
A：EyeDropper API 的設計規範不返回透明度信息，所有拾取的顏色 Alpha 值固定爲 1（完全不透明），這是瀏覽器層面的限制。

Q：歷史記錄會保存到下次打開嗎？
A：會。工具通過瀏覽器本地存儲（localStorage）自動保存最近 12 次拾取的顏色，下次打開頁面時歷史記錄會自動恢復。隱私模式下不會保存。

Q：能拾取瀏覽器之外（如桌面應用）的顏色嗎？
A：可以。EyeDropper API 支持跨窗口取色，點擊拾取按鈕後移動鼠標到桌面任意位置均可拾取，不限於瀏覽器內部。