簡易取色器

Chrome 免費取色器

從任何網頁取色，取得 #E8553D

簡易取色器是 Chrome 的免費滴管工具。點擊它的按鈕或按 Alt+P，用放大鏡對準任一像素並點擊：HEX、RGB 或 HSL 色碼已在剪貼簿裡。最近 50 種顏色就放在彈出視窗中。

加到 Chrome — 免費

Chrome Web Store 上有 453 位使用者

也可在 Edge、Brave、Opera 和其他 Chromium 瀏覽器中使用。

網頁海報上的方形放大鏡框住一個像素，並顯示它的 HEX、RGB 和 HSL；旁邊是簡易取色器彈出視窗，顯示 #E8553D 和顏色歷史

概覽

功能
取色器滴管：用放大鏡對準網頁上的任一像素並點擊，就會複製它的 HEX、RGB 或 HSL 色碼。
適合誰
需要從線上網站、設計稿和瀏覽器中開啟的螢幕截圖比對顏色的網頁開發者與設計師，以及任何需要色碼的人。
價格
免費。不需帳號，沒有付費版。
資料
歷史紀錄和預設格式存放在你裝置上擴充功能的本機儲存空間。沒有分析統計，不發出網路請求。
適用環境
電腦上的 Chrome，以及其他可從 Chrome Web Store 安裝擴充功能的 Chromium 瀏覽器。不適用於新分頁、設定和 Chrome Web Store 等瀏覽器頁面。
限制
只能從分頁的可見部分取色，使用你啟動時擷取的快照。不支援 CMYK、Pantone 和對比度檢查，也不能在瀏覽器之外取色。
版本
2.7.0，更新於 2026年10月23日

三步，一次點擊

  1. 1

    啟動取色器

    點擊工具列圖示並按下「選取顏色」，或在任何頁面按 Alt+P。

  2. 2

    用放大鏡瞄準

    方形放大鏡放大游標周圍的區域，並框住準確的像素。下方的標籤即時顯示 HEX、RGB 和 HSL。

  3. 3

    點擊並貼上

    色碼依預設格式複製，並跳出簡短提示確認。貼到 CSS、Figma 或訊息裡即可。

誰在用

CSS

前端開發

不必開啟 DevTools，就能從線上網站取得精確數值，用於 CSS、SCSS 或 Tailwind 設定。

HEX

設計與品牌核對

從介面、設計稿或參考圖中取得色盤，並核對頁面用的是不是正確的品牌色。

HSL

調整顏色

取 HSL 手動調整明度與飽和度，或取 RGB 用於需要數值的程式碼。

功能

  • 像素，精準框選

    放大鏡放大游標周圍 11 × 11 像素，準星框住你要取的那一個。能點中一像素寬的邊框，或漸層中的某一階。

  • 種格式

    HEX 如 #2A6FDB，RGB 如 rgb(42, 111, 219)，HSL 如 hsl(217, 71%, 51%)。在彈出視窗裡設定一次預設格式。

  • 種歷史顏色

    每次取色都會排到最近 50 種顏色格狀清單的最前面，不重複。點擊一個色塊，即可查看並複製全部三種色碼。

  • 快速鍵 Alt+P

    不必開啟彈出視窗就能開始取色。想換按鍵的話，點擊視窗裡的鍵帽，會開啟 Chrome 的快速鍵設定。

  • 次網路請求

    一切都在你的瀏覽器裡執行。沒有帳號，沒有分析統計，沒有遙測。

  • 淺色與深色

    彈出視窗和放大鏡跟隨系統主題，使用中性灰，不會干擾你判斷的顏色。

如何取得網頁上任何內容的色碼

Chrome 內建的滴管藏在 DevTools 裡：開啟「樣式」面板，找到一個顏色屬性，點擊它的色塊，再點滴管。能用，但藏得深，而且取到的值會取代頁面 CSS 中的那個屬性，而不是進入你的剪貼簿。

簡易取色器讓滴管只差一次點擊或一個快速鍵。啟動時，它會擷取分頁的可見部分，並在上面開啟一個方形放大鏡，所以你看到的是準確的像素，而不是平均色。點擊一次即可複製色碼，彈出視窗會把它和最近 50 種顏色一起保留，三種格式都有。

開始前先捲動到需要的位置：放大鏡讀取的是那張快照。新分頁、設定和 Chrome Web Store 等瀏覽器頁面對所有擴充功能都是關閉的。

預設保護隱私

  • 沒有網路請求

    擴充功能從不與伺服器通訊。沒有分析統計，沒有遙測。

  • 留在你的裝置上

    歷史紀錄和預設格式存放在擴充功能的本機儲存空間。

  • 四項權限

    目前分頁，僅在你開始取色時用於擷取快照；指令碼注入，用於顯示放大鏡；儲存空間，用於歷史紀錄和格式；寫入剪貼簿，用於複製色碼。

DevTools 滴管與簡易取色器

DevTools 滴管與簡易取色器DevTools 滴管簡易取色器
如何啟動開啟 DevTools，在「樣式」裡找到顏色，點擊它的色塊，再點滴管工具列按鈕或 Alt+P
結果去向你開啟的那個 CSS 屬性；需要自己複製點擊後直接進入剪貼簿
顏色格式HEX、RGB、HSL 等HEX、RGB 和 HSL
之前取的顏色不保留最近 50 種，可再次複製
價格Chrome 內建免費

常見問題

如何取得網站上的色碼？

安裝簡易取色器，在頁面上按 Alt+P，用放大鏡對準顏色並點擊。HEX 色碼（或你偏好的 RGB、HSL）會複製到剪貼簿。

如何從網頁上的圖片取色？

方法相同：啟動取色器，點擊圖片中想要的像素。放大鏡會放大畫面，所以能取到準確的一個像素。

可以複製 HSL 或 RGB 而不是 HEX 嗎？

可以。在彈出視窗裡選擇預設格式：HEX、RGB 或 HSL。視窗也會為歷史中的每個顏色顯示全部三種色碼，每種都有自己的複製按鈕。

之前取的顏色在哪裡找？

開啟彈出視窗：最近 50 種顏色以色塊形式排列，最新的在前。點擊一個即可查看並複製它的色碼，也可以清除歷史紀錄。

如何更改 Alt+P 快速鍵？

點擊彈出視窗裡的快速鍵鍵帽。會開啟 Chrome 的鍵盤快速鍵頁面，你可以在那裡設定其他按鍵。

為什麼在某些頁面上不能用？

Chrome 對所有擴充功能關閉了自己的頁面，例如新分頁、設定和 Chrome Web Store。取色器也只讀取分頁的可見部分，所以請先捲動到要取的顏色。

能在瀏覽器之外取色嗎？

不能。它只能從目前的瀏覽器分頁取色。它也不轉換為 CMYK 或 Pantone，不檢查對比度。

免費嗎？會蒐集資料嗎？

免費，且不發出網路請求。歷史紀錄和預設格式保留在你的裝置上。

PYROCTAL 的更多免費擴充功能

對準。點擊。貼上。

加到 Chrome — 免費