圖片選色器

這是一款可在瀏覽器中完成操作的圖片選色工具,您可以在圖片上的任意位置拖曳取色,並一次查看 RGB、HEX、HSL、HSV。
選擇圖片後,只要在圖片上拖曳或點按即可取得顏色。
在圖片上點擊或長按觸控時會顯示放大鏡,因此也能確認細微的色彩。

圖片預覽

座標 -
RGB -
HEX -
HSL -
HSV -
CSS -

歷史記錄

取得的顏色會顯示在這裡作為歷史記錄。

圖片選色器的使用方式與適用情境

這款圖片選色器是一個線上工具,可像吸管一樣從已上傳的圖片中擷取顏色,並即時查看色碼。無論是網頁設計、橫幅製作、文件排版,還是確認商品圖片顏色,只要需要精準取色,都能快速派上用場。

拖曳時可連續查看顏色

只要在圖片上滑動,座標與顏色就會即時切換,因此更容易追蹤邊界線或漸層的色彩變化。

利用放大鏡更容易取得細節顏色

游標周圍會被放大顯示,因此細線、小圖示、陰影顏色等細微部分也能一邊放大一邊精準確認。(在圖片上點擊或長按觸控即可顯示放大鏡)

同時顯示 RGB、HEX、HSL、HSV

可一次確認多種色彩表示方式,讓設計指定、CSS 撰寫與印象比較等工作不必來回切換。

可從歷史記錄立即再次使用顏色

剛剛取得的顏色會保留在歷史記錄中,因此不必反覆重新拾取品牌色或想比較的顏色。

在這些情境中特別方便

當您想從網站或登入頁的參考圖片擷取配色,並決定相近色調的按鈕色或背景色時。

當您想確認電商商品圖片或橫幅素材的色調,並快速比較與既有設計之間的色差時。

在製作文件、社群圖片或縮圖時,想直接把圖片中的強調色沿用到標題或裝飾上時。

使用重點

  • 先載入圖片後,在想取得顏色的區域上按住滑鼠並移動,即可連續查看顏色。智慧型手機與平板也支援觸控操作。
  • 若想取得邊界線或小裝飾的顏色,請一邊看放大鏡一邊微調位置,更容易對準目標像素。
  • 取得的 RGB、HEX、HSL、HSV 都可以分別複製,能以最少操作轉貼到 CSS、設計工具或規格文件中。
  • 最近取得的顏色會保留在歷史記錄中,若想比較候選色,依序擷取多個位置再比對會很方便。
  • 如果想分辨明暗不同的顏色,除了 RGB 之外,也可同時查看 HSL 與 HSV,更容易掌握飽和度與亮度/明度的差異。
  • 圖片不會傳送到伺服器,所有處理都在瀏覽器內完成,因此即使是製作中的未公開圖片或公司內部資料的截圖,也能安心使用。