取色器

在瀏覽器本地從手動輸入、螢幕或上傳圖片中取色，並查看 HEX、RGB、HSL、HSV、CMYK 與 CSS 值。

取色器

取色器可在瀏覽器本地從手動輸入、螢幕或圖片像素中取色，並即時輸出 HEX、RGB、HSL、HSV、CMYK 與 CSS 顏色值，適合前端開發、設計交付、主題設定與顏色校驗。

如何使用？

  1. 直接選擇顏色或調整透明度。
  2. 若瀏覽器支援，可使用螢幕取色器從介面中擷取顏色。
  3. 也可以上傳圖片並點擊像素位置進行取樣。
  4. 複製需要的顏色格式，用於 CSS、設計稿或設定檔。

工具特性

  • 支援手動取色、螢幕取色與圖片像素取樣
  • 輸出 HEX、RGB、HSL、HSV、CMYK 與 CSS 值
  • 在瀏覽器本地處理，不上傳圖片

為什麼使用這個工具？

  • 快速統一前端與設計使用的顏色值
  • 從截圖、UI 介面或圖片中直接還原顏色
  • 方便主題系統與樣式除錯中的顏色校驗

相關工具

GIF 製作

將多張靜態圖片或影片片段轉換為動態 GIF。

圖片尺寸調整

批次調整圖片尺寸，支援像素或百分比縮放、鎖定比例與本地下載。

圖片轉 ICO

將圖片轉換為 favicon 或應用圖示常用的 ICO 檔案，並支援多尺寸打包。

SVG 轉 PNG/JPG

將 SVG 匯出為 PNG 或 JPG，支援自訂尺寸、背景色與本地下載。

SVG 優化器

本地 SVG optimizer 思路，在瀏覽器本地壓縮 SVG 程式碼、清理中繼資料並輸出優化版本。

EXIF 查看器

本地 exif-viewer 思路，在瀏覽器本地讀取圖片中的 EXIF、GPS、相機和拍攝參數。

圖片中繼資料清理

本地 image-metadata-cleaner 思路，在瀏覽器本地移除 JPEG、PNG、WebP 中的 EXIF、XMP、ICC 等中繼資料。

圖片調色盤提取

本地 image-palette-extractor 思路，從圖片中提取主色、占比和調色盤，並匯出 HEX、CSS 或 JSON。

顏色轉換器

在瀏覽器本地於 HEX、RGB、HSL、HSV、HWB、LAB、LCH、CMYK 與 CSS 關鍵字之間做雙向顏色轉換，並支援 Alpha 通道。

顏色對比度檢查器

在瀏覽器本地檢查前景色與背景色的 WCAG 對比度，並判斷一般文字與大字體的 AA / AAA 通過狀態。

CSS 漸層產生器

在瀏覽器本地建立 linear-gradient、radial-gradient、conic-gradient，支援顏色停靠點編輯、即時預覽與 CSS 複製。

CSS 陰影產生器

在瀏覽器本地調整 box-shadow 位移、模糊、擴散、透明度、圓角與 inset，支援即時預覽與 CSS 複製。

HTML 顏色名稱

在瀏覽器本地瀏覽與搜尋 HTML / CSS 命名顏色，並複製顏色名稱、HEX 或 RGB。

favicon 產生器

從一張圖片產生常用 favicon 資源、site.webmanifest 與 HTML 引用片段。

Gemini 浮水印去除

在瀏覽器本地去除 Gemini 可見浮水印，支援批次處理與下載。

圖片轉 AVIF

將 PNG、JPG 等圖片批次轉換為 AVIF，支援品質、縮放比例與 ZIP 下載。

PNG 壓縮器

壓縮 PNG 體積並保留 PNG 輸出，支援縮放、減少顏色數量、預覽與 ZIP 下載。

圖片轉 WebP

將 PNG、JPG 等圖片批次轉換為 WebP，支援品質、縮放比例、預覽與 ZIP 下載。