# Eyedropper

> 用瀏覽器原生 EyeDropper API 直接吸取螢幕任何位置的顏色，即時轉成 HEX、RGB、HSL、OKLCH，還能檢查 WCAG 對比、匯出色票。全程在你的裝置上處理，不會上傳任何畫面。

- URL: https://bytescope.dev/zh-Hant/eyedropper/
- Locale: zh-Hant · Also: [en](https://bytescope.dev/en/eyedropper.md) · [ja](https://bytescope.dev/ja/eyedropper.md)
- Runs: 不會上傳任何東西。顏色數值與取色歷史只存在你瀏覽器的本機空間。
- Requires: Chrome, Edge or Opera on desktop (EyeDropper API). Not Firefox, Safari or mobile browsers.
- Updated: 2026-09-08

## What it does

不用安裝任何軟體，直接用瀏覽器原生的 EyeDropper API，從桌面、其他視窗或任何網站吸取顏色。每個吸到的色票都會即時轉成 hex、rgb、hsl、oklch 四種格式，要貼進 CSS、design token 或繪圖軟體，按一下複製就好。

### 吸取瀏覽器視窗以外的顏色

一般的網頁取色器只能在上傳的圖片裡選色，這個工具不一樣：在支援的 Chromium 瀏覽器上，它會叫出作業系統原生的放大鏡吸管，讓你直接取樣程式碼編輯器、桌布、設計稿，甚至另一台螢幕上的任何像素。取樣介面由瀏覽器原生處理，拿到的是該像素準確的 sRGB 顏色。

### 隱私設計：只回傳單一像素，不是螢幕截圖

你的螢幕內容完全不會外流。啟動吸管後，瀏覽器只把你點到的那一個像素的 hex 色碼交給這個頁面——沒有截圖、沒有錄影、沒有游標座標。按 `Esc` 取消取色也不算出錯，頁面讀不到任何螢幕內容，只會安靜地結束。

### WCAG 對比檢查與色票匯出

取色歷史最多保留 48 個色票，存在你瀏覽器的本機空間。挑兩個色票分別當前景與背景，就能算出 WCAG 2.1 對比值，並分別檢查一般字級與大字級是否達到 AA、AAA。要注意 WCAG 的對比公式只定義在不透明色上，所以計算時會忽略 alpha 值，別拿半透明色的結果當保證。色票隨時可以匯出成 CSS 自訂屬性、GIMP 色票（`.gpl`）、JSON 或純 HEX 清單。

### 跨瀏覽器備援：手動貼上照樣能用

`EyeDropper` API 目前只有 Chrome、Edge、Opera 這類桌面版 Chromium 瀏覽器支援。用 Firefox、Safari 或手機瀏覽器打不開吸管也沒關係，頁面會自動改成手動輸入：貼上 hex 色碼或 `rgb()` / `rgba()` 值（逗號與空格兩種寫法都收），格式轉換、對比計算、匯出功能全部照常。

## Limits

Does not pick colours from images you upload (use image tools for that); it samples the live screen, including outside the browser window.

## FAQ

### 怎麼從螢幕上取色？

按「吸取顏色」按鈕，瀏覽器會叫出原生的放大鏡吸管。把它移到螢幕上任何一個像素——瀏覽器裡外都行——點一下就取到顏色。想取消就按 `Esc`，不會出錯，什麼都不會發生。

### 這個網站看得到或錄得到我的螢幕嗎？

不行。原生 EyeDropper API 只會回傳你點的那個像素的 sRGB 色碼，頁面拿不到螢幕截圖、影像串流、影像緩衝或像素座標，你的螢幕內容始終是私密的。

### 為什麼在 Firefox 或 Safari 上吸管按鈕不能按？

`EyeDropper` API 目前只有桌面版 Chromium 瀏覽器（Chrome、Edge、Brave、Opera）有實作，Firefox 與 Safari 還沒支援。不過你仍然可以手動貼上色碼，格式轉換、WCAG 對比檢查、色票匯出照常可用。

### WCAG 對比計算怎麼處理透明度？

WCAG 2.1 的相對亮度公式只定義在不透明的前景色與背景色上，所以計算對比值時會忽略 alpha 值，一律把顏色當成完全不透明來算。

### 色票可以匯出成哪些格式？

四種：CSS 自訂屬性（`--swatch-1: #hex`）、GIMP 色票檔（`.gpl`，GIMP 與 Inkscape 都能開）、JSON 陣列（每筆帶 hex 字串與 0-255 的原始色版數值），以及純 HEX 清單。

### 色票會被上傳或存到伺服器嗎？

不會。所有格式轉換、對比計算與取色歷史都只在你的裝置上用前端 JavaScript 和 `localStorage` 處理，什麼都不會送出去。

## Related tools

- [Image Inspector](https://bytescope.dev/zh-Hant/image-inspector.md) — 用放大鏡取色、讀像素座標、分析圖片。
- [Redact Screenshot](https://bytescope.dev/zh-Hant/redact-screenshot.md) — 把截圖裡的文字塗黑、名字模糊化、臉部馬賽克，藏好機密。