Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

最近介紹過一些令人印象深刻的色彩工具,多半都是 Google Chrome 外掛,例如我個人很喜愛的「CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表」,能以更簡單、有組織性的方式呈現網站樣式和各元件,對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多,包括一行程式碼將瀏覽器變成網頁編輯器,直接從網頁中修改內容,在開發網站測試時會省時省事很多。

本文要介紹的「Site Palette」是一款免費 Google Chrome 擴充功能,它的功能很簡單,從網站獲取該頁面的基本顏色配色,一鍵產生完整調色盤資訊,是設計師和前端開發人員必備工具。尤其是經常碰到色彩問題,或是喜歡從其他網站來獲得色彩靈感,Site Palette 會相當有幫助。

不僅如此,Site Palette 還能將色彩頁面產生為分享鏈結,以及匯出完整色彩模版,可快速輸入你慣用的編輯器,包括 Sketch 或 Adobe Swatch,也能將配色丟到 Google Palette 或 Coolors 看看能不能變出更多不同的色彩方案。

擴充功能資訊

元件名稱:Site Palette
適用平台:Chrome
程式語系:英文
官方網站:https://palette.site/
安裝頁面:從 Chrome 線上應用程式商店下載

使用教學

STEP 1

以 Google Chrome 開啟「Site Palette」擴充功能頁面,點選「加到 Chrome」免費下載、安裝至瀏覽器。

Site Palette

安裝後會在右上角出現一個 Site Palette 按鈕,當要獲取頁面配色時只要點擊該圖示就會自動產生色彩資訊頁面。

Site Palette

STEP 2

下圖是 Site Palette 產生的色彩資訊頁面,包括左邊有一張網頁擷圖,右邊則是主要色彩部分,會有顏色預覽、色碼和色彩名稱等資訊。

Site Palette

點選色塊可快速複製色碼資訊。

Site Palette

STEP 3

另一個比較實用的功能是點選左下角「Share This Palette」可產生分享鏈結,因為外掛在產生色彩資訊時是直接顯示於瀏覽器中,如果要分享給其他人,必須產生鏈結才形,產生後就能複製底下網址讓其他人看到一樣的畫面。

Site Palette

STEP 4

最後,還有一項重要功能推薦給大家,Site Palette 可將看到的色碼快速匯出為 Sketch 或 Adobe 適用的格式,只要點選下方對應按鈕即可,除此之外,也能把顏色丟進 Google Palette 和 Coolors 服務來創造更多可能性。

Site Palette

Site Palette 還能依照獲取的網頁配色,產生最接近的「中位切割演算法」(Median cut)和 Google 的 Material design 色系,有興趣的朋友可以自行研究一下。

Site Palette

值得一試的三個理由:

  1. 快速從網頁獲取完整配色資訊,列出所有色塊預覽和色碼
  2. 也能轉為 Median cut 和 Material design 色系
  3. 將調色盤匯出為 Sketch 或 Adobe Swatch 適用格式
分享本文