ByteScope

Eyedropper

把螢幕上任何顏色吸進來,轉成 hex、rgb、hsl、oklch,附 WCAG 對比檢查與色票匯出。

不會上傳任何東西。顏色數值與取色歷史只存在你瀏覽器的本機空間。

從螢幕取色

按「吸取顏色」後點螢幕上任一像素即可取色,按 Esc 取消。

API 能力與誠實說明

  • 可吸視窗外:EyeDropper API 能取樣螢幕上任何像素,包括其他應用程式與桌面。
  • 只給單一像素:瀏覽器只交出你點的那個像素的 sRGB 顏色,不含任何區域或座標。
  • 沒有螢幕擷取:這個頁面永遠拿不到你螢幕的截圖或影像串流。

顏色格式

先取色或貼上顏色,就會顯示各種格式。

取色歷史

0/48

還沒有色票。從上面取色或貼上顏色來建色盤。

WCAG 對比值

WCAG 對比只定義在不透明色上,計算時會忽略 alpha 值。

從上面的歷史挑出顏色 A 與顏色 B,就會算出對比值。

匯出色票

瀏覽器偵測

螢幕取色靠原生 EyeDropper API。請以這個頁面的即時偵測為準,別只看靜態的相容表。

  • EyeDropper API 偵測中…

關於這個工具

不用安裝任何軟體,直接用瀏覽器原生的 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() 值(逗號與空格兩種寫法都收),格式轉換、對比計算、匯出功能全部照常。

常見問題

怎麼從螢幕上取色?

按「吸取顏色」按鈕,瀏覽器會叫出原生的放大鏡吸管。把它移到螢幕上任何一個像素——瀏覽器裡外都行——點一下就取到顏色。想取消就按 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 處理,什麼都不會送出去。