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 按鈕，當要獲取頁面配色時只要點擊該圖示就會自動產生色彩資訊頁面。

STEP 2

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

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

STEP 3

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

STEP 4

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

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